phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

39,599

7,132

39,599

103

View on GitHub View on NPM

Top Related Projects

phaser

39,940

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

pixijs

47,721

The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

melonJS

6,334

a modern & lightweight HTML5 game engine

cocos2d-html5

3,163

Cocos2d for Web Browsers. Built using JavaScript.

kiwi.js

1,465

Kiwi.js is a blazingly fast mobile & desktop browser based HTML5 game framework. It uses CocoonJS for publishing to the AppStore.

Quick Overview

Phaser is a fast, free, and fun open-source HTML5 game framework. It uses both a Canvas and WebGL renderer internally and can automatically swap between them based on browser support. This allows for fast rendering across desktop and mobile browsers.

Pros

Easy to learn and use, with extensive documentation and examples
Active community and regular updates
Supports both Canvas and WebGL rendering
Cross-platform compatibility for desktop and mobile browsers

Cons

Limited 3D capabilities compared to some other game engines
Performance can be an issue with complex games or large numbers of objects
Steeper learning curve for developers new to game development concepts

Code Examples

Creating a simple game scene:

class GameScene extends Phaser.Scene {
    constructor() {
        super('GameScene');
    }

    preload() {
        this.load.image('logo', 'assets/logo.png');
    }

    create() {
        this.add.image(400, 300, 'logo');
    }
}

Adding physics to a sprite:

create() {
    this.player = this.physics.add.sprite(100, 450, 'player');
    this.player.setBounce(0.2);
    this.player.setCollideWorldBounds(true);
}

Handling user input:

create() {
    this.cursors = this.input.keyboard.createCursorKeys();
}

update() {
    if (this.cursors.left.isDown) {
        this.player.setVelocityX(-160);
    } else if (this.cursors.right.isDown) {
        this.player.setVelocityX(160);
    } else {
        this.player.setVelocityX(0);
    }

    if (this.cursors.up.isDown && this.player.body.touching.down) {
        this.player.setVelocityY(-330);
    }
}

Getting Started

To start using Phaser, include the library in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>

Then, create a basic game configuration:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

function preload() {
    // Load assets here
}

function create() {
    // Set up your game objects here
}

function update() {
    // Game loop logic here
}

This setup creates a basic Phaser game with a single scene. You can now start adding game objects, implementing game logic, and creating your game within these functions.

Competitor Comparisons

phaser

39,940

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Pros of Phaser

More mature and stable project with a larger community
Extensive documentation and tutorials available
Wider range of features and plugins

Cons of Phaser

Larger file size, which may impact load times
Steeper learning curve for beginners
May include unnecessary features for simpler projects

Code Comparison

Phaser (v3):

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        create: create
    }
};

const game = new Phaser.Game(config);

function create() {
    this.add.text(400, 300, 'Hello World', { fontSize: '32px' }).setOrigin(0.5);
}

Phaser CE (v2):

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { create: create });

function create() {
    var text = game.add.text(game.world.centerX, game.world.centerY, 'Hello World', { fontSize: '32px' });
    text.anchor.setTo(0.5, 0.5);
}

The main differences in the code examples are the configuration setup and the way game objects are created and positioned. Phaser v3 uses a more modular approach with scenes, while Phaser CE (v2) uses a more straightforward global game object.

pixijs

47,721

The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

Pros of PixiJS

Lighter weight and faster rendering performance
More flexible and customizable for advanced graphics manipulation
Better suited for complex animations and interactive visualizations

Cons of PixiJS

Steeper learning curve for beginners
Less built-in game-specific features and utilities
Requires more manual setup for game development

Code Comparison

PixiJS (basic setup):

const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);
const sprite = PIXI.Sprite.from('image.png');
app.stage.addChild(sprite);

Phaser (basic setup):

const config = { width: 800, height: 600, scene: { preload, create } };
const game = new Phaser.Game(config);
function preload() { this.load.image('sprite', 'image.png'); }
function create() { this.add.image(400, 300, 'sprite'); }

PixiJS is a powerful rendering engine focused on 2D graphics, while Phaser is a complete game framework built on top of PixiJS. PixiJS offers more flexibility for custom graphics applications but requires more setup for game development. Phaser provides a more comprehensive toolkit for game creation out of the box, making it easier for beginners to get started with game development.

melonJS

6,334

