Phaser Game Tutorial: How AI Writes Your Browser Game

Most Phaser game tutorials open the same way: install Node, clone the starter, read the docs, copy the boilerplate, run a build script, see a black screen, fix the build script, see a sprite. The fastest path in 2026 skips every step before "playable build". You open WizardGenie in a browser tab, describe the game in one paragraph, and the agent writes a working Phaser 4 project, render loop, scenes, input, physics, asset loaders, in a single round-trip. The build runs in the same tab. You spend your time on the game, not the toolchain.

The full Phaser game tutorial workflow in five steps

Every step in this Phaser game tutorial happens inside one browser tab. No editor download, no project template, no per-platform quirks to learn. The five steps in order:

1. Open WizardGenie and pick the model the agent will run on. Frontier reasoners like Claude Opus 4.7 and GPT-5.5 produce the cleanest one-shot Phaser 4 scaffolds.
2. Describe the game in one paragraph. Genre, player verbs, world layout, win condition, scope, art style. The agent writes a full Phaser 4 project: scenes, input, physics, asset loaders, sample level.
3. Run the build in the side preview pane. The first run is rough. Placeholder sprites, the occasional collider glitch. The point is to confirm the game loop exists.
4. Iterate by chat. "Increase gravity, the jump feels floaty." "Slimes are walking through walls, add collider." "Add a second level with vertical scrolling." Each round-trip is a couple of seconds on a cheap executor model.
5. Swap in real assets without leaving the tab. Quick Sprites for the player and enemy sprite sheets, Tileset Forge for level tiles, SFX Gen for jumps and pickups, Music Gen for the level loop.

Total time to a playable first build is usually five to ten minutes. A small two-level browser game with real art and music lands in roughly an afternoon. What comes after, pacing, balance, hit-feel, polish, is the part where you stop typing prompts and start playing the build.

What is Phaser, and why Phaser 4 changes the math

Before talking to the agent, it helps to know what Phaser is. Phaser is a free, open-source HTML5 game framework that was first released in April 2013 by Richard Davey. It renders with WebGL (and falls back to Canvas), exposes a clean scene + sprite + physics API in JavaScript or TypeScript, and runs in any modern browser tab. It is one of the most-starred game frameworks on GitHub and powers a long tail of indie browser games, web ads, jam entries, and educational tools.

For most of the last decade, Phaser 3 has been the default. That changed this April. Phaser 4.0.0 shipped on April 10, 2026, and 4.1.0 followed on April 30, 2026. Verified against the GitHub release tags on May 15, 2026. The numbers behind the version bump are the interesting part:

• Render node architecture. The v3 pipeline system is gone, replaced with a cleaner node-based renderer. The same API draws faster and the engine is easier to extend.
• Unified filter system. FX and masks collapse into one system with 13+ built-in filters. Bloom, blur, vignette, glitch, the usual suspects, all one API call.
• SpriteGPULayer. Up to a million sprites in a single draw call, around 100 times faster than the standard sprite path. Bullet-hell games and particle storms get cheap.
• TilemapGPULayer. Entire tilemap layers as single quads, up to 4096 by 4096 tiles. Big worlds without the per-tile overhead.
• New game objects. Gradient, Noise, CaptureFrame, and Stamp ship as first-class objects. Procedural backgrounds and screenshot effects without custom shaders.
• Improved lighting. Simplified lighting API with self-shadows; works on most game objects, not just sprites.

The practical takeaway: new browser-game projects in 2026 should be born on Phaser 4. Phaser 3.86 still works and has more Stack Overflow answers, but every new feature in this list raises the ceiling on what a browser game can be. When you talk to the WizardGenie agent, ask for Phaser 4 by name in the first prompt. The agent will scaffold a 4.x project and use the new APIs.

Step 1: Open WizardGenie and pick the model

Inside the WizardGenie web app, the agent is driven by an AI coding model you pick from a dropdown. The current lineup, verified against the model picker source on May 15, 2026, is eight models: 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. Prices and quality span roughly two orders of magnitude. The right pick depends on the kind of turn you are taking:

