Game Development
Overview
Patterns and practices for building games across platforms. Covers architecture, rendering, physics, AI, multiplayer, and optimization.
Game Architecture
Game Loop
┌─────────────────────────────────────────────────────────────┐
│ Game Loop │
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Input │ ─→ │ Update │ ─→ │ Physics │ ─→ │ Render │ │
│ │ Process │ │ Logic │ │ Step │ │ Frame │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ ↑ │ │
│ └─────────────────────────────────────────────┘ │
│ Next Frame │
└─────────────────────────────────────────────────────────────┘
Fixed vs Variable Timestep
| Type | Use Case | Code Pattern |
|------|----------|--------------|
| Fixed | Physics, determinism | while (accumulator >= dt) { update(dt); } |
| Variable | Rendering, animations | update(deltaTime); |
| Hybrid | Most games | Fixed physics, variable render |
// Hybrid game loop
let accumulator = 0;
const FIXED_DT = 1/60;
function gameLoop(currentTime: number) {
const deltaTime = currentTime - lastTime;
accumulator += deltaTime;
// Fixed timestep for physics
while (accumulator >= FIXED_DT) {
physicsUpdate(FIXED_DT);
accumulator -= FIXED_DT;
}
// Variable timestep for rendering
const alpha = accumulator / FIXED_DT;
render(alpha); // Interpolate between states
requestAnimationFrame(gameLoop);
}
Entity Component System (ECS)
┌─────────────────────────────────────────────────────────────┐
│ ECS Architecture │
│ │
│ Entity: Just an ID │
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ 1 │ │ 2 │ │ 3 │ │
│ └─────┘ └─────┘ └─────┘ │
│ │
│ Components: Pure Data │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Position │ │ Velocity │ │ Sprite │ │
│ │ x, y, z │ │ vx, vy │ │ texture │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ Systems: Logic │
│ ┌────────────────┐ ┌────────────────┐ │
│ │ MovementSystem │ │ RenderSystem │ │
│ │ Position+Vel │ │ Position+Sprite│ │
│ └────────────────┘ └────────────────┘ │
└─────────────────────────────────────────────────────────────┘
// Component definitions
interface Position { x: number; y: number; }
interface Velocity { vx: number; vy: number; }
interface Sprite { texture: string; width: number; height: number; }
// System
function movementSystem(entities: Entity[], dt: number) {
for (const entity of entities) {
if (entity.has(Position) && entity.has(Velocity)) {
const pos = entity.get(Position);
const vel = entity.get(Velocity);
pos.x += vel.vx * dt;
pos.y += vel.vy * dt;
}
}
}
2D Game Development
Sprite Animation
interface Animation {
frames: string[]; // Texture names
frameDuration: number; // Seconds per frame
loop: boolean;
}
class AnimatedSprite {
private currentFrame = 0;
private elapsed = 0;
update(dt: number) {
this.elapsed += dt;
if (this.elapsed >= this.animation.frameDuration) {
this.elapsed = 0;
this.currentFrame++;
if (this.currentFrame >= this.animation.frames.length) {
this.currentFrame = this.animation.loop ? 0 : this.animation.frames.length - 1;
}
}
}
get texture(): string {
return this.animation.frames[this.currentFrame];
}
}
Collision Detection
| Method | Complexity | Use Case | |--------|------------|----------| | AABB | O(n²) → O(n log n) | Boxes, simple shapes | | Circle | O(n²) | Projectiles, characters | | SAT | O(n²) | Complex convex polygons | | Pixel Perfect | Expensive | Precise collision |
// AABB collision
function aabbIntersect(a: AABB, b: AABB): boolean {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
// Spatial hash for broad phase
class SpatialHash {
private cells = new Map<string, Entity[]>();
private cellSize: number;
insert(entity: Entity) {
const key = this.getKey(entity.position);
if (!this.cells.has(key)) this.cells.set(key, []);
this.cells.get(key)!.push(entity);
}
query(position: Vector2): Entity[] {
// Check neighboring cells
const nearby: Entity[] = [];
for (let dx = -1; dx <= 1; dx++) {
for (let dy = -1; dy <= 1; dy++) {
const key = this.getKey({ x: position.x + dx * this.cellSize, y: position.y + dy * this.cellSize });
nearby.push(...(this.cells.get(key) || []));
}
}
return nearby;
}
}
Game AI
Finite State Machine
interface State {
enter(): void;
update(dt: number): void;
exit(): void;
}
class EnemyAI {
private states = new Map<string, State>();
private currentState: State;
transition(stateName: string) {
this.currentState?.exit();
this.currentState = this.states.get(stateName)!;
this.currentState.enter();
}
}
// Example: Patrol → Chase → Attack
class PatrolState implements State {
enter() { this.setAnimation('walk'); }
update(dt: number) {
this.patrol();
if (this.canSeePlayer()) {
this.fsm.transition('chase');
}
}
exit() {}
}
Behavior Trees
┌─────────────────────────────────────────────────────────────┐
│ Behavior Tree │
│ │
│ [Selector] │
│ / \ │
│ [Sequence] [Patrol] │
│ / \ │
│ [CanSee?] [Attack] │
│ │ │
│ [Chase] │
└─────────────────────────────────────────────────────────────┘
Pathfinding (A*)
function aStar(start: Node, goal: Node): Node[] {
const openSet = new PriorityQueue<Node>();
const cameFrom = new Map<Node, Node>();
const gScore = new Map<Node, number>();
const fScore = new Map<Node, number>();
gScore.set(start, 0);
fScore.set(start, heuristic(start, goal));
openSet.enqueue(start, fScore.get(start)!);
while (!openSet.isEmpty()) {
const current = openSet.dequeue()!;
if (current === goal) {
return reconstructPath(cameFrom, current);
}
for (const neighbor of getNeighbors(current)) {
const tentativeG = gScore.get(current)! + distance(current, neighbor);
if (tentativeG < (gScore.get(neighbor) ?? Infinity)) {
cameFrom.set(neighbor, current);
gScore.set(neighbor, tentativeG);
fScore.set(neighbor, tentativeG + heuristic(neighbor, goal));
openSet.enqueue(neighbor, fScore.get(neighbor)!);
}
}
}
return []; // No path found
}
Multiplayer Games
Network Architecture
| Model | Latency | Complexity | Use Case | |-------|---------|------------|----------| | Peer-to-Peer | Low | Medium | Fighting games, small lobbies | | Client-Server | Medium | High | Most online games | | Authoritative Server | Higher | Highest | Competitive games |
Lag Compensation
// Client-side prediction
class NetworkedPlayer {
private pendingInputs: Input[] = [];
private serverState: PlayerState;
update(input: Input) {
// 1. Apply input locally (prediction)
this.applyInput(input);
this.pendingInputs.push(input);
// 2. Send to server
this.sendInput(input);
}
onServerUpdate(state: PlayerState, lastProcessedInput: number) {
// 3. Reconcile with server
this.serverState = state;
// 4. Re-apply unprocessed inputs
this.pendingInputs = this.pendingInputs.filter(i => i.id > lastProcessedInput);
for (const input of this.pendingInputs) {
this.applyInput(input);
}
}
}
State Synchronization
// Delta compression
interface StateDelta {
timestamp: number;
changes: Map<EntityId, ComponentChanges>;
}
function computeDelta(prev: GameState, curr: GameState): StateDelta {
const changes = new Map();
for (const [id, entity] of curr.entities) {
const prevEntity = prev.entities.get(id);
if (!prevEntity || hasChanged(prevEntity, entity)) {
changes.set(id, getChangedComponents(prevEntity, entity));
}
}
return { timestamp: curr.timestamp, changes };
}
Game Optimization
Rendering Optimization
| Technique | Benefit | Implementation | |-----------|---------|----------------| | Batching | Reduce draw calls | Combine sprites with same texture | | Culling | Skip invisible objects | Frustum culling, occlusion culling | | LOD | Reduce polygon count | Distance-based model switching | | Instancing | Efficient duplicates | GPU instancing for repeated objects |
Memory Optimization
// Object pooling
class ObjectPool<T> {
private pool: T[] = [];
private factory: () => T;
acquire(): T {
return this.pool.pop() ?? this.factory();
}
release(obj: T) {
this.reset(obj);
this.pool.push(obj);
}
}
// Usage
const bulletPool = new ObjectPool(() => new Bullet());
function fireBullet() {
const bullet = bulletPool.acquire();
bullet.init(position, direction);
activeBullets.add(bullet);
}
function onBulletHit(bullet: Bullet) {
activeBullets.delete(bullet);
bulletPool.release(bullet);
}
Game Engines Reference
| Engine | Language | Best For | Platform | Skill | |--------|----------|----------|----------|-------| | Unity | C# | Mobile, indie, VR | All | - | | Unreal | C++, Blueprint | AAA, realistic | PC, Console | - | | Godot | GDScript, C# | Indie, 2D | All | - | | Flame | Dart | Flutter 2D, casual | All | flame/ | | Phaser | JavaScript | Web 2D | Browser | - | | Three.js | JavaScript | Web 3D | Browser | - | | Bevy | Rust | Performance | Desktop | - | | LÖVE | Lua | Simple 2D | Desktop | - |
Flame Engine (Flutter)
專為 Flutter 開發者設計的 2D 遊戲引擎，詳細文件請參考 flame/SKILL.md：
- flame-core/ - 組件、輸入、碰撞、相機、動畫、音效、粒子
- flame-systems/ - 14 個遊戲系統（任務、對話、背包、戰鬥等）
- flame-templates/ - RPG、Platformer、Roguelike 模板
Related Skills
- [[performance-optimization]] - General optimization
- [[realtime-systems]] - WebSocket, networking
- [[cpp]] - Performance-critical code
- [[javascript-typescript]] - Web games