NixieFX
Guide · Updated August 2026

The F2P mobile game stack of the future is web

By the NixieFX team ~10 min read

Unity, Cocos, and libGDX defined the last era of free-to-play mobile game development. The next era is being built on the open web — because it is the only stack that iterates at LLM speed.

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 renders the game world, PixiJS renders the UI layer on top, NixieFX authors and runs the particle VFX, UI is designed in Figma and imported through a custom Figma→Pixi importer, SpacetimeDB is the entire backend, Capacitor wraps it into native iOS and Android builds, and Capawesome delivers over-the-air updates. Every layer ships LLM agent 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. Modern teams multiply their output with AI coding agents, and 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. Choosing the web stack means choosing the stack your AI teammates are already experts in.
  • 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 — the cadence F2P live ops actually needs.
  • 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 the web stack below is open source or replaceable.
  • The web runtime caught up. WebGL 2 is universal on modern phones, and WebGPU now ships in Chrome (since version 113, 2023) and Safari (since Safari 26, 2025). Three.js has over 100k GitHub stars and PixiJS over 45k — these are mature, battle-tested renderers, not experiments. HTML5 is now a serious game runtime.

The one-sentence version: 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?

Seven tools, each the best-in-class open option for its layer, each chosen for one extra property: an LLM agent can operate it through skills.

Layer Tool Role Agent skills
3D world Three.js Renders the game scene (WebGL 2 / WebGPU) community packs
UI layer PixiJS 2D UI and HUD composited above the world official
VFX NixieFX Particle editor + runtime for both Pixi and Three official
UI design Figma Screens designed by designers, imported to Pixi your own importer + skill
Backend SpacetimeDB Database and server in one module official
Native shell Capacitor Wraps the web build into iOS / Android apps community packs
Delivery Capawesome Native plugins + over-the-air live updates community packs

Three.js — the game world

Three.js is the de-facto standard 3D renderer of the web, with a huge ecosystem, first-class WebGPU support, and more LLM training coverage than any game engine API in existence. Your gameplay scene — camera, meshes, lights, postprocessing — is ordinary TypeScript an agent can refactor like any other code.

PixiJS — the UI layer on top

PixiJS renders the HUD, menus, and popups as a 2D layer composited above the Three.js canvas. Pixi v8 is fast enough to treat your whole UI as a game scene — and it ships 25 official agent skills so coding agents use the current v8 API instead of hallucinating v7 patterns.

npx skills add https://github.com/pixijs/pixijs-skills

NixieFX — particles and VFX

NixieFX 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 your UI juice and your in-world effects. It was built AI-first: effects are plain JSON in your repo, and two official skills teach your agent to author effects and to 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 that mirrors Pixi's own scene conventions (containers, anchors, nine-slices). This is the one piece you build yourself — roughly a week of work — and then every screen in the game is a designer-owned artifact your agent can re-import on demand. Write a skill for the importer so agents run the whole Figma→screen pipeline unattended.

SpacetimeDB — the entire backend

SpacetimeDB merges the database and the game server: you write tables and reducers (in TypeScript, C# or Rust), deploy one module, and clients subscribe to live queries over WebSocket. No REST layer, no ORM, no separate hosting for logic — which means the whole backend fits in an agent's context window.

npx skills add clockworklabs/spacetimedb

Capacitor — the native shell

Capacitor wraps the web build into real iOS and Android apps with a plugin bridge for everything F2P needs: in-app purchases, push notifications, ads SDKs, haptics, app tracking. To the stores — and to players — it is a native game.

Capawesome — delivery and live updates

The Capawesome plugin suite fills the native gaps, and Capawesome Live Update pushes new JavaScript bundles and assets over the air — compliantly — so a balance patch or a weekend event goes live in minutes. 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 — current APIs, project conventions, the gotchas that models otherwise hallucinate through. They install with one command and work across Claude Code, Cursor, Codex, Grok, Copilot, Gemini CLI and 40+ agents.

This is the actual selection criterion of the stack. Three.js, PixiJS, NixieFX, and SpacetimeDB aren't just good libraries — they are libraries an agent can be taught. The rule we suggest:

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 — the public skills cover the libraries; your studio's edge lives in internal skills. Keep them in the repo, version them like code, and treat them as the onboarding docs your agents (and new hires) actually read. Start with:

  • A performance-budget skill — target frame time, draw-call caps, texture-memory limits per device tier, particle budgets, and what to profile before merging.
  • A code-conventions skill — how scenes, systems, and UI screens are structured in your codebase, naming, and the patterns reviewers reject.
  • A live-ops skill — how events are configured, how a Capawesome rollout is staged and rolled back, and the checklist before anything ships to players.
  • An asset-pipeline skill — atlas packing, audio compression, mesh budgets, and where generated files live.

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

  1. Scaffold a TypeScript web app (Vite works well) and add the rendering layers:
    npm install three pixi.js nixie-fx
  2. Install the agent skills for every layer:
    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 your VFX in the NixieFX editor — effects live as JSON in your project folder and export to a runtime bundle both renderers load.
  5. Set up the Figma file and write the Figma→Pixi importer (then wrap it in a skill).
  6. spacetime init your backend module; define tables and reducers; subscribe from the client.
  7. Add Capacitor (npx cap add ios android), wire IAP and push through Capacitor/Capawesome plugins.
  8. Configure Capawesome Live Update, ship the store build once — then iterate over the air, daily.

Frequently asked questions

Is Unity really dead for mobile game development?

As an engine, no — it still dominates heavy 3D and console-quality mobile titles. As the default choice for free-to-play mobile, we'd argue yes: F2P is decided by iteration speed and LLM leverage, and a closed editor with binary scenes loses on both. A text-first web stack iterates faster, works natively with AI agents, and updates over the air without review cycles.

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 (since 113, 2023) and Safari (since Safari 26, 2025), and Three.js/PixiJS batch aggressively. Casual and mid-core scenes hold 60 fps on mid-range hardware with normal mobile discipline: atlases, capped draw calls, pooled particles.

How do you ship a web game to the App Store and Google Play?

Wrap it with Capacitor. The web build runs inside a native shell with full plugin access (IAP, push, ads, haptics), producing a normal app binary that passes App Store and Play Store review like any other game.

Are over-the-air updates allowed on iOS and Android?

Yes, within platform rules: JavaScript 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?

Because it collapses the database, the server, and the realtime sync layer into one module of tables and reducers. There is no API layer to design, host, or document — and the whole backend is small enough for an agent to hold in context and modify safely.

What are agent skills, and which coding agents support them?

Versioned SKILL.md instruction packages that teach agents to use a tool correctly, 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

This guide is maintained by the team behind NixieFX, the browser-based HTML5 particle editor for PixiJS and Three.js. A machine-readable version is available at /mobile-game-stack.md, and a site index for LLMs at /llms.txt.