TrackLoader

The TrackLoader class handles loading and initializing all track-related data including graphical assets, collision maps, and environmental settings for a racing game.

---

📌 Overview

Responsible for:

• Loading track configuration from JSON files
• Processing graphical layers (foreground/background)
• Extracting collision data from images
• Setting up start positions, checkpoints, and gates
• Configuring environmental conditions

---

🛠️ Methods

static loadTrack(displayDriver: DisplayDriver, src: string): Promise<Track>

Main entry point for track loading pipeline.

🔄 Loading Process:

1. Fetch track configuration JSON
2. Load graphical layers:
   • Foreground (fgLayers)
   • Background (bgLayers)
3. Process track data:
   • Normalize start positions
   • Extract collider data
   • Load gates (if available)
   • Process checkpoints
4. Initialize and return Track instance

Parameter	Type	Description
displayDriver	DisplayDriver	Rendering engine interface
src	string	Path to track config file

---

static extractColliderFromImage(displayDriver: DisplayDriver, spriteName: string): Promise<number[][]>

Converts sprite images into collision maps.

🖼️ Image Processing:

graph TD
    A[Load Sprite] --> B[Draw to Canvas]
    B --> C[Read Pixel Data]
    C --> D[Map Colors to Collision Values]
    D --> E[Generate 2D Collision Array]

Color	Collision Value
Black (000000)	Solid Wall
White (FFFFFF)	Drivable Surface
Red (FF0000)	Off-track Penalty

---

📂 Data Structures

TrackDefinition

interface TrackDefinition {
  fgLayers: string[];
  bgLayers: string[];
  startPositions: Array<{x: number, y: number, angle: number}>;
  checkpoints: Vector2D[];
  gates?: GateData[];
  isRainy?: boolean;
}

Normalize<T>

Utility type that ensures consistent typing across different track variants:

• grassTrack
• gravelTrack
• snowTrack

---

🎨 Track Attributes

Attribute	Type	Description	Example
Graphical Layers	string[]	Foreground/background images	["layer1.png", "layer2.png"]
Start Positions	Array<Vector3D>	Grid positions for race start	[{x: 10, y: 20, angle: 90}]
Colliders	number[][]	2D collision matrix	[[0,1],[1,1]]
Checkpoints	Vector2D[]	Race progress markers	[{x: 100, y: 150}]
Weather	boolean	Rain effect toggle	isRainy: true

---

💡 Usage Example

const raceTrack = await TrackLoader.loadTrack(
  renderer,
  "tracks/alpine_circuit.json"
);