Phaser draws 2D games in the browser through WebGL and Canvas. It’s open source, and Scenes, physics, input, audio and asset loading all ship together in a single JavaScript library.
You write games in JavaScript or TypeScript, and they run in desktop and mobile browsers. Apps that host web games, Discord for one, run them too.
Version 4 is the current major release. It shipped in April 2026 with a rebuilt WebGL renderer, and the repository README now lists 4.2.1 (project README, 2026).
Plenty of tutorials still teach version 3, though. The pipeline system they rely on is gone in version 4, replaced by render nodes.
What Is Phaser?
The framework renders 2D games in the browser through WebGL and Canvas, and it arrives as a JavaScript library. You include it in a web page or bundle it with your own code.
Finished games run in desktop and mobile browsers, and in apps that host web games such as Discord, Snapchat and Facebook (Phaser documentation, 2026).
Games get written in JavaScript or TypeScript. The official examples use JavaScript, and TypeScript definitions ship alongside.
Rendering, physics, input, audio, animation and asset loading are all covered. Games are structured around Scenes, and cameras, tweens, tilemaps and particles are in there too.
It is 2D by design.
One thing trips up newcomers. Phaser is not a desktop application, and the docs say you do not install it the way you would install one, even though npm install phaser is the standard way to add it to a project.
The library is a file your own code includes, nothing more. A CDN script tag works as well as npm.
Within the wider practice of HTML game development, Phaser sits at the high-structure end. Scenes and physics come built in, and loading does too, rather than arriving as separate pieces.
It also works with over 40 front-end frameworks, React and Vue included (Phaser docs, 2026).
Who Maintains Phaser, and What Does It Cost?
Phaser Studio Inc maintains Phaser, and the framework itself is free under the MIT license.
Richard Davey created it and released the first public version in April 2013, after building it for commercial client work (phaser.io About page). For years it stayed a one-person project, run through Davey’s studio Photon Storm. That lasted until October 2023, when funding led to the formation of Phaser Studio and the first paid hires.
Today Phaser Studio Inc develops the framework together with open source contributors, per the project README. The MIT license permits commercial use without a fee.
The paid side is a different product. Phaser Editor, a visual editor for building Phaser games, is sold separately, and the framework stays free for commercial games too.
GitHub lists 40.4k stars and 7.2k forks for the phaserjs/phaser repository as of October 2026, which keeps it among the most starred game frameworks on the platform.
What Is Built Into Phaser?
Phaser bundles a scene system, game objects, an asset loader, input handling, audio, animation, cameras, tweens and two physics engines in a single library. Each Scene can drop default plugins it does not need, such as the loader or the tween manager, through its config.
Scenes and game objects
See the Pen
Phaser 3: First Game with Smooth Resizing by Yannick Deubel (@yandeu)
on CodePen.
A Scene covers one logical section of a game, like a loading screen, a main menu, a level or a boss fight. Several can run at once, and a dedicated UI Scene is commonly drawn above the rest.
Each Scene owns its cameras, input, tweens and display list. The Scene Manager adds, removes, pauses, sleeps and switches them.
The Game object keeps the truly global systems, such as the renderer, animation manager, cache, sound manager and timestep.
Every Scene calls its update method once per step, driven by requestAnimationFrame. That is the standard JavaScript game loop pattern, handled for you.
Asset loading and supported formats
The loader queues every file by key. A Scene’s preload method starts it automatically, and create runs only after loading finishes.
It takes quite a few file types:
- Images, SVG and sprite sheets
- Texture atlases, including multi-file atlases
- Tilemaps exported from Tiled as JSON, or CSV
- Audio, audio sprites, video and bitmap fonts
- JSON, XML, text and GLSL shader files
The usual failure here is a boring one. The loader fetches files over the network, so opening index.html straight from disk breaks every asset. Browsers block local file access, which is why Phaser projects need a local web server during development.
Input, audio, animation and tweens
The Input Manager tracks pointer, gamepad and keyboard events, and each Scene gets its own Input Plugin. Audio goes through one global Sound Manager that serves every Scene, which avoids resource conflicts.
Animations live in a global Animation Manager, so any game object in any Scene can play one without duplicating data.
A single Scene can run several cameras at once. Tweens handle motion like a logo dropping in and bouncing.
Arcade Physics and Matter.js
See the Pen
Interactive Game Physics Demo by Bogdan Sandu (@bogdansandu)
on CodePen.
| Feature | Arcade Physics | Matter.js |
|---|---|---|
| Shapes | Rectangles and circles | Complex polygons, full-body shapes |
| Extras | Velocity, acceleration, gravity | Constraints, joints, behaviours |
| Fits | Platformers, top-down, puzzle | Simulation-heavy games |
| Limit | No complex simulation | Cannot collide with Arcade bodies |
Arcade Physics covers most 2D games. Reach for Matter.js only when rectangles and circles stop being enough.
Physics is off by default for every game object, because a background image or logo has no use for it. Both systems can run in one Scene, but a sprite belongs to one or the other.
Phaser bundles its own custom version of Matter, and the arcade-only build is lighter for it. The repository README lists phaser-arcade.min.js at 313 KB gzipped against 345 KB for the full phaser.min.js.
How Does Phaser Render Graphics?
Each game instance runs exactly one renderer, either WebGL or Canvas. Setting the game type to AUTO lets Phaser choose, preferring WebGL when the browser supports it.
Under the hood, WebGL hands the drawing work to the GPU. Lighting, filters and very large sprite counts, all covered below, depend on that.
What changed in the Phaser 4 renderer
Phaser 4.0.0 shipped on 10 April 2026 with a ground-up rebuild of the WebGL renderer, while the public API stayed mostly familiar (Phaser Studio release notes). The points below hold as of the 4.2 releases.
Render nodes replace the Phaser 3 pipeline system. Each node handles one task, WebGL state is fully managed, and recovery from a lost context is built in. FX and Masks from Phaser 3 have merged into one Filter system that applies to any game object or camera.
SpriteGPULayer keeps sprite data in a static GPU buffer and draws it in one call. TilemapGPULayer renders an entire tilemap layer as a single quad.
Standard rendering handles tens of thousands of sprites comfortably. According to the Phaser 4 README, SpriteGPULayer handles a million or more, up to 100 times faster, because it skips the per-frame CPU-to-GPU upload.
TilemapGPULayer charges per pixel rather than per tile. A layer of up to 4096 x 4096 tiles costs nothing extra for tile count, says the README.
The catch with SpriteGPULayer is that it only suits large numbers of objects with simple, predictable animation. It is WebGL only and uses a single texture image rather than a multi-atlas. Changing its contents after creation is expensive, because the buffer has to be updated again, so populate it once and leave it alone.
Filters run through shaders, so effect-heavy games need the WebGL renderer.
Phaser and PixiJS
Older write-ups, including a 2017 GitHub wiki on building games with Phaser in TypeScript, describe a custom PixiJS build behind Phaser’s rendering. That description dates from the Phaser 2 era.
Phaser 3 moved to its own pipeline system, and Phaser 4 replaced that with render nodes, per Phaser’s rendering concepts guide. Current versions do not depend on PixiJS.
Which Phaser Version Is Current?
The repository README points to 4.2.1 as of October 2026, which makes Phaser 4 the current line. Plain npm install phaser pulls Phaser 4, so new projects start there.
| Release | Name | Date | Headline change |
|---|---|---|---|
| 4.0.0 | Caladan | 10 April 2026 | First Phaser 4 release |
| 4.1.0 | Salusa | 30 April 2026 | Layer becomes a true game object |
| 4.2.0 | Giedi | 19 June 2026 | Stencil, Mesh2D, cone lights |
| 4.2.1 | Giedi | 9 July 2026 | Bug-fix release (Stencil, ScaleManager, tween fixes) |
The docs still carry 3.90.0 as the newest Phaser 3 API reference.
Pin the exact version in package.json or the CDN URL. Minor releases in the 4.x line still move internals. The 4.2.0 changelog changed how tint modes are encoded in shaders, which only matters if you write custom render nodes.
What breaks when you migrate from Phaser 3
Games that stay on the standard API (Sprites, Text, Tilemaps) should run on the new renderer without changes, according to the migration guide. Custom WebGL work is where the trouble starts.
- Custom pipelines are removed. Rewrite them as render nodes and register them through RenderConfig#renderNodes.
- Math.TAU now equals 2 x PI, where Phaser 3 used PI divided by 2. Code that relied on the old value gets no error, only wrong results.
- roundPixels defaults to false in Phaser 4 and was true in Phaser 3.
- Compressed textures need re-compressing with the Y axis starting at the bottom.
- The bundled Spine plugins are no longer updated, so switch to the official plugin from Esoteric Software.
Custom pipelines, Spine rigs or compressed textures mean a real migration project. Without those, expect a checklist pass rather than a rewrite.
Where Phaser’s own sources disagree
The README and docs advertise WebGL and Canvas, while the migration guide calls the Canvas renderer deprecated. It still ships, but it supports none of the WebGL techniques behind Phaser 4’s advanced features.
Canvas keeps one edge in blend modes, with 27 against the 4 native WebGL modes (NORMAL, ADD, MULTIPLY, SCREEN). The new Blend filter recreates all 27 in WebGL, at the cost of an extra capture step.
The docs site also lags on version, listing v4.1.0 as the latest API version while the README lists 4.2.1.
Age is another mismatch. The docs say over 10 years in one place and over 11 further down the same page, against 13 years in the README (the 2013 first release supports the README).
Treat npm and the changelog as the source of truth. The prose pages are approximate.
How Do You Set Up a Phaser Project?
The quickest route is the create-phaser-game CLI. Run npm create @phaserjs/game@latest, answer the prompts, and it downloads and configures a template with example games (Phaser docs, 2026).
Install and first scene
- Run npm create @phaserjs/game@latest (yarn, pnpm and bun have equivalent commands)
- Pick a bundler or framework template, in JavaScript or TypeScript
- Start the template’s dev server and open the page it serves
- Load assets in a Scene’s preload method, then place them in create
- Press F12 and read the console if the canvas stays blank
Skipping the CLI is fine for a quick test. Add Phaser from jsDelivr or cdnjs with a script tag in an HTML page, and serve the folder with Node’s http-server or Python’s built-in server.
No install at all? The Phaser Sandbox runs in a desktop browser with the latest version, and a free account saves your entries.
Watch the version number in old tutorials, since many pin a Phaser 3 release in the script URL. The Installing page’s cdnjs lines still point at 3.86.0 as of October 2026, so copy the version from the README or the release page instead.
Languages, bundlers and framework templates
Templates exist for Vue, React, Angular, Next.js, SolidJS, Svelte and Remix. On the bundler side the list runs through Vite, Rollup, Parcel, Webpack, ESBuild, Import Map and Bun, and most templates come in both JavaScript and TypeScript.
TypeScript definitions live in the package’s types folder, and editors such as VS Code detect them automatically. Some projects still need lib, typeRoots and types entries in tsconfig.json.
Vite is the safe pick. It covers the plain case and has React, Vue and TypeScript variants.
Phaser Editor
Phaser Editor is the visual route. It generates asset loader packs and shows game object properties live, and you can drag assets straight into a Scene (Phaser docs).
- Phaser Editor Core can run locally or in cloud-based development environments such as GitHub Codespaces
- Phaser Editor Desktop wraps Core in an Electron application
Where Can Phaser Games Run?
Beyond the browser, Phaser games ship to iOS, Android, Steam, YouTube Playables, Discord Activities, Twitch Overlays and Reddit games (Phaser README, 2026). Native targets rely on third-party tools.
| Target | Route | What to expect |
|---|---|---|
| iOS and Android | Capacitor | Android Studio, plus Xcode on a Mac for iOS |
| Steam and desktop | Electron | Steam SDK integration is yours to build |
| YouTube Playables, Discord Activities, Twitch Overlays, Reddit | Web build on the host | Listed as supported targets in the README |
Mobile through Capacitor
Capacitor wraps the compiled game in a native container, and Phaser’s own tutorial uses it for iOS and Android. Builds need Android Studio, plus Xcode for iOS, and Xcode only runs on a Mac.
A layout built for a desktop viewport will not fit a phone as is. The tutorial adds touch controls, resizing for mobile devices and safe area support, and it branches code with Phaser’s game.device API or Capacitor’s isNativePlatform check.
That tutorial dates from September 2024, so it predates Phaser 4. Check template and dependency versions before copying its setup.
Desktop and Steam through Electron
Telazer Games published the idle RPG Desktop Heroes on Steam in October 2025, built with Phaser and Electron (Phaser Studio news post, May 2026).
Steam SDK integration and resource management were the painful parts. The team built much of the desktop plumbing from scratch and said dedicated Electron and Steam packages would make a real difference.
When Is Phaser the Wrong Choice?
The official docs steer you elsewhere for fully 3D games, for a no-code editor, and for console releases.
Phaser has no built-in 3D rendering or 3D physics. The migration guide removed the old Mesh and Plane objects and says proper 3D support is planned for the future. Mesh2D, added in 4.2.0, draws textured triangles that batch with sprites. It stays a 2D tool.
If you don’t want to learn JavaScript and need a no-code editor, the docs rule Phaser out. PS5, Xbox and Nintendo Switch are outside its scope as well, per the docs.
For 3D on the web, Three.js, Babylon.js and PlayCanvas are the usual 3D-first engines.
How Phaser compares with PixiJS, melonJS and Godot
| Tool | Type | Dimensions | Web delivery |
|---|---|---|---|
| Phaser | Game framework | 2D | Browser-first |
| PixiJS | Rendering library | 2D | WebGL and WebGPU |
| melonJS | Game engine | 2D, 2.5D with 3D meshes | WebGPU, WebGL 2, Canvas2D |
| Godot | Full engine with editor | 2D and 3D | Needs WebAssembly and WebGL 2.0 in the browser |
Phaser fits a browser-only 2D game built by a JavaScript or TypeScript team that wants physics, Scenes and tilemaps without assembling them.
PixiJS makes more sense for custom rendering or interactive graphics, where you want a rendering layer and no game framework on top of it. melonJS is a smaller engine, with some 3D mesh support. Godot is the pick for an editor-driven workflow, 3D, or export targets beyond the browser.
melonJS reports about 250 KB minzipped for the whole engine, which undercuts Phaser’s full build. The two projects measure compression differently, so treat that as a rough comparison.
Phaser FAQ
Which game genres work well in Phaser?
Most 2D genres that run in a browser work fine, with platformers, top-down games, puzzle games, shoot-em-ups and rogue-likes among them.
The free book Phaser by Example builds an infinite runner, a shoot-em-up, a platformer, a puzzle game, a rogue-like and a story game, among others.
Is Phaser good for beginners?
Yes, if basic JavaScript is already familiar. The README links a free 500-page book, Phaser by Example, plus over 2,000 code examples, and the docs include a first-game tutorial.
The book does target Phaser 3 (version 3.80 per its announcement), so expect to adjust some code for version 4.
How much JavaScript do you need to start with Phaser?
Enough to write a class and call methods on it. A Scene is a class that extends Phaser.Scene with preload, create and update methods, and the docs show both ES6 and ES5 versions.
Config objects and loader callbacks show up early, so read those before anything else.
Where do Phaser plugins come from?
The largest catalogue comes from community member RexRainbow. It adds UI controls, text input boxes, Firebase support and finite state machines (Phaser README, 2026).
The official Spine plugin comes from Esoteric Software, and a game can load a plugin at runtime through the loader’s plugin method.
What a First Phaser Prototype Should Prove
Target device, physics system and version are the choices that cost the most to undo, and a first prototype should settle them. One playable Scene on real hardware does that faster than any comparison chart.
Run one Scene with final assets on the slowest target device. Add the physics system the full game will ship with, and pin the Phaser version in package.json.
A device test exposes asset and rendering limits early. Collision code written for Arcade Physics does not carry over to Matter.js, so the physics choice has to land before levels exist.
Four releases landed in 90 days, from 10 April to 9 July 2026, which is why the version gets pinned. The trade-off is translating Phaser 3 tutorials into Phaser 4 code.
This sequence was verified against 4.2.1 in October 2026, so recheck the changelog before starting.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026
- What is Backend in Web Development? - September 13, 2026
- What is Frontend Development? - September 11, 2026
