Learn Phaser: Best Resources, Tutorials and Courses, Game Templates

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 games 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+.

Tutorials and Courses

1. Getting Started – In this tutorial you will learn how to setup 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.
2. Lessmilk – This page contains tutorials about how to make a certain type of games using Phaser. It currently includes Flappy Bird clone, breakout, and 2D platformer.
3. Codeandweb – This section is a list of tutorials covering Phaser 2 and 3 of which main focus is about sprites, sprite sheets, animations, game physics and light effects and optimization.
4. 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.
5. 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 make farm animal toddlers game, virtual pet game, platformer Super Mario game, multi-level spaceship game, and candy Match-3 game.
6. Making Games With Phaser 2.X – This free course will guide you starting from learning the fundamentals of JavaScript using Replit to creating their own Phaser examples using the Brackets text editor.

Game Templates

1. Battleship – The mission of the game is to destroy all opponent war ships. the first who destroyed all opponent ships wins.
2. Lucky Slot Machine – Lucky Slot Machine is a HTML5 Casino Slot game with 10 type of symbols. Put your bet, lines, and start spinning to try your lucky.
3. Chess – This Chess game is a HTML5 board game made with Phaser 3.
4. Connector –  This is a puzzle game with the aim of the game is to fix all unconnected wires from energy source into a light bulb to turn it on.
5. Reversi – Reversi is a strategy HTML5 board game for 2 players, you can play with your friend or versus bot/AI. Reversi is played on 8*8 board and the goal of game is to have pieces more than your opponent.
6. Jumpy – Jumpy is an endless jumper Game Kit.