Ship How to Make a 2D Game (Browser AI Loop)

Every “how to make a 2D game” tutorial on the open web starts by asking you to pick an engine — Unity, Godot, Unreal, or Roblox — before you have written a single line of code or drawn a single frame. That order is backwards for a weekend jam. The engine choice locks you into a toolchain that takes hours to install, a rendering pipeline that takes days to learn, and a project structure that outlives whatever prototype you were actually trying to ship. This post walks the honest browser-only path for how to make a 2D game on Sorceress — one WizardGenie session for a Phaser 4 game loop, one Quick Sprites row for the hero, three SFX Gen cues for the audio moment. Every model version and credit constant verified against Sorceress source on August 1, 2026.

What a how to make a 2D game search actually wants in 2026

DataForSEO lists how to make a 2D game at 320 monthly searches with KD 29 as an engine-agnostic head query (verified 2026-08-01 in research-supplement.md). The engine-specific siblings each carry their own volume: how to make a 2D game in Unity at 260/mo (KD 22), how to make a 2D game in Godot at 110/mo (KD 13), how to make a 2D game in Roblox at 30/mo, how to make a 2D platformer game at 50/mo. The pure head phrase — without an engine attached — is where beginners sit before they have committed to a toolchain, and it is by far the most useful search to answer honestly, because the answer changes the reader''s next hour instead of confirming a decision they already made.

Two intents share the query. The first is the true beginner who has never opened a game engine and does not want to install a five-gigabyte editor to learn whether they enjoy the craft. The second is the jam dev who has shipped small games before and wants the shortest possible path from zero to a playable browser link. Both intents share the same actionable next step: lock a one-screen scope, prompt an AI-driven scaffold for the game loop, cast the assets in the same browser tab, ship a link. The scope decision comes before the engine decision, and for a jam-scope build, the browser is honestly the fastest ground.

Why the browser is the honest 2D game jam runtime

Every 2D-game tutorial that starts with “first, download Unity” is asking you to lose a Saturday to setup before you have decided whether the idea is worth building. Unity is a real tool, Godot is a real tool, Unreal is a real tool — but none of them are the right first surface for a jam-scope game, because none of them can render an idea in the first ten minutes.

The browser can. A modern browser tab has an HTML canvas element, an audio graph, a keyboard-event pipeline, and a JavaScript runtime that can drive all three at 60 frames per second. Sorceress''s canonical 2D scaffold is Phaser, an open-source JavaScript framework in the same lineage as traditional 2D game engines but with the entire install surface being “a <script> tag in an HTML file”. Verified on August 1, 2026 against the phaserjs/phaser GitHub Releases page: current stable is Phaser v4.2.1 codename “Giedi”, released 2026-07-09.

Runtime honesty matters. If your game runs in a browser tab, the delivery cost is zero — you upload the build folder to any static host and share a URL. If it runs in Unity, you pick between a WebGL export (which then also runs in a browser, but through a hundred megabytes of transpiled runtime) or a native binary (which asks the player to trust you enough to install an executable). The game jam culture that popularized rapid iteration — Ludum Dare, GMTK, Global Game Jam — runs on browser links, not installer downloads, for a reason. The reason is friction. Zero-friction distribution is what turns a weekend prototype into a playtest.

The Sorceress how to make a 2D game pipeline in five steps

The full workflow on Sorceress fits into one browser session. No engine install, no editor download, no separate audio DAW:

1. Lock a one-screen scope. Write six lines in a text file — scope, silhouette, palette, prop, verb, win-state — before you touch any tool.
2. Prompt WizardGenie for the game loop. Planner+Executor pair, browser preview, Phaser 4.2.1 target.
3. Cast the hero on Quick Sprites. Four-angle walk row at 9 credits per generation, retro-diffusion/rd-animation model.
4. Drop cues from SFX Gen. Three one-second stems for jump, hit, pickup — 1 credit per second on byteplus-seed-audio.
5. Playtest, tweak, ship. Preview inside the WizardGenie session, hit share-link, done.