a modern & lightweight HTML5 game engine

Pros of melonJS

Lighter weight and more minimalistic, potentially better for simpler games
Built-in physics engine optimized for platformers
Easier learning curve for beginners

Cons of melonJS

Smaller community and ecosystem compared to Phaser
Less frequent updates and maintenance
Fewer advanced features and plugins available

Code Comparison

melonJS:

me.game.onload = function() {
    me.state.set(me.state.PLAY, new PlayScreen());
    me.state.change(me.state.PLAY);
};

Phaser:

const config = { scene: PlayScene };
const game = new Phaser.Game(config);

class PlayScene extends Phaser.Scene {
    create() { /* game logic */ }
}

Summary

melonJS is a lightweight HTML5 game engine that excels in simplicity and ease of use, particularly for platformer games. It offers a built-in physics engine and a gentler learning curve for beginners. However, it has a smaller community and fewer advanced features compared to Phaser.

Phaser, on the other hand, is a more robust and feature-rich game framework with a larger ecosystem and more frequent updates. It provides more advanced capabilities and a wider range of plugins, but may have a steeper learning curve for newcomers.

The choice between the two depends on the project's complexity, desired features, and the developer's experience level.

cocos2d-html5

3,163

Cocos2d for Web Browsers. Built using JavaScript.

Pros of cocos2d-html5

More comprehensive framework with a wider range of features for game development
Better suited for complex, large-scale game projects
Stronger support for cross-platform development, including mobile platforms

Cons of cocos2d-html5

Steeper learning curve compared to Phaser
Less active community and fewer updates in recent years
More complex setup and configuration process

Code Comparison

Phaser (creating a simple sprite):

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'gameDiv');
var sprite = game.add.sprite(400, 300, 'playerSprite');

cocos2d-html5 (creating a simple sprite):

var layer = new cc.Layer();
var sprite = new cc.Sprite("player.png");
sprite.setPosition(400, 300);
layer.addChild(sprite);

Both frameworks offer straightforward ways to create and position sprites, but Phaser's syntax is generally more concise and intuitive for beginners. cocos2d-html5 provides more granular control over the game structure, which can be beneficial for complex projects but may require more setup code.

Crafty

3,575

JavaScript Game Engine

Pros of Crafty

Lightweight and modular architecture, allowing for easier customization
Entity-Component-System (ECS) design, which can be more flexible for complex game structures
Simpler learning curve for developers familiar with traditional object-oriented programming

Cons of Crafty

Smaller community and fewer resources compared to Phaser
Less frequent updates and potentially slower bug fixes
Limited built-in features, requiring more manual implementation for advanced game mechanics

Code Comparison

Crafty:

Crafty.e('2D, DOM, Color')
  .attr({x: 0, y: 0, w: 100, h: 100})
  .color('#FF0000');

Phaser:

this.add.rectangle(0, 0, 100, 100, 0xFF0000);

Both examples create a red rectangle, but Crafty uses its entity-component system, while Phaser uses a more straightforward method call. Crafty's approach allows for more modular and extensible game objects, while Phaser's syntax is more concise and immediately understandable for simple shapes.

kiwi.js

1,465

Kiwi.js is a blazingly fast mobile & desktop browser based HTML5 game framework. It uses CocoonJS for publishing to the AppStore.

Pros of Kiwi.js

Smaller file size and potentially faster load times
More modular architecture, allowing for easier customization
Better suited for simpler 2D games and prototypes

Cons of Kiwi.js

Less active development and smaller community compared to Phaser
Fewer features and plugins available out-of-the-box
Limited documentation and learning resources

Code Comparison

Kiwi.js:

var game = new Kiwi.Game('content', 'MyGame', state, { renderer: Kiwi.RENDERER_WEBGL });
var state = new Kiwi.State('MyState');
state.create = function () {
    this.sprite = new Kiwi.GameObjects.Sprite(this, this.textures.sprite, 100, 100);
    this.addChild(this.sprite);
};

Phaser:

var config = { type: Phaser.AUTO, width: 800, height: 600, scene: { create: create } };
var game = new Phaser.Game(config);
function create() {
    this.add.sprite(100, 100, 'sprite');
}

