Phaser Game Framework

You can now integrate the popular and interesting 2D game framework Phaser into Ionic to create your own mobile games

What is Phaser

Phaser is a free software 2D game framework for making HTML5 games for desktop and mobile. It is developed by Photon Storm

Phaser uses both a Canvas and WebGL renderer internally and can automatically swap between them based on browser support. This allows for fast rendering across desktop and mobile. It uses the Pixi.js library for rendering.

Games can be compiled to iOS, Android and native desktop apps via 3rd party tools like Cordova/Ionic

A step by step guide of integrating Phaser in Ionic can be found on our blog How to create mobile game and PWA with Ionic and Phaser

Why integrate Phaser and Ionic

While Ionic gives you the power of creating apps and PWA at a lightening speed, you cannot really make games with it. Phaser, while great at game building, is not really about building a structured mobile or web-app. Hence, building a neat looking game app or PWA with Phaser requires an HTML + CSS wrapper, which converts it into a functional mobile app, a void which Ionic perfectly fills.

Integration

A sample game with Phaser is integrated into Full App at src/app/pages/phaser

This page serves as a working example of a Phaser example game available here. Following the same modifications and standards, you can convert any example game to Ionic, or create your own using Phaser documentation.

Import Phaser in your app

Download phaser.min.js from Phaser official downloads and link it with your project. For demo purpose, I will keep this file in assets folder, but you can link it from CDN as well.

Include the phaser.js file in index.html files as follows

<script src="assets/phaser.min.js"></script>

Now you can include Phaser in your component .ts files using

declare let Phaser;

(To check what Phaser contains, try consoling the variable or its defaultState saved in this and you’ll get some insights into Phaser’s built.)

Instantiate the game

All the relevant game javascript code will go in phaser.page.ts file. In phaser.page.html , we declare a div with a known id and we will instantiate the game in this div.

<ion-content>
  <div id="space-invaders"></div>
</ion-content>

Game logic

A basic Phaser game has three default functions — preload(), create() and update()

Preload — As the name suggests, preloads assets etc. In our case, this function will load the sprites and background images.

Create — Creates the game instance and loads the game state. In our game, this function will create and set bullet groups, enemy bullet groups, hero character, enemy character, lives, score, explosion and buttons. We will also create and set animation listeners here.

Update — Update the game state on looping, actions, physics interactions etc. This is the function where repeated things of the game happen e.g. repeated firing of bullets logic, enemy movement logic, hero movement based on keyPressed logic etc.

Other functions - Other functions are helper functions. These can be technically written inside the above three functions, but for code cleanliness, the functions are written separately and called from the basic three functions.

Important️️

The Phaser implementation can leave you confused with the implementation of this . In short, once the Phaser scene is initialized, this contains the default game state. As an Ionic developer, or if you follow Ionic documentation, you will user this to refer to the component’s class. So you end up using conflicting this . For a quick work-around, I assign the Ionicthis to another variable that (😅) and then use it to point to class functions.

A common mistake is to declare that = this in the constructor. Yes, it does reference this via that , but as soon as this changes, that also changes, and hence there is no point of doing this. You might do that = Object.assign({},this) which is a good standard code. But you will find that this also does not result in what we want. Because in Ionic this contains the class functions inside _prototype , to copy those functions into that you should define it like

that = Object.create(this.constructor.prototype);

And then use that in place of this to call functions

E.g. that.setupInvader points to a function setupInvader . Using this here would throw an error because create() function contains scene’s default state inside this

In Full App, we have used let for variables, but you can use them as class variables as well. Make sure you use them as that.variable if you do so