Sector Genesis (Sci-Fi Incremental Survivor Game)
Sector Genesis is a high-performance browser-based incremental survival game set in a sci-fi setting. The project combines dynamic auto-combat (inspired by Vampire Survivors) with a deep faction evolution system (in the style of StarCraft) and constant meta-progression.
Technology stack
Frontend: Vue 3 (Composition API), TypeScript
Graphics engine: Pixi.js v8 (2D WebGL/WebGPU)
State management: Pinia
Styling: Tailwind CSS
Build: Vite
Key tasks and architectural challenges
The main goal of the project was to combine a reactive UI framework with imperative high-performance rendering of the game, achieving a stable 60 FPS with hundreds of active objects on the screen.
Paradigm Separation (Vue vs. Pixi.js Slippage): All game loop logic and rendering are isolated within the Pixi.js ecosystem, while Vue 3 and Pinia handle the HUD, upgrade menus, and global session state.
Data-Driven Architecture: Entities are built on a class structure with shared systems (spawners, weapon managers), which minimizes CPU overhead during collisions and auto-targeting.
Synchronization Optimization: Efficiently transfer high-frequency data from the game engine to the Pinia reactive state without performance loss.
Technology stack
Frontend: Vue 3 (Composition API), TypeScript
Graphics engine: Pixi.js v8 (2D WebGL/WebGPU)
State management: Pinia
Styling: Tailwind CSS
Build: Vite
Key tasks and architectural challenges
The main goal of the project was to combine a reactive UI framework with imperative high-performance rendering of the game, achieving a stable 60 FPS with hundreds of active objects on the screen.
Paradigm Separation (Vue vs. Pixi.js Slippage): All game loop logic and rendering are isolated within the Pixi.js ecosystem, while Vue 3 and Pinia handle the HUD, upgrade menus, and global session state.
Data-Driven Architecture: Entities are built on a class structure with shared systems (spawners, weapon managers), which minimizes CPU overhead during collisions and auto-targeting.
Synchronization Optimization: Efficiently transfer high-frequency data from the game engine to the Pinia reactive state without performance loss.