• First prompt (one-shot scaffold). The single most important decision in the project. A frontier reasoner like Claude Opus 4.7 or GPT-5.5 produces the cleanest Phaser 4 scaffold in one pass. Worth the cost for the moment that defines the whole project.
• Iterative turns (tuning, content, fixes). Switch to a cheap executor. DeepSeek V4 Pro, Kimi K2.5, MiniMax M2.7, and Gemini 3.1 Flash run dramatically less per token and fast enough that the chat loop feels real-time.
• Big architectural moves. "Refactor this into a proper component system" or "split this into a multi-scene state machine" earns one frontier-reasoner turn, then drop straight back to a cheap executor.

If you have read Best AI Model for Coding, the rule is the same one: never put a frontier-priced model on the typing side of a Planner+Executor pair. The economics collapse. A Sonnet-4.6-on-the-typing-side Phaser project costs roughly five times what the same project costs on a DeepSeek-V4-Pro executor with an Opus 4.7 planner, with no measurable quality gain on tuning-heavy work.

Step 2: Write the first prompt that defines the whole game

The first prompt is the most important decision in this Phaser game tutorial. A good first prompt locks the genre, the core verbs, the world layout, the visual style, the engine version, and the scope in one paragraph. A bad first prompt produces a generic Phaser starter the agent then spends an hour reshaping into your idea.

The shape that works for a side-scrolling Phaser browser game:

Make a 2D side-scrolling browser game in Phaser 4. The player is a small
wizard who walks left and right with the arrow keys and jumps with
spacebar. Three levels of increasing length, side-scrolling camera that
follows the wizard. Each level has slime enemies that walk a fixed patrol
path and damage the wizard on contact, coins to collect, and a goal flag
at the right edge. Pixel-art look, 32x32 tiles, 48x48 wizard sprite.
Variable jump height (hold spacebar for higher), coyote time of about
100ms, jump buffering of about 100ms. Three hearts of health, 1-second
invulnerability after each hit. Use Vite as the build tool and target
Phaser 4.x. Make it actually playable, not just a render loop.

Notice what is in there: genre, engine version, exact input bindings, enemy behavior, pickups, win condition, scope (three levels), visual style (pixel art with explicit tile and sprite sizes), feel parameters (variable jump, coyote time, jump buffering), HP system, build tool (Vite), and "actually playable" as a tag to nudge the agent into wiring up a real game-over state instead of stopping at a render loop. What is not in there: file structure, framework version pinning, dependency lists. The agent handles all of that.

Resist the temptation to micromanage. The first prompt should describe the game; the iteration prompts will fix the details. Sending a 600-word spec on the first turn produces a worse scaffold than a 150-word one, because the agent gets confused about which constraints are load-bearing.

Step 3: Run the build and read the file tree the agent produced

About thirty to ninety seconds after sending the prompt, the agent returns a file tree. A typical Phaser 4 project from the agent looks like this:

index.html
package.json
vite.config.js
src/
  main.js
  scenes/
    BootScene.js
    Level1Scene.js
    Level2Scene.js
    Level3Scene.js
    HudScene.js
  objects/
    Wizard.js
    Slime.js
    Coin.js
  assets/
    placeholder-wizard.png
    placeholder-slime.png
    placeholder-tiles.png
    level-1.json
    level-2.json
    level-3.json

Five things worth understanding about this layout, because they map to vocabulary you will use when iterating:

