Render System¶
This document explains the rendering systems used in the A-Maze-ing project.
The render system is responsible for: - graphical visualization using MiniLibX - menu and banner rendering - asset loading and scaling - player visualization - animation systems - real-time game updates
đ Main Files¶
render/
âââ Assets.py
âââ converter.py
âââ draw_maze.py
âââ GameState.py
âââ menu.py
âââ mlx_renderer.py
đ§ Overview¶
The rendering system combines: - MiniLibX graphical rendering - dynamic asset loading - tile-based visualization - gameplay systems - real-time animations - menu and UI rendering
The renderer is responsible for: - drawing the maze - displaying gameplay elements - animating BFS/path systems - handling themes - rendering player movement - updating the graphical interface in real time
đŧī¸ MLX Rendering System¶
Main file:
render/mlx_renderer.py
Main function:
def mlx_window(game: GameState) -> None:
This function: - initializes MLX - creates the game window - loads graphical assets - handles events - updates the rendering loop
đĒ Window System¶
The game window uses:
WINDOW_WIDTH = 1600
WINDOW_HEIGHT = 900
The renderer dynamically scales the maze to fit inside the window.
The bottom section of the screen is reserved for the banner UI.
đŽ Game Modes¶
The renderer supports multiple game states.
Main states:
| Mode | Description |
|---|---|
| MENU | Theme selection screen |
| GAME | Main gameplay screen |
Gameplay options:
| Key | Action |
|---|---|
| 1 | Generate new maze |
| 2 | Show BFS solution path |
| 3 | Show BFS exploration animation |
| 4 | Player mode |
| 5 | Change theme |
| ESC / 6 | Exit game |
đ§Š GameState System¶
Main file:
render/GameState.py
The GameState class stores all runtime game information.
class GameState:
It stores: - current mode - selected theme - animation states - player position - current maze - BFS path - explored nodes - gameplay flags
đ§ Main Stored Data¶
Examples:
self.mode
self.theme
self.playing
self.show_path
self.animate_bfs
self.player_x
self.player_y
self.path
self.explored
The class acts as a centralized runtime state manager.
đ¨ Asset System¶
Main file:
render/Assets.py
The Assets class loads all XPM images used by the game.
class Assets:
Loaded assets include: - walls - floors - trails - ducks - exit doors - animated exits - banners
đŧī¸ Theme System¶
The renderer supports multiple themes.
Current themes:
normal
gothic
The selected theme changes: - walls - floors - ducks - trails - exits
The assets are loaded dynamically depending on: - theme - tile size
đ Asset Conversion System¶
Main file:
render/converter.py
The project stores original assets as: - PNG - JPEG
They are dynamically converted into: - XPM
because MiniLibX requires the XPM format.
đĻ Asset Generation Pipeline¶
The conversion system:
- loads the original image
- resizes the image
- converts the image into XPM
- stores the generated file
Main functions:
generate_scaled_asset()
convert_to_xpm()
generate_all_assets()
đ Dynamic Tile Scaling¶
The renderer dynamically calculates tile size:
def calculate_tile_size(game: GameState) -> int:
This allows: - small mazes - large mazes - fullscreen scaling
without manually resizing assets.
đ§ą Maze Drawing System¶
Main file:
render/draw_maze.py
Main function:
def draw_maze(...)
This function: - renders the maze grid - draws walls and floors - draws the player - draws BFS trails - renders the animated exit - centers the maze on screen
đ§Š Coordinate Conversion¶
The renderer uses helper functions:
logical_to_grid()
grid_to_logical()
These functions convert: - logical maze coordinates - expanded grid coordinates
This keeps rendering synchronized with: - BFS - DFS - gameplay movement
đĒ Door Rendering¶
The renderer calculates visual entry and exit doors using:
calculate_door_position()
This function: - determines which maze edge the door belongs to - offsets the position correctly - renders the external maze openings
đī¸ Animation System¶
The project supports several animations.
đĻ Path Animation¶
Option 2 displays: - the shortest BFS path - the duck progressively moving through the maze
The animation progressively reveals:
game.path[:frame]
đ BFS Exploration Animation¶
Option 3 visualizes: - BFS traversal - explored cells - search progression
The animation uses:
game.explored[:frame]
to progressively display explored positions.
đĒ Exit Animation¶
When: - BFS finishes - the player reaches the exit
the exit portal becomes animated by alternating between:
assets.exit
assets.exit2
using timed frame switching.
đŽ Player Mode¶
Player mode allows real-time maze traversal using arrow keys.
Main function:
handle_player_movement()
Main features: - collision detection - smooth movement - trail rendering - backtracking - exit detection
đ§ą Collision Detection¶
The player cannot move through:
- walls (1)
- logo blocks (2)
The movement system validates: - boundaries - blocked cells - valid traversal positions
before updating the player position.
đŖ Player Trail System¶
The renderer stores the player path:
game.player_path
This allows: - visual backtracking - persistent player trails - movement visualization
When the player walks backwards: - the trail is removed dynamically
đ Menu System¶
Main file:
render/menu.py
The menu system handles: - menu backgrounds - banner rendering - menu image loading - dynamic image generation
đŧī¸ Banner Rendering¶
The bottom banner acts as the game's UI.
It contains: - gameplay options - controls - theme information
The banner is rendered independently from the maze.
⥠Rendering Loop¶
The MLX loop uses:
mlx.mlx_loop_hook()
This continuously: - redraws the screen - updates animations - refreshes gameplay state - synchronizes rendering
The project also uses:
mlx.mlx_do_sync()
to improve rendering consistency.
đ§ Rendering Goals¶
The rendering system was designed to: - provide real-time visualization - separate graphics from algorithms - support gameplay interaction - create animated algorithm demonstrations - dynamically scale assets - keep the project modular
The renderer acts as the visual layer between: - maze generation - gameplay systems - BFS/DFS algorithms - user interaction