Introduction to Game Development: The Game Loop, ECS Architecture, and Math

The Core Challenge of Game Engineering

Unlike standard web or mobile applications that sit idle waiting for user events, a video game is a continuous real-time simulation. The program must poll player hardware inputs, simulate physical forces, calculate collision intersections, update artificial intelligence states, and rasterize millions of pixels to a screen at 60 to 144 frames per second without stuttering.

Understanding game programming requires peeling back the graphical gloss and mastering three engineering fundamentals: the deterministic game loop, Entity-Component-System (ECS) memory architecture, and fundamental vector mathematics.

1. The Heart of Every Game: The Game Loop and Delta Time

A naive game loop that moves a character by five pixels every iteration will run twice as fast on a 120Hz display compared to a 60Hz display. To keep physics and movement independent of monitor refresh rates, games use deltaTime: the exact fractional elapsed seconds between consecutive animation frames.

Here is a complete, runnable TypeScript implementation of a browser game loop demonstrating state updates governed by delta time:

// Minimal Game Loop Engine
interface Vector2D {
  x: number;
  y: number;
}

class PlayerCharacter {
  position: Vector2D = { x: 50, y: 50 };
  velocity: Vector2D = { x: 120, y: 0 }; // Pixels per second

  update(deltaTimeSeconds: number): void {
    // Movement is purely speed multiplied by elapsed time
    this.position.x += this.velocity.x * deltaTimeSeconds;
    this.position.y += this.velocity.y * deltaTimeSeconds;
  }

  render(ctx: CanvasRenderingContext2D): void {
    ctx.fillStyle = '#38bdf8';
    ctx.fillRect(this.position.x, this.position.y, 32, 32);
  }
}

export class GameEngine {
  private player = new PlayerCharacter();
  private lastTimestamp = 0;
  private canvas: HTMLCanvasElement;
  private ctx: CanvasRenderingContext2D;

  constructor(canvas: HTMLCanvasElement) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d')!;
  }

  start(): void {
    this.lastTimestamp = performance.now();
    requestAnimationFrame(this.loop.bind(this));
  }

  private loop(currentTimestamp: number): void {
    // 1. Calculate time delta in seconds
    const elapsedMs = currentTimestamp - this.lastTimestamp;
    const deltaTime = Math.min(elapsedMs / 1000, 0.1); // Clamp to prevent spiral of death on tab lag
    this.lastTimestamp = currentTimestamp;

    // 2. Update all simulation logic
    this.player.update(deltaTime);

    // 3. Clear canvas and render frame
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.player.render(this.ctx);

    // 4. Schedule next frame tick
    requestAnimationFrame(this.loop.bind(this));
  }
}

2. Architectural Shift: OOP vs Entity-Component-System (ECS)

Early game developers used deep object-oriented inheritance trees: GameObject -> Actor -> Pawn -> Monster -> Dragon. As game complexity grew, inheritance became brittle (e.g. what if you want a flying rock that has monster health but uses inanimate rock physics?). Moreover, polymorphic pointer chasing scattered entity memory across the heap, causing massive CPU L1/L2 cache misses.

Modern game development relies on Entity-Component-System (ECS):

• Entities: Lightweight integer IDs representing game objects (e.g. Entity 42).
• Components: Pure data structs containing zero methods (e.g. PositionComponent, HealthComponent, VelocityComponent).
• Systems: Pure logic loops that query matching components and process them sequentially in contiguous arrays of memory.

By organizing identical components contiguously in memory arrays, modern CPUs prefetch data into L1 cache lines with zero latency, enabling engines to simulate 100,000 active particles or physics bodies simultaneously.

3. Fundamental Math Every Game Developer Needs

You do not need advanced calculus to build compelling games, but you must master linear algebra vectors:

• Vector Normalization: Moving diagonally by adding 1 to X and 1 to Y produces a vector magnitude of √(1² + 1²) ≈ 1.414, making diagonal movement 41% faster. Always normalize direction vectors before multiplying by speed.
• Dot Product (A · B): If the dot product of a player's forward vector and the enemy's vector is positive, the enemy is in front of the player. If negative, the enemy is behind. This is the mathematical foundation of enemy line-of-sight and lighting angle calculations.
• Linear Interpolation (Lerp): Smoothly blending a camera position from point A to point B: current = current + (target - current) * factor.

4. Modern Game Engines Compared for Beginners

Do not build a custom C++ game engine from scratch for your first project. Choose an established tool based on your project goals:

• Godot Engine: Lightweight, fully open-source (MIT licensed), with no revenue royalties. Its clean node hierarchy and Python-like GDScript make it the finest engine for 2D and stylized 3D indie development.
• Unity: The industry standard for mobile, VR, and cross-platform indie 3D titles. Uses C# with extensive asset store availability and deep documentation.
• Unreal Engine: The premier AAA engine for hyper-realistic graphics, powered by C++ and visual Blueprints. High hardware demands, but unmatched graphical fidelity using Lumen dynamic global illumination and Nanite virtualized geometry.

Conclusion

Game development is a deeply rewarding craft that combines artistic imagination with rigorous systems programming. By starting with a rock-solid understanding of the game loop, delta time calculations, and modular component architecture, you develop transferable engineering skills that make your games run smoothly on any device.