• main.js creates the Phaser game. It calls new Phaser.Game(config) with a scene list, a physics setup, and the canvas size. You almost never edit this file by hand; you ask the agent to "add a new scene to the list" or "set the physics gravity globally" and it edits main.js for you.
• Scenes are screens. BootScene.js loads assets and hands off to Level1Scene.js, which builds the playable level. HudScene.js draws the heart counter and score on top of the level scene. The standard Phaser pattern is one scene per logical screen, and a HUD scene running in parallel.
• Game objects are classes. Wizard.js extends Phaser.Physics.Arcade.Sprite. Movement, jump, health, animation state all live there. Edits to "how the wizard feels" land in this file.
• Tilemaps are JSON. The levels are JSON tilemaps the agent generated. You can edit them by chat ("add three floating platforms above the chest in level 1") or by exporting them to a tile editor like Tiled and round-tripping if you prefer hand-crafted level design.
• Assets are placeholders. The placeholder PNGs are throwaway. Step 5 swaps them for real Sorceress assets.

Resist the urge to read every file. Hit Run instead. WizardGenie launches the project in a side preview pane and the wizard is probably a colored square, the slimes might tunnel through walls, the camera might lag. That is all normal. Confirm the loop runs, then go straight into iteration.

Step 4: Iterate by chat (where your taste matters)

This is the part of the Phaser game tutorial that earns the name "vibe coding". Instead of opening files and editing variables, you describe what is wrong and what you want, and the agent does the edit. Vibe coding is a coding style popularized in 2025 where the human stays at the level of intent and the AI handles the syntax. It is the right register for a Phaser project, because most of the work is small tuning passes that would be tedious to do by hand.

A real iteration sequence for the wizard browser game scaffolded above:

1. "The jumps feel floaty. Increase gravity to 1200 and shorten the jump impulse to -420." Two-line diff in the wizard physics config. Run, jump, feel the difference.
2. "The wizard falls through corner gaps when sliding off platforms. Tighten the AABB collider to 28 by 44 instead of the full 48 by 48 sprite." One-line change to setSize(). The corner-clip is gone.
3. "Slimes pass through walls. They should respect tilemap collision like the wizard does." The agent adds this.physics.add.collider(slime, walls) to the level scene. Slimes now patrol instead of phasing.
4. "Add coyote time of 120ms and jump buffering of 120ms. The jump should feel forgiving." A pair of timer fields in the wizard controller. The jump goes from "pixel-perfect or you fall" to "responsive enough that I never blame the controls."
5. "Add a HUD with three hearts in the top-left. Lose one heart per slime touch with a 1-second invulnerability flash. Game over at zero hearts, restart from the start of the current level." The agent edits HudScene.js, wires the heart sprites, and adds the invulnerability timer. One round-trip, one playable upgrade.
6. "Add a vertical-scrolling section to level 2, a tall climb with three moving platforms on left/right sine waves and a checkpoint flag at the top." The agent edits level-2.json and adds a MovingPlatform object. The first try works about half the time; the second prompt usually nails it.

Each of these is one chat message. The agent does the cross-file editing; you play the build between rounds and report what is still off. The loop is fast, often two or three iterations a minute on a cheap executor model, and it is genuinely how the rest of the game gets built. For a deeper look at how the iteration loop works across genres, see Prompt to Game AI and the platformer-specific deep dive at How to Make a Platformer With AI in Your Browser.

Step 5: Swap placeholder art for real Sorceress assets

The agent's placeholders work, but they look like placeholders. To make the Phaser browser game feel like a game, swap in real assets from the rest of the Sorceress suite. Every tool below lives in the same Sorceress account, and the WizardGenie agent can fetch the resulting URLs directly into the project's asset folder, no manual download-then-upload.

• Player and enemy sprite sheets. Quick Sprites is the fastest path for pixel-art characters with idle, run, jump, and attack frames, purpose-built for prompt-to-frame-grid output and finishes in roughly two minutes per character. For non-pixel styles, Auto-Sprite v2 generates the character with AI image gen, animates it with AI video, and converts the clip into a clean sprite sheet.
• Tilesets. Tileset Forge takes raw AI art and produces a tile-grid-aligned tileset PNG plus a tile-index map ready for Phaser tilemaps. Stone, grass, dungeon, ice, sci-fi, pick a style, get a usable sheet.
• Title screen, portraits, UI art. AI Image Gen covers anything that is not a sprite or a tile: a title-screen background, a wizard portrait for dialogue, item icons, particle textures.
• Sound effects. SFX Gen handles every short audio cue: jumps, double-jumps, footsteps on different surfaces, coin pickups, hits, deaths, UI clicks. Batch a whole pack ("ten 8-bit pickup sounds, ten footstep variants on stone") in one session.
• Music. Music Gen turns a text prompt into full instrumental tracks. "Looping castle dungeon, mysterious, 90 bpm, lo-fi orchestral" yields two thirty-second variations. Same loop for boss-fight tracks, victory stingers, menu themes.