Credit budget for a one-screen jam-scope build: 27 credits for a hero walk row plus about 3 credits for the SFX cues, roughly 30 credits total for the asset side. On the 100-credits-per-dollar rate, that lands under 30 cents in art plus audio. WizardGenie handles the code side under a BYO-key model surface — you plug your own model API key in and pay the provider directly for tokens, which for a jam-scope 2D game runs well under one US dollar on a Planner+Executor split. The Sorceress $49 Lifetime Access tier (LIFETIME_PRICE = 49 in src/app/plans/page.tsx) covers the credit stipend past the first jam if the plan is to keep shipping.

Step 1 — lock the one-screen scope before any code

The most expensive mistake in a 2D-game jam is writing code before writing the scope. A jam-scope 2D game fits in six lines of plain English, and those six lines govern every downstream decision — which sprites you generate, which cues you cut, which Phaser scene classes WizardGenie writes. Open a text file (call it scope.md) and fill in one line per prompt:

• Scope: one screen, one enemy type, one door, one win-state.
• Silhouette: the hero''s shape in seven words (“small green frog in a red bandana”).
• Palette: four hex colors max, one background, one hero, one enemy, one prop.
• Prop: the one collectible or interactable that changes state (a key, a coin, a health pack).
• Verb: the one player input beyond movement (jump, dash, shoot, throw).
• Win-state: the exact condition that ends the level (reach the door, defeat the enemy, collect the key).

Those six lines are enough for WizardGenie to write the entire game skeleton. They are also enough for Quick Sprites to know what the hero looks like and for SFX Gen to know what cue verbs it needs to produce. Without the scope file, every tool needs the same background prompt re-typed three times, and the tools drift — the hero''s bandana disappears from the sprite row, the “jump” cue lands on the wrong verb, the Phaser scene draws a door that never gets touched. Fifteen minutes on the scope saves two hours downstream.

Scope traps to avoid: multiple enemy types, procedurally generated levels, a save system, a menu screen with settings. Every one of those doubles the code volume and does not raise the ceiling on whether the loop reads as fun. A one-screen jam-scope game with a locked scope ships. A four-scene game with three enemies and a title menu does not.

Step 2 — prompt WizardGenie for the Phaser 4 game loop

Open WizardGenie. It ships on both desktop (Windows installer with auto-updater, Early Access tier and up) and web (no-install at /wizard-genie/app). Both surfaces run the same dual-agent loop: a Planner picks the plan, an Executor writes the code. Verified in src/app/_home-v2/_data/tools.ts on August 1, 2026, the CODING_MODELS lineup is Claude Opus 4.7, Claude Sonnet 4.6, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, and MiniMax M2.7. Verified in src/app/wizard-genie/page.tsx on the same date, WizardGenie targets Phaser for 2D games and Three.js for 3D as its canonical frameworks.

The economic pattern is Planner+Executor: an expensive frontier model on the reasoning side (Claude Opus 4.7 or GPT-5.5), a cheap fast typer on the executor side (DeepSeek V4 Pro or Kimi K2.5). The split keeps design decisions on top-tier models where they belong and pushes the high-token code-writing to a model that costs roughly a fifth per token. A jam-scope 2D game generates maybe fifty thousand tokens of code across a weekend; on a Planner+Executor pair, that lands under one US dollar. On a single-frontier setup, the same volume costs about five times more.

The first prompt to WizardGenie kicks off the whole file structure. Paste the scope.md file first, then:

Build a browser 2D game in Phaser 4.2.1 from the scope above.
One scene, one enemy, one prop, one win-state.
Assets: hero.png (sprite sheet, 4 rows walk), bg.png, prop.png.
SFX: jump.wav, hit.wav, pickup.wav.
Input: arrow keys for movement, space for the verb.
Physics: Phaser Arcade physics, gravity 800.
Camera: fixed on the single scene, no scroll.
Win-state fires a callback that swaps to a "you won" text screen.

The Planner returns a Phaser 4.2.1 scene structure with a preload() that maps the asset filenames, a create() that lays the background plus hero plus enemy plus prop, and an update() that runs the game loop. The Executor writes each function in order. WizardGenie''s built-in browser preview renders the scene inside the same tab, so the playtest happens without a build step, without an npm run dev, without a webpack config. If the physics feel wrong, the Planner tunes the gravity constant; if the enemy AI is too dumb, the Planner adds a state machine; if the win-state fires early, the Executor tightens the collision box. All in one session.

Step 3 — cast the hero row on Quick Sprites and drop SFX Gen cues

