Create 2D Javascript Games Using Phaser

Web browsers have fantastic built-in capabilities for creating simple graphs, drawing pictures and rendering animations. The <canvas> HTML tag, when combined with Javascript, is perfectly suited to making interactive 2D games. In order to simplify and speed up game development a number of Javascript-based game engines have been developed. Some examples of Javascript game engines are P5, Melon, Kiwi, Play Canvas and Phaser. I decided to delve into the world of Phaser as it has a strong user community and fantastic documentation.

Phaser is an extension to Pixi which is an incredibly powerful implementation of WebGL graphics rendering. Phaser currently has two active version streams. Version 3 is the official release and version 2 has been adopted as a community edition (v2 CE). There are significant differences in syntax between the two. Version 3 is still in its infancy while version 2 has a large online community and examples available online. For that reason, I picked the community edition for my exploration.

The first problem I ran into when trying to get Phaser setup is the loading of assets. I soon realized that due to Cross-Origin Resource Sharing (CORS) the game, even while in local development, needs to be run on a server. The Phaser documentation provides some suggestions such as MAMP, Grunt Connect, PHP 5 built-in web server or a web server extension from the large Node.js community.

I decided to use a Node.js server. The two most popular options are HTTP-Server and Live-Server. I tried both. Each is incredibly easy to get working. All that needs to be done is install the node module globally(e.g. npm install -g live-server), go to the root project folder in the terminal and type in either http-server / live-server to fire it up. I found Live-Server to be better. It automatically refreshes on changes to the code for one thing. I also found that there were some caching issues with HTTP-Server which caused updates to not work until I manually cleared the cache.

Phaser games have a standardized structure. They have 3 primary functions: preload(), create() and update(). They are each quite intuitive. The assets are called in the preload function so that they’re ready to be initialized within the game. Any user controlled component in the game is called a Sprite. If the Sprite is animated you can create a Sprite Sheet which is essentially like a series of panels that capture the Sprite in multiple positions. This is done so that the preload data is faster to load on startup and during gameplay. The create function is where the foundations of the game are created. The update function is where you build functions that respond to changes within the created environment. All games have a preload and a create function. The update function is not always required, in many simple games all the requirements for gameplay are established in the create function.

The best way to illustrate how Phaser works is with an example. This example shows how to create a box that when thrown up comes back down and collides with a ground surface. This basic example shows off Phaser’s simple implementation of a physics engine together with interaction with the mouse and collision detection.

Here is a GIF showing off our amazing new game!