The whole loop closes in one browser tab. You ask the agent to "use this sprite for the wizard" and paste a Sorceress URL; it writes the loader and swaps the placeholder. No download-then-upload step, no asset-pipeline configuration, no engine to learn. If you want a wider-angle view of the full Sorceress stack and how it pairs with the agent, see Game Development AI: The Full Sorceress Stack.

Common issues and how to ask the agent to fix them

Most "stuck" moments in a Phaser game tutorial of this shape land in one of six buckets. Each maps to a one-line chat prompt that the agent will resolve in a single round-trip:

• Black screen on first run. Usually a missing asset path or a typo in main.js's scene list. Prompt: "the build runs but shows a black canvas. check the asset loader and the scene list in main.js." The agent reads the file, finds the broken reference, and patches it.
• Sprite falls through the floor. The arcade physics body is bigger than the visual sprite, or the tilemap collide flag is not set. Prompt: "the wizard falls through the ground. make sure the tilemap layer has collision enabled and the wizard body is sized to the visible sprite."
• Jump fires when not grounded. The ground check is broken. Prompt: "the wizard can jump in mid-air. only allow jumping when body.blocked.down or body.touching.down is true."
• Camera does not follow the player. Phaser's camera follow is a one-liner most agents will scaffold by default, but if it is missing, prompt: "the camera does not follow the wizard. add this.cameras.main.startFollow(player) and set the camera bounds to the level size."
• Coyote time and jump buffering feel off. Tuning, not a bug. Prompt: "increase coyote time to 150ms and jump buffer to 120ms. jumps should feel forgiving but not cheap."
• Build size is too big to host. Vite ships the entire Phaser source by default. Prompt: "configure vite to tree-shake unused phaser modules and produce a minified production build under 1MB if possible." Phaser 4 is more tree-shake-friendly than v3, but you may need to manually exclude the physics engine you are not using.

None of these require you to open a file. They require you to describe the symptom in framework vocabulary and trust the agent to map it to the right edit. When a prompt fails to land on the first try, the second prompt usually does, especially if you include the file or the function the agent missed ("the issue is in Wizard.js around the update method").

Where this Phaser game tutorial ends and the real game design begins

The agent is excellent at scaffolding, refactoring, and one-shot fixes. It is mediocre at the parts of a browser game that require actual taste:

• Game-feel intuition. Whether a jump arc feels right is a judgment the agent can approximate but not own. You play the build and decide. The agent then executes whatever change you describe.
• Difficulty curves and pacing. The scaffolded levels are placeholders. Where to put the first hazard, when to introduce the second enemy, how long the safe stretch is before the boss room, those are designer decisions. The agent will happily build whatever you describe; it will not tell you the design is wrong.
• Art direction. The Sorceress asset tools generate game-ready sprites, tilesets, and music. Choosing a coherent palette, deciding what reads at small sizes, and making the wizard's silhouette legible against a busy tileset is your call.
• Distribution. The output is a normal Phaser project. npm run build produces a static dist/ folder you can drop on any static host (your own domain, GitHub Pages, an itch.io browser-game upload, Netlify, Cloudflare Pages). The build process is yours to run on the day you ship; the WizardGenie web app does not auto-publish the finished game anywhere on your behalf.

None of this is a flaw in the workflow. It is where human work meaningfully begins. The agent removes the parts of Phaser development that were always painful and never fun, the boilerplate, the build configuration, the API spelunking. What is left is the part that was always the actual game design.