Phaser game: when a framework is worth it
A framework moves the work somewhere else, it does not remove it. Phaser earns its place once you have tile levels, animated sprites and more than a couple of scenes.
Jump to a section
Phaser is a 2D game framework for the browser. The current release is Phaser 4, and it loads from a CDN in a single script tag. A Phaser game can still be one HTML file with no build step, which is the part most people do not expect.
So the real question is not how to start. It is whether you should. A framework hands you a scene system, a sprite and physics layer, an asset loader and an input manager. In return it takes a dependency you did not write, a set of concepts to learn, and a file nobody reads in one sitting.
Plain canvas for one screen and a handful of moving things. Phaser once you have levels, tilemaps, animated sprites and more than a few scenes. The line sits where the scaffolding you would write by hand gets bigger than the game it holds up.
What a framework actually saves you#
Five jobs, and they share a quality. Each is slow to write by hand and easy to get subtly wrong. That is the worst pairing, because the bug surfaces weeks after the code did, usually on somebody else's phone.
- Scenes and the transitions between them. A title screen, a level, a pause overlay and a game over screen become separate objects with their own setup and teardown. Hand-written, this starts as one mode variable and grows into a thicket of conditions.
- Sprite sheets and animation. A grid of frames becomes a named animation with a frame rate and a loop setting. The version you write yourself is an index, a timer and an off-by-one error you find on a Tuesday.
- Tilemaps. A level laid out as a grid, drawn in one pass, with the solid tiles collided against as a group. Writing that yourself takes a day, and the second day goes on the edges where tiles meet.
- Arcade physics with callbacks. Overlap and collision become declarations rather than nested loops, each carrying a function that runs when it happens. Keeping those two apart is the distinction beginners most often blur.
- An asset preloader. Everything the game needs is loaded before the first frame, and the progress bar is a few lines instead of a small project of its own.
Read that list again and notice what is on it. All of it is structure. None of it is a decision about your game.
What it does not save you#
Everything that decides whether the game is worth playing. A framework moves the work somewhere else. It does not remove a minute of it.
- The feel. How fast the player speeds up, how long a jump hangs, how hard a hit lands. No framework has an opinion on any of that, and the defaults are not tuned for your game.
- The difficulty curve. When the second enemy type appears, how quickly the timer tightens, what minute five asks of the player. That is design work, and it is done by playing rather than by typing.
- The reason to carry on. A score just out of reach, a level you nearly cleared, a run that beat the last one. Nothing in any library supplies this for you.
- The art direction. Phaser will animate a sprite sheet for you. It will not decide what belongs on the sheet.
Nobody has ever put a game down because the scene manager was hand-written. They put it down because the third level was boring.
Plain canvas or Phaser: how to decide#
Compare the size of the game against the size of the scaffolding it needs. When the scaffolding wins, take the framework. When it loses, every concept the framework introduces is a cost with nothing on the other side.
| What you are making | Take | Why |
|---|---|---|
| One screen, one player, a few moving things | Plain canvas | The scaffolding is about forty lines. A framework adds more ideas than it removes. |
| An arcade game with a title and a game over screen | Either | Two modes behind one variable is still cheaper than learning a scene system. |
| A platformer with tile levels and animated sprites | Phaser | Tilemaps and sprite animation are the two jobs that punish hand-writing the most. |
| Several levels, a map screen, progress that is saved | Phaser | Scenes stop being a mode variable and start being the shape of the project. |
| A prototype you intend to throw away on Friday | Plain canvas | Nothing to learn, nothing to load, no version to match. |
The rows in the middle are genuinely a toss-up. Pick whichever one you will still understand in a fortnight.
If the answer is plain canvas, stop here and read how to make a 2D game with AI, which covers that route end to end. The rest of this guide assumes you have decided a framework earns its keep.
preload, create, update, and the screen that stays empty#
Here is the thing that catches almost everyone. A framework loads assets before it runs your game, so loading is asynchronous. A game that draws before its assets exist shows nothing at all, and shows nothing quietly.
There is no error. The console is clean, the canvas is black, and the page looks like it half loaded. That is the hardest kind of fault to search for, because you have no words to search with.
The three functions exist to make that mistake hard, as long as you use each for its own job.
Images, sprite sheets, sounds, maps. Nothing is drawn here and nothing is positioned. The function queues the work and returns long before any of it has finished.
This runs after loading ends, so everything named in preload now exists. Sprites, physics groups, input handlers and the first thing on screen all belong here.
Read input, move things, test state, check whether the player has lost. It is handed the current time and how long the last frame took, and every speed should be built on the second of those.
The order is the entire point. Anything used in create that was never queued in preload is simply absent, and an absent texture does not stop a game. It draws nothing where the sprite should be and carries on happily.
A blank canvas with a clean console nearly always means an asset was used before it loaded, or under a different name than the one it was loaded with. Check the spelling of that name first. It is wrong far more often than your logic is.
A prompt that produces a working one-file Phaser game#
This is a complete first message. Fill in the two sentences describing your game and send it as it stands. The version line matters more than anything else in it, for the reason in the next section.
Build a complete browser game as ONE self-contained .html file.
FRAMEWORK: Phaser 4.2.1, loaded from a CDN with a single script tag:
https://cdnjs.cloudflare.com/ajax/libs/phaser/4.2.1/phaser.min.js
Write against the Phaser 4 API and nothing older. No build step, no
bundler, no npm, no separate files of any kind.
STRUCTURE: one Scene with preload, create and update. Everything the
game draws is prepared in preload, used in create, and never touched
before it exists.
THE GAME: <two sentences describing it, written by you>
ART: no external image or audio files. Build every texture in code
before play starts, so there is nothing to fetch and nothing to 404.
TIMING: take the elapsed time the framework hands to update and
express every speed, timer and cooldown in units per second. Nothing
moves a fixed amount per frame.
PHONE: a tap or a drag on the canvas plays the game as well as the
keyboard does, and the canvas must not scroll the page under it.
TUNING: one CONFIG object at the top of the script holding every
number I might want to change, with a comment on each line.
Then tell me which CONFIG numbers change the difficulty.The last line is worth keeping. It makes the model list the levers it just built, which is quicker than reading the file to find them.
Three of those paragraphs are there to repair known faults rather than to add features. Timing, touch and the config object are missing from a first build almost every time, in any framework and in none.
When an AI writes the Phaser code#
Models carry patterns from older versions of whatever they write. Phaser has been through several, so what comes back is sometimes a mixture: mostly current, with one call from a release that is years old.
The good news is how loudly that fails. A call that no longer exists throws, the message names it, and the stack trace points at the line. It is nothing like the silent blank screen above, and it is usually a one-message fix.
- State the version in the first message. Write the version number and the CDN link you want. A model given a specific URL tends to write for the version named in it.
- Paste the console error, do not describe it. The exact text names the call, the file and the line. A description loses all three, and you get a guess back instead of a fix.
- Fix one error at a time. The first failure often causes the next two. Paste one, reload, and see what is left before pasting anything else.
- Open the console before you open the game. If something is wrong, the first message is usually there before you have pressed a key.
A wrong call is loud and local, and the error text fixes it. Compare that with a missing asset, which throws nothing and says nothing. Spend your caution on the preload step, not on the version number.
🕹️Games on this site
Fable 5.1
GPT-6.1 SolCommon questions#
What is Phaser?
A 2D game framework for the browser. It supplies a scene system, sprites with animation, tilemaps, arcade physics and an asset loader, so you spend your time on the game rather than the structure around it. The current release is Phaser 4.
Do I need a build step to use Phaser?
No. It loads from a CDN in a single script tag, so a Phaser game can be one HTML file with no bundler and no install. A build step becomes useful once a project is many files of your own, which is a later problem than most people think.
Should I use Phaser or plain canvas?
Plain canvas for one screen and a handful of moving things, because the scaffolding there is short enough to read. Phaser once you have tile levels, animated sprites and several scenes. The deciding question is whether the structure you would write by hand is bigger than the game.
Why is my Phaser game a black screen with no error?
Almost always an asset that was drawn before it was loaded, or referenced under a name that does not match the one it was loaded with. Loading happens before the game runs, so anything used early is simply absent, and an absent texture draws nothing instead of complaining.
Which Phaser version should I ask an AI for?
The current one, named in the first message along with the CDN link. Models carry habits from older releases and will otherwise mix them in. A call from the wrong version throws an error that names itself, so paste that error back and it is fixed in one reply.
Is Phaser a good starting point for a beginner?
It depends what you are starting. For a first game of one screen, the framework is more to learn than the game is. For a platformer with levels and animation, it removes the two jobs most likely to make a beginner give up before anything is playable.
Can AI write a Phaser game that actually runs?
Yes, and in one file. Name the version, ask for the preload, create and update structure, and keep every asset built in code so nothing is fetched. What comes back then either runs or throws an error you can paste straight back.
Where to go next#
Whichever route you took, the finished thing is worth putting somewhere people can press a key on it. Publish it and it gets a page of its own on Agent Games, with the model and the prompt behind it on the record, and a leaderboard other people can climb.
For the shape of a game file with no framework at all, read HTML game code. For first messages that produce whole finished games, the prompt guide has one per genre. And the games here are the fastest way to see what this scale of project looks like when it is done.
Built something? Put it on Agent Games.
Publishing takes a file and a minute. Your game gets its own page listing the model, the prompt and the token count, and anyone can play it without signing up.
Read next