Tower Defense — Isometric Overhaul (P022)

A 10-wave tower defense game with isometric 2.5D rendering, 5 tower types, 6 enemy types, and a boss Dragon encounter. Built with TypeScript and PixiJS 8 for WebGL rendering.

This is a view-layer transformation of P019's tower defense game. The engine logic is unchanged; all modifications are in src/view/, a new src/view/iso-transform.ts module, and minor config refactoring.

Quick Start

cd projects/022-tower-defense-iso/3-development
npm install
npm run dev

Open the URL shown by Vite (usually http://localhost:5173).

Installation

Prerequisites: Node.js 20+, npm

npm install

Commands

How to Play

Tower Types

Upgrades

Available from Wave 4. Click a placed tower to see upgrade/sell options.

• Tier 2: 1x base cost. 1.5x damage, 1.15x range, 1.2x fire rate
• Tier 3: 1.5x base cost. 2x damage, 1.3x range, 1.4x fire rate
• Sell: Refunds 50% of total investment

Speed Controls

Use the 1x, 2x, 3x buttons to change game speed.

Enemy Types

Isometric View Features

Coordinate System

• Grid space: Integer tile positions (0,0)-(19,14)
• Engine world: Continuous pixel coords (48px per cell)
• Screen space: Isometric projection onto 1152x672 canvas

Visual Enhancements

• Diamond-shaped tiles with grass shade variants, water shimmer, entry/base markers
• Isometric 3/4-angle tower sprites with tier-specific detail and shadows
• Isometric enemy sprites with direction facing and slow-effect tinting
• Trajectory-aware projectiles (arrow rotation, cannonball arc, ice spin, lightning chain, sniper tracer)
• RenderTexture caching for GPU-efficient sprite rendering
• Depth-sorted entity rendering (Y-sort with enemy/tower ordering)
• Elliptical range previews projected onto isometric ground plane
• Glass-effect health bars (green/amber/red by HP ratio)

Effects

• Per-tower fire effects (muzzle flash, cannon smoke, frost burst, lightning flash, sniper tracer)
• Type-specific enemy death particles
• Floating damage numbers (white=normal, blue=ice, gold=kill)
• Upgrade spiral sparkles
• Cannon splash shockwave rings (isometric ellipse)
• Lightning chain zigzag arcs
• Screen shake on cannon fire, dragon death, base damage
• Final-wave-kill slow-motion flash
• Environmental dust motes
• Day/night tint shift across waves
• Vignette overlay for cinematic feel
• Wave announcement text

Audio

• Per-enemy death sounds with generic fallback
• Ambient audio (calm/battle) with crossfade
• UI hover/click sounds
• Extended music track preference (long tracks when available)

Architecture

The game uses a strict engine/view separation:

• Engine (src/engine/): Pure TypeScript, zero browser dependencies. All game logic, math, and state management. Fully testable in Node.js. Unchanged from P019 (except minor config.ts refactoring).
• View (src/view/): PixiJS 8 WebGL rendering, DOM-based UI, Web Audio API audio. Reads engine state each frame via engine.getState(), fires engine actions on user input.
• Iso-Transform (src/view/iso-transform.ts): Pure math module for coordinate transforms between grid, world, and screen spaces. Zero browser dependencies.

8-Layer Rendering Architecture

Engine API

const engine = new GameEngine();
engine.placeTower(spotId, TowerType.Arrow);
engine.upgradeTower(towerId);
engine.sellTower(towerId);
engine.startNextWave();
engine.setSpeed(2);
engine.update(dt);
const state = engine.getState();

Build Output

npm run build produces a dist/ folder that can be served with any static HTTP server.