Building & Shipping Games

Building & Shipping Games

Understanding why games work psychologically is table stakes. The other half of game design is understanding how games work technically — and building the taste to know when a technical limitation is a constraint to work around and when it is a creative constraint to lean into.

This module maps the technical pipeline through the lens of what we actually built in The Vault dungeon crawler.

The Stack Decision

Every game starts with a stack decision. Ours:

The no-external-assets constraint was deliberately chosen. It is a design constraint that produced better engineering: every visual element had to be generated in code, which means every visual element is parameterized and programmable.

The Game Loop in Practice

The Phaser game loop calls update() 60 times per second. Everything that moves, thinks, or reacts lives in update(). Our update() does:

1. Check if player is active (skip all logic if player is dead)
2. Read keyboard input (WASD for movement, arrows for shooting)
3. Calculate velocity vector and apply to player physics body
4. Update player glow position to follow player
5. Check shoot cooldown, fire bullet if shooting and cooldown elapsed
6. Chase player with all active enemies
7. Emit player position event for minimap

That is the complete game logic per frame. Simple is not primitive — it is disciplined. Every additional per-frame operation costs 1/60th of a second budget. Staying lean keeps the game smooth.

Scene Architecture

The dungeon crawler uses two scenes running simultaneously:

GameScene — owns all gameplay: the dungeon, physics bodies, enemies, player, bullets, loot. Uses world-space coordinates that scroll with the camera.

UIScene — owns all interface: HP bar, score text, minimap, controls. Uses screen-space coordinates that never scroll. Listens to events emitted by GameScene.

This architecture is the right pattern for any game with a fixed HUD. The alternative — putting UI in the game scene with setScrollFactor(0) — works but couples UI to world-space logic in ways that create bugs and complicate camera work.

Procedural Generation Principles

Our dungeon generator (BSP-inspired) follows these rules:

1. Place rooms randomly, constrained to grid boundaries with minimum separation
2. Sort rooms by position for consistent ordering
3. Connect adjacent rooms with L-shaped corridors
4. Mark the last room as the boss room
5. Return a tile grid (0=floor, 1=wall) and a room array

The critical insight about procedural generation: guarantee playability, not balance. A generated dungeon must always be completable — every room connected, no dead-ends that trap the player. Balance (difficulty, reward distribution) can be probabilistic and imperfect. Connectivity must be guaranteed.

The Complete Shipping Pipeline for Web Games

1. Local development — Vite dev server + HMR for rapid iteration
2. Test in target browser — not a dev-tools preview; actual user behavior
3. Build — npm run build produces optimized static files in /dist
4. Deploy — static hosting (Vercel, Netlify, GitHub Pages, Cloudflare Pages)
5. Domain — custom domain via DNS configuration
6. Analytics — player session length, drop-off points, error rates

The Vault is currently at step 1–2. Steps 3–5 are one Vercel deploy command.

What Makes a Game Shippable

A game is shippable when:

• It does not crash under any normal player path
• The tutorial (implicit or explicit) is learnable without instruction
• Every system the player interacts with has feedback (nothing happens silently)
• The first 60 seconds produce a clear win and a clear goal
• There is a clear endpoint or loop (the game knows when a session is complete)

The Vault is shippable. It has: immediate action clarity (shoot enemies, collect shards), a clear win condition (defeat the boss, take the portal), clear feedback on every action (sound, particles, camera effects), and a loop (each floor is a complete arc).

Your Game Dev Stack — Built and Ready

Total cost to build and ship a professional-quality 2D web game: $0–$20.