Phaser is a free open-source 2D game framework for making HTML5 games for desktop and mobile. The engine uses both a Canvas and WebGL renderer internally and swaps automatically between them based on browser support.
The Phaser game engine is a JavaScript-based cross-platform framework for developing 2D games. It allows developers to use one set of code, which can then be compiled to run on multiple platforms with minimal changes. To port games to iOS, Android, and native desktop apps, you need 3rd party tools like Apache Cordova and PhoneGap.
Phaser’s clean, well-documented API allows you to concentrate on cutting code without having to worry about the nitty-gritty details.
The framework is aimed at producing slick cross-platform games that work across desktop and mobile devices. It can be used for 2D or 3D games, as well as simple interactive applications and even animated scenes.
This is achieved through Phaser’s Graphics and Game Objects. It has a Physics Engine, Input Management (via keyboard, mouse, touch, or accelerometer), pre-built Particle Effects as well as support for Tile Maps and Bitmap Fonts.
Phaser is written in JavaScript ES5 so what you learn will be just as applicable to other gaming frameworks.
It is built upon three core concepts: Scenes, Sprites (Pixels), and Tiles, which are combined to create the game world. These can be added together to form levels within a game and can be constructed at runtime without the need for full-scale code rewrites. This also allows you to create custom game objects at runtime.
The framework is built upon Canvas, which provides the API for drawing shapes and images in an HTML page, thereby removing the need for third-party libraries and speeding up development time through code sharing. As Phaser uses canvas rather than WebGL it is well-supported across browsers including Internet Explorer 9+.
Table of Contents
Tutorials and Courses
- Getting Started – In this tutorial you will learn how to set up a development environment for Phaser, run a local web server, pick an IDE, get the latest version of Phaser, and check it all works together.
- Lessmilk – This page contains tutorials about how to make certain types of games using Phaser. It currently includes a Flappy Bird clone, breakout, and 2D platformer.
- Codeandweb – This section is a list of tutorials covering Phaser 2 and 3 whose main focus is on sprites, sprite sheets, animations, game physics, and light effects and optimization.
- Making HTML5 Games with Phaser 3 – By taking this course on Making HTML5 Games with Phaser 3, you’ll not only build 3 HTML5 games but also create a reusable game template to help you make your own game ideas come to life.
- The Complete Mobile Game Development Course with Phaser – Learn to make games from total scratch with JavaScript, HTML5, and Phaser. This course will teach you to make farm animal toddlers games, virtual pet games, platformer Super Mario games, multi-level spaceship games, and candy Match-3 games.
- Making Games With Phaser 2.X – This free course will guide you starting from learning the fundamentals of JavaScript using Replit to creating your own Phaser examples using the Brackets text editor.
Game Templates
- Battleship – The mission of the game is to destroy all opponent warships. the first who destroyed all opponent ships wins.
- Lucky Slot Machine – Lucky Slot Machine is an HTML5 Casino Slot game with 10 types of symbols. Put your bet, and lines, and start spinning to try your luck.
- Chess – This Chess game is an HTML5 board game made with Phaser 3.
- Connector – This is a puzzle game with the aim of the game to fix all unconnected wires from an energy source into a light bulb to turn it on.
- Reversi – Reversi is a strategy HTML5 board game for 2 players, you can play with your friend or versus a bot/AI. Reversi is played on an 8*8 board and the goal of the game is to have pieces more than your opponent.
- Jumpy – Jumpy is an endless jumper Game Kit.
