# Phaser Game Framework
## What is Phaser
_logo.png?alt=media\&token=414256a8-5fc6-429e-95f5-2ece867b4c79)
**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](https://en.wikipedia.org/wiki/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**](https://medium.com/enappd/how-to-create-mobile-games-pwa-with-ionic4-and-phaser-7fb1e917678e)
### 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](https://phaser.io/examples/v2/games/invaders). Following the same modifications and standards, you can convert any [example game](https://phaser.io/examples/v2/games) to Ionic, or create your own using [Phaser documentation.](https://phaser.io/learn)
### Import Phaser in your app
Download *`phaser.min.js`* from [Phaser official downloads](https://phaser.io/download/stable) 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
```
```
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.
```
```
### 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 Ionic`this` 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`
{% hint style="info" %}
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
{% endhint %}