Both frameworks offer similar functionality for creating 2D games, but Phaser has a more extensive feature set and larger community support. Kiwi.js may be preferable for smaller projects or developers seeking a more lightweight solution.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Phaser - HTML5 Game Framework

Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers and has been actively developed for over 10 years.

Games can be built for the web, or as YouTube Playables, Discord Activities, Twitch Overlays or compiled to iOS, Android, Steam and native apps using 3rd party tools. You can use JavaScript or TypeScript for development. Phaser supports over 40 different front-end frameworks including React and Vue.

Phaser is commercially developed and maintained by Phaser Studio Inc along with our fantastic open source community. As a result of rapid support, and a developer friendly API, Phaser is currently one of the most starred game frameworks on GitHub.

Interested in learning more? Click the image below to watch our intro video.

Installing Phaser from NPM

Install via npm:

npm install phaser

Then import it in your project:

import Phaser from 'phaser';

Using Phaser from a CDN

Phaser is on jsDelivr which is a "super-fast CDN for developers". Include either of the following in your html:

<script src="//cdn.jsdelivr.net/npm/phaser@4.1.0/dist/phaser.js"></script>
<script src="//cdn.jsdelivr.net/npm/phaser@4.1.0/dist/phaser.min.js"></script>

It is also available from Cloudflare's cdnjs:

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/4.1.0/phaser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/4.1.0/phaser.min.js"></script>

Create Phaser Game App

The easiest way to get started quickly with Phaser is our create-phaser-game app. This CLI tool presents an interactive selection of official project templates and demo games. Issue the command, answer some questions and the app will download and configure the right package for you.

npm create @phaserjs/game@latest
npx @phaserjs/create-game@latest
yarn create @phaserjs/game
pnpm create @phaserjs/game@latest
bun create @phaserjs/game@latest

We support Vue.js, React, Angular, Next.js, SolidJS, Svelte and Remix with Vite, Rollup, Parcel, Webpack, ESBuild, Import Map and Bun. Most come in both JavaScript and TypeScript versions.

View the create game app tutorial.

How Big is Phaser?

Don't be alarmed if you look at phaser.js and see a file over 8 MB. Over 84% of that is inline documentation - JSDoc comments, type annotations, and detailed method descriptions that power the TypeScript definitions and API docs. It's there for your IDE, not for your players.

The minified build, phaser.min.js, strips all of that out and comes in at 345 KB with standard gzip web server compression. This is the full version, with every feature included, but is still smaller than most title screen images. You can reduce it further still by tweaking the build settings to exclude features your game doesn't need.

Build	Raw Size	Compressed (gzip)
`phaser.js` (with docs)	8.23 MB	-
`phaser.min.js` (full)	1.29 MB	345 KB
`phaser-arcade.min.js`	1.18 MB	313 KB

Why Phaser?

Battle-tested - Over a decade of active development. Tens of thousands of games shipped. A huge community of developers who've seen it all.
Truly cross-platform - One codebase runs on desktop browsers, mobile browsers, and can be wrapped for native app stores, Steam, YouTube Playables, Discord Activities, and more.
Developer-friendly API - Scene-based architecture, a comprehensive loader, built-in physics (Arcade and Matter.js), animation system, input handling, cameras, tilemaps, particles, tweens, and much more - all with clear, consistent APIs.
Framework agnostic - Works with React, Vue, Angular, Svelte, or plain JavaScript and TypeScript. Use whatever tools you prefer.
Massive ecosystem - Over 2,000 code examples. Extensive API documentation. Active Discord and forums. First-class TypeScript definitions.
AI-ready - Phaser's API is well understood by every major frontier LLM. This repository includes a comprehensive set of AI agent skills that give coding agents deep knowledge of every Phaser subsystem, making it the ideal framework for AI-assisted game development.

What's New in Phaser 4

Phaser 4 is a major release built on a brand-new WebGL renderer. The entire rendering pipeline from v3 has been replaced with a modern, node-based architecture that manages WebGL state properly, handles context loss gracefully, and is significantly faster. If you've built games with Phaser 3, the public API is mostly familiar - but under the hood, everything has changed for the better.

Here are the headline features. For the full picture, see the v4.0 Changelog and Migration Guide.

New Render Node Architecture