Open Quick Sprites. Verified against src/app/quick-sprites/page.tsx on August 1, 2026: MODEL_ID is retro-diffusion/rd-animation, CREDITS_PER_GEN is 9. The tool offers three animation styles — Four Angle Walking (48×48, four directions, four frames each), Small Sprites (32×32, walk plus arm-movement plus look plus surprise plus lay-down), and VFX Effects (24–96px, one-to-one aspect, effects like fire and explosions). Four Angle Walking is the workhorse for a jam-scope 2D game; Small Sprites suits a top-down or a 32×32 style; VFX Effects covers the impact cue if the game needs a hit-flash.

Prompt shape for a hero row: pull the silhouette line from scope.md, add one line of style, one line of camera. Example: “small green frog in a red bandana, pixel art, front three-quarter view, walking pose, 48×48, four-angle walk row, transparent background.” The model outputs a sheet with the four cardinal directions in four rows of four frames each. Save the file as hero.png. A single generation costs 9 credits. If the pose reads wrong, re-roll for another 9. Two rolls to lock a hero is normal.

Once the hero is cast, open SFX Gen. Verified in src/app/sfx-gen/page.tsx on August 1, 2026: default model is byteplus-seed-audio (Seed Audio 1.0), SEED_AUDIO_CREDITS_PER_SECOND is 1, with a minimum of 1 credit per generation. Three one-second cues for a jam-scope 2D game — jump, hit, pickup — land at 3 credits total. Prompts read like SFX library entries:

• Jump: a short punchy blip, 400 ms, high register, one syllable.
• Hit: a dry thud, 400 ms, muted low frequency, one syllable, no reverb.
• Pickup: an ascending chime, 800 ms, bell-like, resolves upward.

Save the outputs as jump.wav, hit.wav, pickup.wav. WizardGenie''s preload() maps those exact filenames — the five minutes of naming discipline saves an hour of edit-paste when the second scene borrows the same cues.

What a how to make a 2D game weekend build costs in Sorceress

Full jam-scope budget, verified against source on August 1, 2026:

• Quick Sprites hero row (retro-diffusion/rd-animation, one generation): 9 credits — CREDITS_PER_GEN in src/app/quick-sprites/page.tsx. Two rolls to lock a hero is normal, so budget 18 credits.
• Quick Sprites enemy row (optional, if the enemy needs its own animation): 9 credits, one roll.
• SFX Gen jump + hit + pickup cues (byteplus-seed-audio, 3 x 1 second): 3 credits — SEED_AUDIO_CREDITS_PER_SECOND in src/app/sfx-gen/page.tsx.
• Background art from AI Image Gen (optional; a solid-color background works for a jam): variable, from 3–18 credits per generation depending on the model picked.
• WizardGenie: BYO-key. A Planner+Executor pair (Claude Opus 4.7 planner, DeepSeek V4 Pro executor) runs a jam-scope 2D game on well under one US dollar of tokens.

Total Sorceress credit cost for a one-screen 2D game with hero, enemy, and audio: about 30 credits — roughly 30 cents at the 100-credits-per-dollar rate. Add background art and the total is still comfortably under 60 credits. On the Sorceress $49 Lifetime Access tier, that fits in a single day''s stipend with wide headroom for iteration. On the free tier, the starter credit balance covers a full jam-scope build with credits to spare for a hero re-roll.

Sibling guides on the Sorceress blog cover engine-specific paths if the reader ultimately wants that surface: how to make a 2D game with Unity, how to make a 2D game in Godot. For a broader video-game overview, see how to make a video game with AI. Adjacent 2D-genre paths — the platformer browser loop and the sprite sheet atlas guide — slot in as the second and third articles to read after this one. The rest of the Sorceress toolkit is one click away via the tools guide.

The pipeline does not build the game for you. It builds the parts of the game that never change — the scope discipline, the Phaser 4 scaffold, the walk-row generator, the three cue verbs, the browser runtime. What it cannot do is decide whether your one-screen loop reads as fun when someone plays it. That is a taste call, and taste comes from playing the same 30-second loop twenty times, tightening the physics constants by 5 percent each pass, and being honest about which passes actually helped. That is how to make a 2D game — not the marketing pitch, the actual work.