# The F2P mobile game stack of the future is web

> Guide · Updated August 2026 · by the NixieFX team · canonical: https://nixiefx.com/mobile-game-stack/

**TL;DR — the stack.** The fastest way to build a free-to-play mobile game in 2026 is a web-native HTML5 stack: [Three.js](https://threejs.org) renders the game world, [PixiJS](https://pixijs.com) renders the UI layer on top, [NixieFX](https://nixiefx.com/) authors and runs the particle VFX, UI is designed in [Figma](https://www.figma.com) and imported through a custom Figma→Pixi importer, [SpacetimeDB](https://spacetimedb.com) is the entire backend, [Capacitor](https://capacitorjs.com) wraps it into native iOS and Android builds, and [Capawesome](https://capawesome.io) delivers over-the-air updates. Every layer ships [LLM agent skills](https://nixiefx.com/skills/), so AI coding agents are first-class members of the team.

## Why is the classic engine stack (Unity, Cocos, libGDX) dying for F2P mobile?

Free-to-play mobile is not won by graphics. It is won by **iteration speed**: how fast you can tune retention, ship a live event, rebalance an economy, and test the next feature. On that axis, the classic engine workflow has become the bottleneck:

- **LLMs can't drive closed editors.** Agents are only as good as their access to the project. A Unity game lives in binary scenes, serialized YAML, meta files, and editor state an agent can't reliably read or write. A web game is plain TypeScript in plain files — the exact format LLMs are best at.
- **The web is the corpus LLMs know best.** Every frontier model has seen more JavaScript/TypeScript and browser API usage than any other kind of code.
- **Native builds fight live ops.** Engine games ship balance changes through binary builds and store review. A web-based game updates its JavaScript and assets over the air in minutes.
- **Trust and economics shifted.** Unity's 2023 runtime-fee episode (announced September 2023, walked back a year later) taught studios what platform risk feels like. Every layer of this stack is open source or replaceable.
- **The web runtime caught up.** WebGL 2 is universal on modern phones; WebGPU ships in Chrome (since 113, 2023) and Safari (since Safari 26, 2025). Three.js has 100k+ GitHub stars, PixiJS 45k+. HTML5 is now a serious game runtime.

One sentence: engines optimized for build quality; F2P is decided by iteration speed, and iteration speed now belongs to text-first, LLM-friendly, over-the-air web stacks.

## What does the web-native mobile game stack look like?

| Layer | Tool | Role | Agent skills |
| --- | --- | --- | --- |
| 3D world | [Three.js](https://threejs.org) | Renders the game scene (WebGL 2 / WebGPU) | [community packs](https://github.com/gamedev-skills/awesome-gamedev-agent-skills) |
| UI layer | [PixiJS](https://pixijs.com) | 2D UI and HUD composited above the world | [official](https://github.com/pixijs/pixijs-skills) |
| VFX | [NixieFX](https://nixiefx.com/) | Particle editor + runtime for both Pixi and Three | [official](https://nixiefx.com/skills/) |
| UI design | [Figma](https://www.figma.com) | Screens designed by designers, imported to Pixi | your own importer + skill |
| Backend | [SpacetimeDB](https://spacetimedb.com) | Database *and* server in one module | [official](https://github.com/clockworklabs/SpacetimeDB) |
| Native shell | [Capacitor](https://capacitorjs.com) | Wraps the web build into iOS / Android apps | community packs |
| Delivery | [Capawesome](https://capawesome.io) | Native plugins + over-the-air live updates | community packs |

Flow: Figma → (custom importer) → PixiJS UI over a Three.js world with NixieFX VFX → wrapped by Capacitor → delivered/updated by Capawesome → synced in realtime with SpacetimeDB. LLM agent skills span every layer.

### Three.js — the game world
The de-facto standard 3D renderer of the web ([github.com/mrdoob/three.js](https://github.com/mrdoob/three.js)): huge ecosystem, first-class WebGPU support, more LLM training coverage than any game engine API. The gameplay scene is ordinary TypeScript an agent can refactor.

### PixiJS — the UI layer on top
[PixiJS](https://github.com/pixijs/pixijs) renders HUD, menus, and popups as a 2D layer composited above the Three.js canvas. It ships [25 official agent skills](https://github.com/pixijs/pixijs-skills): `npx skills add https://github.com/pixijs/pixijs-skills`.

### NixieFX — particles and VFX
[NixieFX](https://nixiefx.com/) is a full-featured particle editor that runs in the browser and exports to a lightweight runtime for **both PixiJS and Three.js** — one VFX pipeline for UI juice and in-world effects. Effects are plain JSON in your repo; two [official skills](https://nixiefx.com/skills/) teach your agent to author and integrate them: `npx skills add https://github.com/azakhary/nixie-fx`.

### Figma — UI design, imported not rebuilt
Designers work in Figma; a small custom importer walks the Figma file via its API and emits Pixi layout code mirroring Pixi's own scene conventions (containers, anchors, nine-slices). This is the one piece you build yourself (~a week), then every screen is a designer-owned artifact your agent can re-import on demand. Write a skill for the importer too.

### SpacetimeDB — the entire backend
[SpacetimeDB](https://spacetimedb.com) merges the database and the game server: tables and reducers (TypeScript, C#, or Rust), one deployed module, clients subscribe to live queries over WebSocket. No REST layer, no ORM — the whole backend fits in an agent's context window. Skills: `npx skills add clockworklabs/spacetimedb`.

### Capacitor — the native shell
[Capacitor](https://capacitorjs.com) wraps the web build into real iOS and Android apps with a plugin bridge for IAP, push, ads, haptics, tracking. To the stores — and to players — it is a native game.

### Capawesome — delivery and live updates
The [Capawesome](https://capawesome.io) plugin suite fills the native gaps, and [Capawesome Live Update](https://capawesome.io/plugins/live-update/) pushes new JS bundles and assets over the air, compliantly. Store releases become a monthly formality; live ops runs at web speed.

## Why must every layer have LLM agent skills?

Agent skills are versioned instruction packages (`SKILL.md` files) that teach an AI coding agent how to use a tool correctly. One command installs them for Claude Code, Cursor, Codex, Grok, Copilot, Gemini CLI and 40+ agents (see [agentskills.io](https://agentskills.io)). This is the actual selection criterion of the stack: **if a library in your stack has no agent skill, either write one or pick a different library.** An un-teachable dependency is a manual-labor tax on every future feature.

## Should you write your own internal skills?

Yes. Public skills cover the libraries; your studio's edge lives in internal skills, versioned in the repo like code:

- **Performance budgets** — frame-time targets, draw-call caps, texture-memory limits per device tier, particle budgets.
- **Code conventions** — how scenes, systems, and UI screens are structured in *your* codebase.
- **Live ops** — how events are configured, how a Capawesome rollout is staged and rolled back.
- **Asset pipeline** — atlas packing, audio compression, mesh budgets, generated-file locations.

## How do you start a new game on this stack today?

1. Scaffold a TypeScript web app (Vite) — `npm install three pixi.js nixie-fx`
2. `npx skills add https://github.com/pixijs/pixijs-skills https://github.com/azakhary/nixie-fx clockworklabs/spacetimedb`
3. Render the Three.js world full-screen; mount a transparent Pixi canvas above it for UI.
4. Author VFX in the [NixieFX editor](https://nixiefx.com/editor/) — JSON in your project folder, exported to a runtime bundle.
5. Set up the Figma file and write the Figma→Pixi importer (then wrap it in a skill).
6. `spacetime init` the backend module; define tables and reducers; subscribe from the client.
7. `npx cap add ios android`; wire IAP and push via Capacitor/Capawesome plugins.
8. Configure Capawesome Live Update; ship the store build once — then iterate over the air, daily.

## FAQ

**Is Unity really dead for mobile game development?** As an engine, no — it still dominates heavy 3D and console-quality titles. As the default for F2P mobile, we'd argue yes: F2P is decided by iteration speed and LLM leverage, and a closed editor with binary scenes loses on both.

**Can a web game hit 60 fps on mid-range phones?** Yes. WebGL 2 is universal on phones from the last five years; WebGPU ships in Chrome (113+, 2023) and Safari (26+, 2025); Three.js/PixiJS batch aggressively. Use atlases, capped draw calls, pooled particles.

**How do you ship a web game to the App Store and Google Play?** Wrap it with Capacitor — a normal native binary with full plugin access that passes store review like any other game.

**Are over-the-air updates allowed on iOS and Android?** Yes, within platform rules: JS and assets executed by the system web view may be updated over the air as long as updates don't change the app's core purpose or sneak native code past review. Capawesome Live Update implements this compliantly.

**Why SpacetimeDB instead of Firebase or a custom Node server?** It collapses database, server, and realtime sync into one module of tables and reducers — no API layer to design, host, or document, and small enough for an agent to hold in context.

**What are agent skills, and which coding agents support them?** Versioned `SKILL.md` instruction packages installable with `npx skills add`, supported by Claude Code, Cursor, Codex, Grok, Copilot, Gemini CLI, and 40+ other agents. PixiJS, SpacetimeDB, and NixieFX all ship official skills.

## Resources

- Three.js — https://threejs.org · https://github.com/mrdoob/three.js
- PixiJS — https://pixijs.com · https://github.com/pixijs/pixijs-skills
- NixieFX — https://nixiefx.com/ · https://github.com/azakhary/nixie-fx
- SpacetimeDB — https://spacetimedb.com · https://github.com/clockworklabs/SpacetimeDB
- Capacitor — https://capacitorjs.com · https://github.com/ionic-team/capacitor
- Capawesome Live Update — https://capawesome.io/plugins/live-update/
- Figma — https://www.figma.com
- Agent Skills — https://agentskills.io

More from NixieFX: [site index for LLMs](https://nixiefx.com/llms.txt) · [LLM skills](https://nixiefx.com/skills/) · [editor](https://nixiefx.com/editor/)