The v3 pipeline system has been replaced with a clean, node-based renderer. Each render node handles a single task, WebGL state is fully managed, and context restoration is built in. The result is a renderer that's faster, more reliable, and much easier to extend with custom rendering logic. Quads now use index buffers, reducing vertex upload costs by a third. Multi-texture batching is smarter, avoiding unnecessary batch breaks on mobile. And the whole system uses just-in-time rendering - nothing hits the GPU until it absolutely has to.

Unified Filter System

FX and Masks from v3 have been unified into a single, powerful Filter system. Filters can be applied to any game object or camera - no more restrictions on which objects support effects. Every filter takes an input image and produces an output, usually via a single shader, so they're all mutually compatible.

v4 ships with a huge library of built-in filters: Blur, Glow, Shadow, Pixelate, ColorMatrix, Bloom, Vignette, Wipe, and many more. New additions include ImageLight for realistic image-based lighting, Blocky for pixel-art-friendly pixelation, GradientMap for palette-swap effects, Quantize for retro dithered palettes, Key for chroma keying, NormalTools for normal map manipulation, and Blend which brings all 27 Canvas blend modes to WebGL.

Masks are now a filter too, more powerful than ever. A Container full of filtered, masked objects can itself be used as a mask source.

SpriteGPULayer - Render a Million Sprites

SpriteGPULayer is a new game object designed to render massive numbers of sprites. Where standard Phaser rendering handles tens of thousands of sprites comfortably, SpriteGPULayer handles a million or more, up to 100x faster.

It works by storing all member data in a static GPU buffer and rendering everything in a single draw call, skipping the per-frame CPU-to-GPU upload that's normally the main bottleneck. Members aren't just static, either - each one supports GPU-driven animations on position, rotation, scale, alpha, tint, and frame, with a full set of easing functions. Per-member scroll factors enable parallax backgrounds, and non-looping mode supports one-off particle effects. It's perfect for bringing complex, animated backgrounds to life without touching your frame budget.

TilemapGPULayer - Render Millions of Tiles

TilemapGPULayer renders an entire tilemap layer as a single quad. The shader cost is per-pixel, not per-tile, so it can display up to 4096 x 4096 tiles with no performance penalty for tile count. It also produces perfect texture filtering across tile boundaries - no seams, no bleeding. If you need large maps on screen at once, especially on mobile, this is the way to go.

Overhauled Tint System

Tint has been reworked with color and mode as separate concerns. Six tint modes are available: MULTIPLY, FILL, ADD, SCREEN, OVERLAY, and HARD_LIGHT. The new setTintMode() method gives you explicit control, and BitmapText tinting finally works correctly.

New Game Objects

Gradient - Render linear, radial, conic, and bilinear color gradients with dithering support, powered by the new ColorBand and ColorRamp classes.
Noise, NoiseCell (2D/3D/4D), NoiseSimplex (2D/3D) - Generate and animate cellular noise, simplex noise, and random static on the GPU, with normal map output for use in lighting and effects.
CaptureFrame - Snapshot the current framebuffer mid-render for post-processing tricks.
Stamp - Render a camera-independent quad, useful for DynamicTexture operations.

Improved Lighting

Lighting is now as simple as sprite.setLighting(true) - no pipeline juggling required. Objects can cast self-shadows based on their own texture, lights have an explicit z height value, and lighting works across most game objects including BitmapText, Particles, TileSprite, and both tilemap layer types.

Shader and TileSprite Improvements

The Shader game object has been rewritten with a cleaner config-based API (ShaderQuadConfig), and GLSL loading now uses standard #pragma directives that work with syntax checkers. TileSprite has been rebuilt with a new shader that supports texture atlas frames and tile rotation - no more whole-texture-only limitation.

AI-Assisted Game Development

Phaser has been part of the training data for every major frontier LLM. Models from Anthropic, OpenAI, Google, and others understand the Phaser API deeply and can generate game code, debug rendering issues, set up physics, and build scene structures out of the box. Tools like Claude Code, Cursor, Codex, Antigravity, and GitHub Copilot can scaffold entire Phaser games and implement features from natural language descriptions.

AI Agent Skills

This repository includes a comprehensive set of AI agent skills covering every major Phaser subsystem - scenes, physics, input, animations, tilemaps, tweens, particles, cameras, and much more. Point your AI coding agent at the skills/ folder and it will understand Phaser 4's architecture, APIs, patterns, and gotchas in depth. Tell it to create a game and it will know the right way to structure scenes, load assets, set up physics, and handle input - all using idiomatic Phaser 4 code.

