Tech Stack
Pixi.js v8
WebGPU with WebGL fallback
bitECS
Data-oriented ECS framework
Vite
Fast dev server + HMR
TypeScript
Strict mode throughout
Monorepo Architecture
packages/types
- Shared TypeScript types
- ECS component schemas
- Game config interfaces
packages/core
- ECS world setup
- Game systems (movement, combat)
- Pathfinding engine
packages/client
- Pixi.js renderer
- Input handling
- Camera + minimap
packages/server
- Authoritative game state
- WebSocket networking
- Tournament matchmaking
ECS Components
Key Features
[1]
64-Player Tournament
Battle royale bracket with elimination rounds converging to a Final Showdown between the last two players.
[2]
WebGPU Rendering
Pixi.js v8 uses WebGPU when available, falling back to WebGL2. Designed for thousands of units on screen.
[3]
Data-Oriented ECS
bitECS stores components in typed arrays for cache-friendly iteration. Systems process entities in bulk.
[4]
Pathfinding System
A* pathfinding with flow fields for group movement. Units avoid obstacles and each other.
Stats
64
Max Players
20
Test Units
6
ECS Components
308
KB Size
4
Packages
Lessons Learned
>
ECS Architecture
Composition over inheritance. Entities are just IDs, components are data, systems are logic. Clean separation scales well.
>
WebGPU Pipeline
Pixi.js v8 abstracts the WebGPU API well, but understanding the render pipeline matters for optimization.
>
Monorepo for Games
Separating types, core logic, client rendering, and server authority into packages makes each layer testable in isolation.