Combining the Phaser Framework with Ionic 1.x & AngularJS

Phaser or Ionic? Por que no las dos!

Of course, asking the question “Phaser or Ionic?” is a bit absurd. Phaser and Ionic are both powerful frameworks that allow you to do totally different things.

Ionic allows you to build typical business style mobile applications with all the user interface elements you would expect from a native mobile application.

Phaser allows you to create HTML5 games, which can easily be packaged as a mobile app using PhoneGap or something like CocoonJS.

BONUS CONTENT: Want to learn how to use both of these magnificent frameworks? Take a look at my Mobile Development for Web Developers course.

Why on Earth would you want to combine Phaser and Ionic?

Phaser is great at making games, but not so great for creating complex UI interfaces on mobile. Ionic is great at creating mobile applications but it’s, obviously, no good at creating games.

I’m creating a new game as a bit of an experiment which will be somewhat similar to Cookie Clicker in that it will provide what is essentially a very complex in game shop. I could create this in Phaser but it would be quite complicated, and I know I could achieve it quite easily with Ionic. So I had the wacky idea to combine them both. The end result looks a little something like this:

Ionic + Phaser Demo

I think in general combining frameworks like this is a bad idea and this is a very specific use case. I think this is a good educational exercise in any case though as it will help you understand exactly how both frameworks behave within the project and where conflicts might occur.

For example, one might assume that an Ionic app (which is in effect an Angular app) is applied to the entire Document Object Model (DOM) but in fact it can be applied to just a single DIV tag if you want, whilst the rest of the DOM will behave normally.

Similarly, a Phaser game can be attached to a single DIV tag.

Creating a mini Ionic application

As I mentioned above, when you create an Ionic application the app you create only lives on the HTML node that you attach it to. In most Ionic apps the app will be attached to the BODY node in index.html:

<body ng-app="MyApp">

You will then also have to create an Angular module called MyApp in app.js that is to be run through the BODY tag:

angular.module('MyApp', ['ionic'])

When combining Ionic and Phaser together we don’t want the Ionic app to live on the BODY tag though (at least not in this case). So that the Ionic app and Phaser app can coexist peacefully, I created a new DIV for my Ionic app to live within:

<div id = "ionicControls" ng-app="MyApp">
      <ion-nav-view></ion-nav-view>
  </div>

As is typical in an Ionic application, I’m using ion-nav-view which is essentially a placeholder to switch out the views I wish to display. In this case, all I will be displaying in here is a simple ion-footer-bar that will contain three buttons to launch three different modals.

These three modals which will serve as the various shop and settings screens will launch in full screen and overlay my Phaser application. Ionic can then be used to handle all the data storage and number crunching and Phaser can just deal with the game stuff.

Adding Phaser to the Application

When creating a Phaser game we can also specify the id of the DIV that it is to live in within the initialisation call:

game = new Phaser.Game(window.innerWidth * window.devicePixelRatio, (window.innerHeight * window.devicePixelRatio) - 45 * window.devicePixelRatio, Phaser.AUTO, 'gameArea');

Which we can add just above where the Ionic application lives:

<div id = "gameArea"></div>

The complete index.html file we will come to will look a little something like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <!-- compiled css output -->
    <link href="css/ionic.app.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your ionic apps js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>

    <!-- phaser js -->
    <script type="text/javascript" src="js/game/phaser.min.js"></script>
    <script type="text/javascript" src="js/game/boot.js"></script>
    <script type="text/javascript" src="js/game/preload.js"></script>
    <script type="text/javascript" src="js/game/gametitle.js"></script>
    <script type="text/javascript" src="js/game/main.js"></script>
    <script type="text/javascript" src="js/game/gameover.js"></script>

    <script type="text/javascript">
    (function() {

        /* Scale the game size for high resolution devices - store this value globally
         * Image assets should be 3x larger than they need to be, then they will be scaled down
         * according to the scale ratio (i.e an iPhone 5 with a DPR of 2 will have a scale ratio
         * of 2 / 3 which is 0.66..., so the image will be scaled down by one third which is what we want)
         */
        scaleRatio = window.devicePixelRatio / 3;

        //Create a new game instance and assign it to the 'gameArea' div
        game = new Phaser.Game(window.innerWidth * window.devicePixelRatio, (window.innerHeight * window.devicePixelRatio) - 45 * window.devicePixelRatio, Phaser.AUTO, 'gameArea');

        //Add all states
        game.state.add("Boot", Boot);
        game.state.add("Preload", Preload);
        game.state.add("GameTitle", GameTitle);
        game.state.add("Main", Main);
        game.state.add("GameOver", GameOver);

        //Start the first state
        game.state.start("Boot");

    })();
    </script>
  </head>
  <body>

  <div id = "gameArea"></div>

  <div id = "ionicControls" ng-app="MyApp">
      <ion-nav-view></ion-nav-view>
  </div>

  </body>
</html>

which has all of the necessary Ionic and Phaser files being included and loaded into the app. Now the application contains both the Ionic and Phaser frameworks simultaneously and I can use them as I see fit!

Follow me on Twitter or subscribe to me on YouTube for more web development content.

Check out my latest videos: