Phaser is a handy e book a rough, free, and relaxing originate source HTML5 recreation framework. It affords WebGL and Canvas rendering across desktop and cell internet browsers. Games may perhaps presumably also additionally be compiled to iOS, Android and native apps by third celebration tools. That that it is probably going you’ll employ JavaScript or TypeScript for pattern.

Phaser is provided in two versions: Phaser three and Phaser CE – The Community Edition. Phaser CE is a community-lead continuation of the Phaser 2 codebase and is hosted on its maintain repo. Phaser three is the next technology of Phaser.

Along with the most effective originate source community, Phaser is actively developed and maintained by Photon Storm. Because of the rapid enhance, and a developer pleasant API, Phaser is for the time being one of many most starred recreation frameworks on GitHub.

1000’s of developers worldwide employ Phaser. From indies and multi-national digital companies, to varsities and Universities. Every creating their maintain astonishing video games.

Consult with: The Phaser internet set up of dwelling and discover on Twitter (#phaserjs)
Be taught: API Docs, Toughen Discussion board and StackOverflow
Code: seven-hundred+ Examples (source accessible on this repo)
Be taught: Weekly Phaser World Newsletter
Chat: Slack and Discord
Lengthen: With Phaser Plugins
Be smartly-behaved: Toughen the manner forward for Phaser

Care for shut the source and be a part of in the relaxing!

twelfth February 2018

After 1.5 years in the making, tens of 1000’s of lines of code, many of of examples and endless hours of relentless work: Phaser three is one way or the opposite out. It has been an accurate labor of like and then some!

Please sign right here is a bleeding-edge and mark unique free up. There are capabilities we contain had to omit, areas of the documentation that need winding up and so many cool unique issues we desired to add. But we had to device a line in the sand somewhere and three.0.0 represents that.

For us right here is correct kind the launch of a brand unique chapter in Phaser’s existence. We would be leaping on trojan horse experiences as like a flash as we are able to and releasing unique versions without warning. We contain structured v3 in this form of technique that we are able to push out level releases as quick as wished.

We put up our Developer Logs in the weekly Phaser World newsletter. Subscribe to protect in contact and win the entire most up-to-date news from us and the broader Phaser community.

That that it is probably going you’ll additionally discover Phaser on Twitter and chat with fellow Phaser devs in our Slack and Discord channels.

Phaser three haven’t got been that that it is probably going you’ll presumably presumably also mediate without the most effective enhance of the community and Patreon. Thanks to each person who supports our work, who shares our belief in the manner forward for HTML5 gaming, and Phaser’s role in that.

Fully jubilant coding each person!


Filthy rich – @photonstorm

Growing Phaser takes a spread of time, effort and money. There are month-to-month running costs as well to endless hours of pattern time, community enhance, and assistance resolving problems.

While you happen to can contain came upon Phaser purposeful for your pattern existence or contain made profits because of it please enhance our work by:

All of it helps and genuinely contributes in opposition to future pattern.

Further special because of our high-tier sponsors: Orange Games and CrossInstall.

Every Monday we put up the Phaser World newsletter. It be packed cumbersome of the most up-to-date Phaser video games, tutorials, videos, meet-ups, talks, and further. It additionally contains our weekly Pattern Growth updates, where that it is probably going you’ll presumably presumably uncover about what unique capabilities we were engaged on.

Over a hundred old editions can came upon on our Relieve Disorders page.

Phaser three is provided by GitHub, npm and CDNs:


Set up by npm:


Phaser is on jsDelivr, a “mountainous-quick CDN for developers”. Encompass the next for your html:

<script src="//cdn.jsdelivr.obtain/npm/phaser@three.0.0/dist/phaser.js">script>

or the minified model:

<script src="//cdn.jsdelivr.obtain/npm/phaser@three.0.0">script>


Phaser is released under the MIT License.

Phaser three is so mark unique the paint is quiet wet. As such we fabricate not yet contain any guides or tutorials! This may perhaps well commerce in the approaching weeks and we will change this set up of dwelling as they emerge. For now, please subscribe to the Phaser World newsletter as we will put up them in there first.

Supply Code Examples

At some level of our pattern of Phaser three we created many of of examples, with the cumbersome source code and resources accessible. Till these are fully constructed-in with the Phaser internet set up of dwelling, you’ll be able to favor to browse them in the Phaser three Labs, or clone the examples repo. Indicate: No longer all examples work, sorry! We’re tidying them up as quick as we are able to.

Create Your First Phaser three Instance

Create an index.html page locally and paste the next code into it:

    <script src="http://labs.phaser.io/assemble/phaser-arcade-physics.min.js"></script> 



Right here is a broken-down empty online page. That that it is probably going you’ll view or not it is pulling in a assemble of Phaser three in the script ticket, but otherwise doesn’t fabricate the relaxation yet. Now let’s aim-up the recreation config. Paste the next between the tags:

var config = {
    form: Phaser.AUTO,
    width: 800,
    high: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
    scene: {
        preload: preload,
        scheme: scheme

Right here is a moderately customary Phaser three Sport Configuration object. We’ll repeat it to make employ of the WebGL renderer whether it is going to, aim the canvas to a dimension of 800×600 pixels, allow Arcade Physics and one way or the opposite name the preload and scheme capabilities. These fabricate not exist yet, so must you flee this it would trusty kind error. So add the next after the config object:

var recreation = unique Phaser.Sport(config);

aim preload ()

    this.load.describe('sky', 'resources/skies/space3.png');
    this.load.describe('mark', 'resources/sprites/phaser3-mark.png');
    this.load.describe('red', 'resources/particles/red.png');

aim scheme ()

This creates a Phaser Sport instance, using our configuration object. It additionally affords the two capabilities it needs. The preload aim is a technique to without effort load resources into your recreation. Right here we will aim the Damaging URL to be the Phaser server and grab down three PNG recordsdata.

The scheme aim is empty, so or not it is time to absorb it in:

aim scheme ()
    this.add.describe(Four hundred, 300, 'sky');

    var particles = this.add.particles('red');

    var emitter = particles.createEmitter({
        creep: a hundred,
        scale: { launch: 1, live: 0 },
        blendMode: 'ADD'

    var mark = this.physics.add.describe(Four hundred, a hundred, 'mark');

    mark.setVelocity(a hundred, 200);
    mark.setBounce(1, 1);


Right here we’re including the sky describe into the recreation. Over the head of this we now contain created a Particle Emitter. The scale price scheme the particles will launch tidy and then scale away to nothing over the duration of their lifespan.

Then we add the logo describe. Investigate cross-take a look at how right here is a Physics Portray, meaning it is given a physics physique by default. We aim some properties on it: creep, soar (or restitution) and collision with the area bounds. This may perhaps well fabricate our mark soar spherical the video display screen. In the end, we repeat the particle emitter to discover the logo – in protest it strikes, the particles will spin from it.

Mosey it for your browser and likewise you’ll be able to see the next:

(Got an error? Right here is the cumbersome code)

It be trusty kind a minute instance, and we contain many of further for you to detect, but hopefully it reveals how expressive and quick Phaser is to make employ of. With trusty kind a few without effort readable lines of code we contain received something rather spectacular up on video display screen!

Subscribe to our weekly newsletter for further tutorials and examples.

Phaser is equipped ready compiled in the dist folder of the repository. There are both hideous and minified versions. The hideous model is to be used at some level of pattern, and the minified model for manufacturing. That that it is probably going you’ll additionally scheme your maintain builds.

Custom Builds

Phaser three must be constructed using Webpack. We steal earnings of a series of Webpack capabilities and plugins to allow us to properly tailor the assemble direction of. That that it is probably going you’ll additionally elect exactly which capabilities are bundled into your model of Phaser. We can free up an tutorial keeping the direction of shortly, but for now please witness at our webpack config recordsdata to win a view of the settings required.

Building from source

While you happen to hope to assemble Phaser three from source fabricate certain that that it is probably going you’ll presumably presumably contain the important programs by cloning the repository and then running npm install.

That that it is probably going you’ll then flee webpack to manufacture a dev assemble to the assemble folder, including source maps for native trying out, or flee npm flee dist to scheme a minified packaged assemble into the dist folder.

We contain repeatedly been meticulous in recording changes to the Phaser code wrong, and where relevant, giving attribution to these in the community who helped. Right here is something we will proceed with Phaser three and likewise you’ll be able to see this portion fabricate bigger as we push through the three.0.0 releases.

Procuring for a v2 commerce? Strive the Phaser CE Change Log

The Contributors Handbook contains cumbersome important facets on tips on how to support with Phaser pattern. The foremost facets are:

  • Found a trojan horse? Represent it on GitHub Disorders and include a code sample. Please train which model of Phaser you are using! Right here is vitally important.

  • Sooner than submitting a Pull Search info from flee your code through ES Lint using our config and respect our Editor Config.

  • Sooner than contributing learn the code of conduct.

Written something cool in Phaser? Please repeat us about it in the forum, or electronic mail enhance@phaser.io

Phaser is a Photon Storm manufacturing.

Created by Richard Davey. Powered by coffee, anime, pixels and like.

The Phaser mark and characters are © 2018 Photon Storm Restricted.

All rights reserved.

“Above all, video video games are intended to be trusty kind one thing: relaxing. Enjoyable for each person.” – Satoru Iwata

Be taught More

Previous ArticleNext Article

Send this to a friend