Level Data Structure
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Level Data Structure in the RemyMan (Kilo Man) project defines the static and dynamic composition of the game world. It serves as the blueprint for environmental geometry, player starting positions, hazards, and NPC (Monster) placements. By decoupling world configuration from the core physics engine, the system allows for modular level design and expansive scrolling environments.
Sources: architecture_plan.md:14-22, app/components/Game/levelData.ts:1-5
Core Data Models
The system relies on a set of TypeScript interfaces that define the properties of every object within the level. These structures ensure type safety during the rendering and collision detection processes.
LevelEntity Interface
The LevelEntity is the primary building block for all level components. It includes spatial coordinates, dimensions, and type-specific behavior flags.
| Field | Type | Description |
|---|---|---|
id | string | Unique identifier generated for the entity. |
x, y | number | The horizontal and vertical position in the world. |
w, h | number | The width and height of the entity. |
type | EntityType | Categorizes the entity (e.g., platform, monster). |
patrolStart | number | (Optional) The left-most boundary for monster patrol. |
patrolEnd | number | (Optional) The right-most boundary for monster patrol. |
speed | number | (Optional) Movement speed for monsters. |
Sources: app/components/Game/types.ts:1-16, app/components/Game/levelData.ts:4-5
Entity Types
Entities are categorized via the EntityType union type, which determines how the GameCanvas renders the object and how the physics engine handles collisions.
Level Composition and Sections
Level data is organized into sections based on horizontal coordinates (X-axis). For instance, LEVEL_1 spans approximately 7000 pixels and is divided into distinct gameplay phases.
Section Breakdown
Levels are designed with specific themes or challenges based on their X-range:
- Starting Area (0-1000): Introduces basic platforms and the first hazard/monster.
- The Climb (1000-2500): Focuses on verticality and high-speed patrol monsters.
- The Gap (2500-4000): Features "The Big Pit" hazard and precision jumping.
- Monster Alley (4000-5500): High density of moving entities.
- Final Stretch (5500-7000): Culminates in a victory jump and the Goal entity.
Sources: app/components/Game/levelData.ts:7-105, app/components/Game/GameCanvas.tsx:44
Data Flow and Implementation
The level data is consumed by the GameCanvas component to initialize both static environment rendering and dynamic state management.
Initialization Sequence
When the game state transitions to playing, the system filters the level array to separate static geometry from dynamic actors.
Dynamic Monster State
While static platforms remain in the LEVEL_1 array, monsters are transformed into a MonsterState within a React ref to track their movement across frames.
| Field | Description |
|---|---|
vx | Current horizontal velocity based on patrol direction. |
patrolStart | Clamping boundary for left movement. |
patrolEnd | Clamping boundary for right movement. |
Sources: app/components/Game/types.ts:28-37, app/components/Game/GameCanvas.tsx:121-131
Rendering and Viewport Logic
Level entities are rendered relative to a camera system. The camera tracks the player and clamps its values to the levelWidth defined in the game configuration.
- World Width: Configured to match the level data (e.g., 7000px).
- Coordinate Translation: Entities are drawn at
entity.x - camera.xandentity.y - camera.y. - Parallax Integration: The level width dictates the speed of the background layers (Sky, Mountains, Hills) to simulate depth.
Sources: app/components/Game/GameCanvas.tsx:44, 256-277, architecture_plan.md:27-35
Summary
The Level Data Structure is a centralized configuration system that defines the physical and visual boundaries of the RemyMan world. By utilizing the LevelEntity interface, the project achieves a clear separation between the level design (defined in levelData.ts) and the game's operational logic (defined in GameCanvas.tsx). This structure supports complex features like parallax scrolling, patrol AI, and varied win/loss conditions.