Phaser 3 is an HTML 5 framework that is used to make games that easily run in the web browser. It is written entirely in either JavaScript or TypeScript (your choice) and makes use of the HTML 5 canvas element to create games that can run directly in your browser without the need of a plugin like Flash Player (which recently had its support dropped from Chrome). Phaser does all the heavy-lifting for you. It handles the DOM interaction while you worry about the look and feel of your game. The prepackaged tools like Physics engines, sprite handlers, audio features and more makes the development process simple.

Features

WebGL and Canvas

Phaser uses both a WebGL and Canvas renderer internally so that it can seamlessly swap between the two based on browser support. It does this through the use of a package builder such as Webpack or Parcel to check the browser first and choose the best choice for the job. This effortless transition is accomplished through the use of a few lines of codes in your webpack.config.js file.

Preloader

The preloader allows all the assets of your game to be loaded and stored in the Global Cache available for use by any child Game Objects. Images, sprite sheets, sounds, tilemaps, JSON, and XML are all parsed and handled automatically through the load function.

Physics

Phaser comes prepackaged with three physics engines to suit your needs. The Arcade Physics library supports funner, less realistic physics as you might see in a 2D arcade game or platformer. Matter JS is a more realistic physics engine with support for real-world systems such as springs, constraints, and tension, as well as polygon support for 3D rendering. Finally, Impact physics allows for the simulation of advanced collision physics when tile mapping.

Sprites

Sprite sheets allow for an animated character to look like it’s moving by capturing it in different positions and using each position one at a time at a certain framerate. Phaser does the animation for you by simply telling the anims function which frames you need and at what speed. Phaser also has a supply of ready-made sprite sheets and other assets like images, particles, sounds, and tile maps available for download from their website at labs.phaser.io/assets.

Particles

Phaser has a particle system built in, which allows for easy creation of particle effects such as sparks or lights. Persistent effects are also supported such as smoke, rain, or fire.

Input

Phaser supports every type of input there is: keyboard, mouse, touchscreen, gamepad. All of these are supported, even if you change mid-game. Any object can be clickable or touchable, and any object can be manipulated through the keyboard. Just supply the rules for the actions and you are good to go.

Sound

Sound effects are vital to any video game. Whether it be music, speech, bangs, pops, or blasts, the best games usually also have the best sound design. Phaser makes it easy to load your sound files into the game scene and use them at will. It also handles external factors such as volume control and mobile device silence.

Tilemaps

Tilemaps are the blueprints of how you want your play area to look. Each tile is designated a position on the canvas through a CSV or Tiled Map data format. Phaser can load, render, and collide with a tilemap with just a few lines of code. Tiles can then be deleted, swapped, or moved easily through the use of tilemap functions.

Community Support

Phaser has a robust and inclusive community which shares ideas and projects frequently. There is a Phaser forum for discussing tech issues, a Discord server for more casual discourse. The Phaser Twitter account also makes frequent posts showcasing incredible games made through their framework and are always available to answer questions. Tutorials ranging from beginner level to advanced content are free to browse and experiment with as well as open source templates and projects.

Learn more and discover new games by checking out the news section of the phaser website.