Guide · Open source
How to use Phaser: install, create a game and run it
Updated · written with AI from the project's own documentation and checked against our catalogue data
Phaser is a free, open source HTML5 game framework for building 2D games with JavaScript or TypeScript that run in desktop and mobile web browsers. It supports WebGL and Canvas rendering and provides building blocks such as physics, input, cameras, tilemaps and animations so you don't have to write them from scratch. This guide shows you how to install it, start a project, and understand the main parts of a Phaser game.
Phaserphaserjs/phaser · ★ 40.6k · MIT Install options & downloads Quick start
- 1Check Node.js is installed. Phaser's package-manager install requires Node.js. The README does not give a version, so use a current LTS release from the Node.js project.
- 2Install Phaser. Run npm install phaser in your project folder to add the package.
- 3Create a starter project. Run npm create @phaserjs/game@latest and pick a template or demo game from the prompts.
- 4Open the project. Go into the folder the tool created and read the starter code to see how the game is structured.
- 5Change the game. Edit a scene or game object, then reload the browser page to see the result.
- 6Add features as needed. Use Phaser's physics, input, cameras, tilemaps or animations when your game requires them.
- 7Build for production. Use the minified build for release and check the size and performance on mobile browsers.
What you need before you install Phaser
Phaser is used from code, so you need to be comfortable working with JavaScript or TypeScript. The source lists Node.js as the prerequisite for the package-manager install, but it does not specify which Node.js version to use.
- Basic JavaScript or TypeScript knowledge
- Node.js installed (the README does not state a required version)
- A package manager such as npm, yarn, pnpm or bun
Install Phaser with npm or use a CDN
The most common route is npm. After installing, import Phaser into your project. If you prefer not to use a package manager, the README also lists jsDelivr and cdnjs script tags you can add to an HTML page.
- Install via npm, then import it into your code
- Use jsDelivr or cdnjs by including a script tag in your HTML file
npm install phaser
import Phaser from 'phaser';Create a new game project with the interactive tool
The quickest start is the create-phaser-game app. It presents an interactive selection of official project templates and demo games, then downloads and configures the package you choose. The README lists commands for several package managers.
The README says the tool supports Vue.js, React, Angular, Next.js, SolidJS, Svelte and Remix with Vite, Rollup, Parcel, Webpack, ESBuild, Import Map and Bun. Most templates come in both JavaScript and TypeScript versions.
- Run the command for your package manager and answer the prompts
- Choose a template or demo game and a JavaScript or TypeScript version
npm create @phaserjs/game@latestUnderstand the core building blocks
Phaser games are built from scenes, and the README highlights a scene-based architecture, a loader, and built-in systems for physics, animation, input, cameras, tilemaps, particles and tweens. Physics is provided through Arcade and Matter.js.
The README also describes rendering options: WebGL and Canvas. Use the template you generated as a working example and change one feature at a time.
- Scenes organise the parts of your game
- Loader handles assets
- Arcade and Matter.js physics options
- Input, cameras, tilemaps, animations, particles and tweens
Know the build size before you ship
The README notes that the unminified phaser.js file is over 8 MB, mostly because of inline documentation. The minified build, phaser.min.js, is listed at 345 KB compressed with gzip. You can reduce the size further by changing build settings to exclude features your game does not need.
Phaser 4 is described as built on a new WebGL renderer, and the public API is described as mostly familiar to Phaser 3 users.
- Use the minified build for production
- Phaser Arcade-only build is also listed in the README
Run and publish your game
Your game runs in a web browser. The README says it can also be built for YouTube Playables, Discord Activities, Reddit games, Twitch Overlays, and compiled to iOS, Android, Steam and native apps using third-party tools. The README does not describe the exact steps for these wrappers, so check those tools' own documentation.
- Test in desktop and mobile browsers
- Use third-party tools for app stores or platforms such as Steam
What people use it for
- Making a simple 2D browser arcade game
- Building a 2D platformer with Arcade physics
- Creating games for Discord Activities or YouTube Playables, as described in the README
- Adding an interactive 2D game to a React, Vue, Angular or Svelte site
- Rendering large animated backgrounds with SpriteGPULayer or large maps with TilemapGPULayer
Frequently asked questions
Is Phaser free to use?
Yes. The repository is licensed under the MIT licence, and the README describes Phaser as a free, open source framework. Check the licence file in the repository for the full terms.
What do I need to install Phaser?
The README lists Node.js as the prerequisite for the package-manager install and does not specify a version. You also need to know JavaScript or TypeScript, since Phaser is used through code.
How do I install Phaser?
Run npm install phaser in your project, then import it with import Phaser from 'phaser'. You can also use the create-phaser-game tool with npm create @phaserjs/game@latest.
Can I use Phaser with React or Vue?
Yes. The README says Phaser works with React, Vue, Angular, Svelte and other front-end frameworks, and the create-phaser-game tool includes templates for several of them.
Can Phaser make 3D games?
No. The README describes Phaser as a 2D game framework. For 3D work, the comparable projects list includes Three.js.
What are alternatives to Phaser?
The source lists Three.js, Kaboom, Excalibur and PixiJS as comparable projects. Pick based on whether you need a full game framework, a renderer, or 3D support.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Phaser suits developers who already know JavaScript or TypeScript and want to build 2D games for browsers and mobile web. It is a poor fit for complete beginners, for 3D games, or for teams that need a full visual game editor, since the README focuses on code.
Install options & downloads