Phaser TypeScript Definitions

Full TypeScript definitions can be found inside the types folder. They are also referenced in the types entry in package.json, meaning modern editors such as VSCode will detect them automatically.

Depending on your project, you may need to add the following to your tsconfig.json file:

"lib": ["es6", "dom", "dom.iterable", "scripthost"],
"typeRoots": ["./node_modules/phaser/types"],
"types": ["Phaser"]

API Documentation

Read our full API Documentation at https://docs.phaser.io/. Use the links at the top of the page to navigate the namespaces, classes, events and Game Objects and also to use the search box.

We maintain documentation for the most recent versions of Phaser on this site.

Getting Started

We recommend the following to begin your journey:

Getting Started with Phaser (useful if you are completely new to Phaser)
Making your first Phaser Game
Download our Free 500 page book Phaser by Example.
Plus, there are over 700 Phaser tutorials listed on our website.

New tutorials are being published every week, so check our site for more.

Source Code Examples

We have created hundreds of examples and they are all available with full source code and assets.

Browse our Phaser Examples site.

Phaser Sandbox

The Phaser Sandbox is a fully-configured online editor, fully updated for Phaser 4, ready to go direct in your desktop browser. It's loaded with the latest version of Phaser and packed full of handy features. Register for a free Phaser account to create and save your own sandbox entries. Or view one just like this.

Phaser Plugins

Super community member RexRainbow has been publishing Phaser content for years, compiling an impressive catalogue of plugins that all Phaser developers should be aware of.

You'll find Phaser Plugins that extend the framework with features such as UI controls, text input boxes, Firebase support, Finite State Machines and lots more. His set of Phaser Notes are also invaluable reading.

Migrating from Phaser 3

Phaser 4 keeps most of the public API you know, but there are important breaking changes - the renderer, tint system, FX/Masks, Shader API, lighting, and several removed classes (Point, Mesh, BitmapMask) all need attention. We've written a detailed Migration Guide with a checklist to walk you through it.

We've also included a dedicated v3 to v4 migration skill in this repository. Point your AI coding agent at it and tell it to migrate your Phaser 3 game - it understands every breaking change and knows the exact v4 replacements.

Change Log

We meticulously keep track of new features, updates and bug fixes in our change logs. Each version of Phaser has its own change log:

Have fun!

Grab the source and join the fun!

Phaser wouldn't have been possible without the fantastic support of the community. Thank you to everyone who supports our work, who shares our belief in the future of HTML5 gaming, and Phaser's role in that.

Happy coding everyone!

Cheers,

Rich and the whole team at Phaser Studio

boogie

Visit the Phaser website
Play some amazing games
Learn By browsing our API Docs or Support Forum
AI Skills Point your AI agent at our Phaser Skills for deep framework knowledge
Code Examples? We've over 2000 Examples to learn from
Read the weekly Phaser World Newsletter
Be Social: Join us on Discord and Reddit or follow us on Twitter

"Above all, video games are meant to be just one thing: fun. Fun for everyone." - Satoru Iwata

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Phaser

Cons of Phaser

Code Comparison

Pros of PixiJS

Cons of PixiJS

Code Comparison

Pros of melonJS

Cons of melonJS

Code Comparison

Summary

Pros of cocos2d-html5

Cons of cocos2d-html5

Code Comparison

Pros of Crafty

Cons of Crafty

Code Comparison

Pros of Kiwi.js

Cons of Kiwi.js

Code Comparison

Convert designs to code with AI

README

Phaser - HTML5 Game Framework

Installing Phaser from NPM

Using Phaser from a CDN

Create Phaser Game App

How Big is Phaser?

Why Phaser?

What's New in Phaser 4

New Render Node Architecture

Unified Filter System

SpriteGPULayer - Render a Million Sprites

TilemapGPULayer - Render Millions of Tiles

Overhauled Tint System

New Game Objects

Improved Lighting

Shader and TileSprite Improvements

AI-Assisted Game Development

AI Agent Skills

Phaser TypeScript Definitions

API Documentation

Getting Started

Source Code Examples

Phaser Sandbox

Phaser Plugins

Migrating from Phaser 3

Change Log

Have fun!

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days