Technical Illustrations – Game Hub

This page provides technical illustrations and diagrams to explain the architecture, navigation, and UI/UX of the Game Hub project.

Image

One-line Description:

Game Hub: An interactive web platform of student-created minigames and worlds blending biotech education with fun, casual gameplay.

1. Overall System Architecture

Architecture and Functionality:
System architecture of Game Hub: The frontend (static site with interactive JS and Python) communicates with the backend API for points and user data, loads assets (such as images/audio), and interacts with the user via browser events.

+-------------------+
|       User         |
|(Using the Browser) |
+-------------------+
|
v
+-------------------+
|     Frontend      |
|(Jekyll/Python/JS) |
+-------------------+
|         |        |
v         v        v
[Backend] [Assets] [Events]
(API for  (Images, (User
points)   Audio)   Input)
  |        |        |
  +--------+--------+

2. World Map Navigation

Navigation:
Main Game Hub navigation: Users move with WASD, interact with world icons to talk with NPCS/enter themed worlds, can change their outfits to different game characters, and can access help options in world0 or the search menu.

Image

3. World Entry & NPCs

Worlds/NPCs:
World entry interaction: Approaching a world icon triggers an NPC modal with themed dialogue, Enter/Talk/Cancel options, and animated text for immersion.

Image

4. Skin/Cosmetic Selection

Skins & Cosmetics:
Cosmetic selection modal: Players can choose from multiple character skins, each with a points cost, and confirm their choice for in-game appearance.

Image

5. Points System Integration

Points:
Points system: The frontend fetches and displays the user’s total points from the backend API, updating in real time as games are played.

Image

6. Worlds and Levels

World Pages:
World layout: Each world features a unique background, minigame entry points, and navigation elements for a unified user experience. Also there is a home icon on each world to easily get back to the home page aswell as custom audio for the worlds.

Image

7. Minigame Launch Flow

Minigame Launch:
Game Launch: Movement and collision detection when moving into the sprite of the icon triggers navigation to the minigames, with points awarded via backend integration.

Image

8. Planning & Documentation

Planning:
Project Planning: Documentation pages Our Outline, Format, and Synopsis .mdfiles guide the design and implementation of our worlds and games.

Image

9. Help & Support UI

Help/Support:
Help Center: Users can access guides and troubleshooting for navigation, adventure, cosmetics, and games via our centralized help page.

Image

10. Audio/Music Integration

Audio & Music:
Audio integration: Each world, minigame and search menu page features a unique background song, triggered by users pressing any button. The music can be paused, muted, and fast forwarded making it adaptable based on the users needs.

Image