Create HTML5 Native games in Ionic Capacitor apps using Phaser
Tags: ionic, capacitor, phaser, games
Published: 2020-03-28 14:04:41

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="1488" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="4d1e" class="graf graf--p graf-after--figure">In this post, you will learn how to create HTML5 games using Phaser in Capacitor Ionic apps. We will create Zombie walker and a Space Invader game, which you can play both in app as well as browser. Space Invader was the first game I developed back in school, in JAVA, so it’s like a ‘Hello World’ of games for me&nbsp;!</p><figure tabindex="0" contenteditable="false" name="2fd5" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 309px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 51.5%;"></div><img class="graf-image" data-image-id="1*M-P_SP8Pg1rWrdGb1HhE_Q.gif" data-width="600" data-height="309" alt="Space Invaders built in Ionic Capacitor with Phaser framework" src="https://cdn-images-1.medium.com/max/800/1*M-P_SP8Pg1rWrdGb1HhE_Q.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Space Invaders built in Ionic Capacitor with Phaser framework</figcaption></figure><p name="7cfd" class="graf graf--p graf-after--figure">HTML5 games can be made using Phaser framework, which is an awesome framework for 2D game development. Capacitor is the latest buzz in hybrid app world. It is created to be a replacement and an improvement over Cordova. We will learn more about these in following sections.</p><blockquote name="badb" class="graf graf--blockquote graf-after--p is-selected"><strong class="markup--strong markup--blockquote-strong">This demonstration is supported by </strong><a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic 4 Full App Starter</strong></a><strong class="markup--strong markup--blockquote-strong"> from Enappd. Complete source code of this tutorial is available in Github repo&#8202;—&#8202;</strong><a href="https://github.com/enappd/Ionic4-phaser"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-phaser </strong></a><strong class="markup--strong markup--blockquote-strong">(ZMB_capacitor branch &amp; SI_capacitor branch)</strong></blockquote><p name="0ad7" class="graf graf--p graf-after--blockquote">Let’s see a brief intro to each of the included frameworks:</p><ol class="postList"><li name="1f53" class="graf graf--li graf-after--p">Ionic</li><li name="71d0" class="graf graf--li graf-after--li">Capacitor</li><li name="d0f1" class="graf graf--li graf-after--li">Phaser</li></ol><h3 name="244d" class="graf graf--h3 graf-after--li">Ionic Framework</h3><p name="941f" class="graf graf--p graf-after--h3">You probably already know about Ionic, but I’m putting it here just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> is a hybrid mobile app development SDK. It provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores. These apps can be installed on devices by leveraging <a href="https://cordova.apache.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Cordova</a> or Capacitor environment.</p><p name="010c" class="graf graf--p graf-after--p">So, in other words&#8202;—&#8202;If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. <strong class="markup--strong markup--p-strong">With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android </strong>(and windows!), that too with the simplicity of HTML, CSS, and JS.</p><p name="0f04" class="graf graf--p graf-after--p">It is important to note the contribution of Cordova/Capacitor in this. Ionic is only a UI wrapper made up of HTML, CSS and JS. So, by default, Ionic cannot run as an app in an iOS or Android device. Cordova/Capacitor is the build environment that containerizes this Ionic web app and converts it into a device installable app, along with providing this app access to native APIs like Camera etc.</p><h3 name="1815" class="graf graf--h3 graf-after--p">Phaser Game Framework</h3><p name="3b5b" class="graf graf--p graf-after--h3">Phaser, first released in 2013, is a 2D HTML5 game development framework. It has now become a huge name in 2D HTML5 games. Based on javascript, it can easily be integrated in a variety of javascript frameworks. 👾 👾 👾</p><p name="e7d1" class="graf graf--p graf-after--p">So why integrate Phaser and Ionic&nbsp;? 🚀 👾</p><p name="c9d8" class="graf graf--p graf-after--p">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, a void which Ionic perfectly fills.</p><h3 name="e03e" class="graf graf--h3 graf-after--p">What is Capacitor&nbsp;?</h3><p name="8090" class="graf graf--p graf-after--h3">Cordova helps build Ionic web app into a device installable app. But there are some limitations of Cordova, which Capacitor tries to overcome with a new App workflow.</p><p name="f84c" class="graf graf--p graf-after--p">Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, <em class="markup--em markup--p-em">and</em> the web. Ionic people call these apps “Native Progressive Web Apps” and they represent the next evolution beyond Hybrid apps. It was built for Ionic, but it can run other frameworks as well. It is just a run-time system which “container-izes” your web-app and allows it to run in multiple places. With capacitor, you can run your game in</p><ul class="postList"><li name="4ab5" class="graf graf--li graf-after--p">Android App</li><li name="667f" class="graf graf--li graf-after--li">iOS app</li><li name="7b99" class="graf graf--li graf-after--li">In browser as a Progressive web app, and</li><li name="f8be" class="graf graf--li graf-after--li">In desktop application using Electron</li></ul><p name="752e" class="graf graf--p graf-after--li">In essence, Capacitor is like a fresh, more flexible version of Cordova. It makes the job of running hybrid apps on various platforms very easy.</p><h3 name="0ee8" class="graf graf--h3 graf-after--p">Structure of the&nbsp;Post</h3><p name="4e4f" class="graf graf--p graf-after--h3">We’ll follow a stepped approach to create a Phaser based game in our Ionic 4 Capacitor App. Following are the steps</p><ul class="postList"><li name="b073" class="graf graf--li graf-after--p">Step 1&#8202;—&#8202;Create a basic <strong class="markup--strong markup--li-strong">Ionic 4 Angular</strong> app</li><li name="05a2" class="graf graf--li graf-after--li">Step 2&#8202;—&#8202;Include Phaser in the project</li><li name="93d1" class="graf graf--li graf-after--li">Step 3— Integrate Capacitor in the app</li><li name="98c0" class="graf graf--li graf-after--li">Step 4&#8202;—&#8202;Implement Phaser game</li><li name="846b" class="graf graf--li graf-after--li">Step 5— Build the game into a mobile app</li></ul><p name="895d" class="graf graf--p graf-after--li">This is what we are going to build in this tutorial.</p><figure tabindex="0" contenteditable="false" name="1b2b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 374px; max-height: 661px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176.7%;"></div><img class="graf-image" data-image-id="1*VZyszKo1Ebsu7qT-5Z3InQ.gif" data-width="374" data-height="661" alt="A zombie walking&#8202;—&#8202;Using Phaser in capacitor app" src="https://cdn-images-1.medium.com/max/800/1*VZyszKo1Ebsu7qT-5Z3InQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">A zombie walking&#8202;—&#8202;Using Phaser in capacitor app</figcaption></figure><p name="22a5" class="graf graf--p graf-after--figure">So let’s dive right in&nbsp;!</p><h3 name="109f" class="graf graf--h3 graf-after--p">Step 1: Create a basic Ionic 4 Angular&nbsp;app</h3><blockquote name="9323" class="graf graf--blockquote graf-after--h3">I have covered this topic in detail in <a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/"  class="markup--anchor markup--blockquote-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">this blog</a>.</blockquote><p name="8df4" class="graf graf--p graf-after--blockquote">In short, the steps you need to take here are</p><ul class="postList"><li name="1e8a" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.0.0 at the time of this blog post)</li><li name="1ae0" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm (my Ionic version is ^4.7.1 )</li><li name="508a" class="graf graf--li graf-after--li">Create an Ionic app using <code class="markup--code markup--li-code">ionic start</code></li></ul><p name="afc5" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">sidemenu</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start ioniser sidemenu</code>&nbsp;, node modules will be installed. Once the installation is done, run your app on browser using</p><pre name="9694" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="2c76" class="graf graf--p graf-after--pre">and check everything runs fine. For me it looks like following. Copy the code from the attached Github repo to change it into the game.</p><figure tabindex="0" contenteditable="false" name="6d77" class="graf graf--figure is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 387px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.300000000000004%;"></div><img class="graf-image" data-image-id="1*H1h_3dUzlopbnG3vQULZrg.png" data-width="1388" data-height="768" src="https://cdn-images-1.medium.com/max/800/1*H1h_3dUzlopbnG3vQULZrg.png"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="6026" class="graf graf--h3 graf-after--figure">Step 2: Include Phaser in the&nbsp;project</h3><p name="399b" class="graf graf--p graf-after--h3">Phaser is super-easy to include in the project. Essentially it is just a Javascript file that you need to include in your HTML5 project. There are two ways to do it</p><p name="06c2" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">#1&#8202;—&#8202;The cool “just-get-it-done” way (faster)</em></strong></p><p name="08aa" class="graf graf--p graf-after--p">Download <code class="markup--code markup--p-code"><em class="markup--em markup--p-em">phaser.min.js</em></code> from <a href="https://phaser.io/download/stable"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Phaser official downloads</a> and link it with your project. For demo purpose, I will keep this file in <code class="markup--code markup--p-code">assets</code> folder, but you can link it from CDN as well.</p><p name="8289" class="graf graf--p graf-after--p">Include the phaser.js file in <code class="markup--code markup--p-code">index.html</code> files as follows</p><pre name="232a" class="graf graf--pre graf-after--p">&lt;script src="assets/phaser.min.js"&gt;&lt;/script&gt;</pre><p name="8b35" class="graf graf--p graf-after--pre">Now you can include phaser in your component&nbsp;<code class="markup--code markup--p-code">.ts</code> files using</p><pre name="0fc6" class="graf graf--pre graf-after--p">declare var Phaser;</pre><p name="4457" class="graf graf--p graf-after--pre">(To check what <code class="markup--code markup--p-code">Phaser</code> contains, try consoling the variable or its <code class="markup--code markup--p-code">defaultState</code> saved in <code class="markup--code markup--p-code">this</code> and you’ll get some insights into Phaser’s built.)</p><p name="43fc" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">#2&#8202;—&#8202;The complex “I-am-a-coding-nerd” way</em></strong></p><p name="a764" class="graf graf--p graf-after--p">Download the npm package from phaser with</p><pre name="e6b9" class="graf graf--pre graf-after--p">npm install phaser-ce</pre><p name="12e6" class="graf graf--p graf-after--pre">Prepare <strong class="markup--strong markup--p-strong">webpack</strong> to compile the phaser package so you can <code class="markup--code markup--p-code">import</code> the package in the&nbsp;.ts file. You might have to prepare your own webpack-config for this and install additional modules. After this, you can import the variables as</p><pre name="9e68" class="graf graf--pre graf-after--p">import "pixi";<br>import "p2";<br>import * as Phaser from "phaser-ce";</pre><p name="d1c8" class="graf graf--p graf-after--pre">Details are given <a href="https://github.com/photonstorm/phaser-ce#browserify--cjs"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a> (Last I tried, this method had various bugs with Ionic, so I will stick with the method #1)</p><h3 name="ac92" class="graf graf--h3 graf-after--p">Step 3— Integrate Capacitor in the&nbsp;app</h3><p name="9625" class="graf graf--p graf-after--h3">Capacitor can be attached to an existing Ionic app as well. To attach Capacitor to your existing Ionic app, run</p><pre name="3e47" class="graf graf--pre graf-after--p">$ <code class="markup--code markup--pre-code">ionic integrations enable capacitor</code></pre><p name="82e3" class="graf graf--p graf-after--pre">This will attach Capacitor to your Ionic app. After this, you have to <code class="markup--code markup--p-code">init</code> the Capacitor app with</p><pre name="f035" class="graf graf--pre graf-after--p">$ npx cap init YOUR_APP_NAME YOUR_APP_ID</pre><h3 name="6b3a" class="graf graf--h3 graf-after--pre">Step 4: Implement Phaser&nbsp;game</h3><blockquote name="3c7b" class="graf graf--blockquote graf-after--h3"><strong class="markup--strong markup--blockquote-strong">You can find the complete code in the</strong><a href="https://store.enappd.com/product/ionic-phaser-game-framework-ionic-4/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"> Ionic 4 Phaser Starter</strong></a><strong class="markup--strong markup--blockquote-strong"> (ZMB_capacitor branch)</strong></blockquote><p name="ad47" class="graf graf--p graf-after--blockquote">For sample purpose, we’ll use a simple <a href="https://phaser.io/examples/v2/animation/animation-events"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Phaser example</a> where we will make a <strong class="markup--strong markup--p-strong">Zombie</strong> walk.</p><p name="0005" class="graf graf--p graf-after--p">We will focus on <code class="markup--code markup--p-code">home</code> component that comes with the starter. So all the relevant javascript code will go in <code class="markup--code markup--p-code">home.page.ts</code> file. Replace the whole content in <code class="markup--code markup--p-code">home.page.html</code> file with the following</p><pre name="00a2" class="graf graf--pre graf-after--p">&lt;ion-content&gt;<br>  &lt;div id="phaser-example"&gt;&lt;/div&gt;<br>&lt;/ion-content&gt;</pre><p name="6e56" class="graf graf--p graf-after--pre">We will identify the <code class="markup--code markup--p-code">phaser-example</code> in our javascript logic and instantiate the game in this div.</p><p name="9469" class="graf graf--p graf-after--p">A basic Phaser game has three default functions&#8202;—&#8202;preload(), create() and update()</p><h4 name="cf30" class="graf graf--h4 graf-after--p"><strong class="markup--strong markup--h4-strong">Preload()</strong></h4><p name="1a73" class="graf graf--p graf-after--h4">As the name suggests, preloads assets etc. In our case, this function will load the zombie and background images.</p><pre name="d6b9" class="graf graf--pre graf-after--p">preload() {<br>this.game.load.image('lazur', 'assets/thorn_lazur.png');<br>this.game.load.spritesheet('mummy', 'assets/metalslug_mummy37x45.png', 37, 45, 18);<br>}</pre><h4 name="6e9d" class="graf graf--h4 graf-after--pre"><strong class="markup--strong markup--h4-strong">Create()</strong></h4><p name="76d2" class="graf graf--p graf-after--h4">Creates the game instance and loads the game state. In our game, this function will set the images in the scene. We will also create and set animation listeners here.</p><pre name="92a8" class="graf graf--pre graf-after--p">create() {<br>// Set background<br>this.back = this.game.add.image(0, -400, 'lazur');<br>this.back.scale.set(2);<br>this.back.smoothed = false;<br>// Set mummy from a sprite<br>this.mummy = this.game.add.sprite(200, 360, 'mummy', 5);<br>this.mummy.scale.set(4);<br>this.mummy.smoothed = false;<br>// Set mummy animation<br>this.anim = this.mummy.animations.add('walk');<br>this.anim.onStart.add(that.animationStarted, this);<br>this.anim.onLoop.add(that.animationLooped, this);<br>this.anim.onComplete.add(that.animationStopped, this);<br>this.anim.play(10, true);<br>}</pre><h4 name="93a2" class="graf graf--h4 graf-after--pre"><strong class="markup--strong markup--h4-strong">Update()</strong></h4><p name="5b1e" class="graf graf--p graf-after--h4">Update the game state on looping, actions, physics interactions etc. For our game, this will update the animation by moving the background to create the effect of a “walk”</p><pre name="26d7" class="graf graf--pre graf-after--p">update() {if (this.anim.isPlaying) { this.back.x -= 1;}}</pre><p name="3dcc" class="graf graf--p graf-after--pre">and Tada&nbsp;!!! 🎉 🎉🎉 We have our game running in the <em class="markup--em markup--p-em">serve </em>window</p><figure tabindex="0" contenteditable="false" name="16d7" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 333px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.50000000000001%;"></div><img class="graf-image" data-image-id="1*iTWUgMpxjmLFO9nXfnz31A.gif" data-width="600" data-height="333" alt="Basic Phaser game in Capacitor browser app" src="https://cdn-images-1.medium.com/max/800/1*iTWUgMpxjmLFO9nXfnz31A.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Basic Phaser game in Capacitor browser&nbsp;app</figcaption></figure><p name="6a1d" class="graf graf--p graf-after--figure">In the same way, you can run any Phaser game with Ionic. Trust me, there are some incredible looking <a href="https://phaser.io/examples"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">games made in Phaser</a>. We made a Mario replica some time back, and a Space Invader as well&nbsp;!</p><p name="2686" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">⭐️️️️⭐️️️️⭐️️️️ Important️️ ⭐️️️️⭐️️️️⭐️️️️</strong></p><p name="2e04" class="graf graf--p graf-after--p">The Phaser implementation can leave you confused with the implementation of <code class="markup--code markup--p-code">this</code>&nbsp;. In short, once the Phaser scene is initialized, <code class="markup--code markup--p-code">this</code> contains the default game state. As an Ionic developer, or if you follow Ionic documentation, you will use <code class="markup--code markup--p-code">this</code> to refer to the component’s class. So you end up using conflicting <code class="markup--code markup--p-code">this</code>&nbsp;. For a quick work-around, I assign the Ionic<code class="markup--code markup--p-code">this</code> to another variable <code class="markup--code markup--p-code">that</code> (😅) and then use it to point to class functions.</p><p name="8a11" class="graf graf--p graf-after--p">A common mistake is to declare <code class="markup--code markup--p-code">that = this</code>&nbsp;. Yes, it does reference <code class="markup--code markup--p-code">this</code> via <code class="markup--code markup--p-code">that</code>&nbsp;, but as soon as <code class="markup--code markup--p-code">this</code> changes, <code class="markup--code markup--p-code">that</code> also changes, and hence there is no point of doing this. You might do <code class="markup--code markup--p-code">that = Object.assign({},this)</code> which is a good standard code. But you will find that this also does not result in what we want. Because in Ionic <code class="markup--code markup--p-code">this</code> contains the class <strong class="markup--strong markup--p-strong">functions</strong> inside <code class="markup--code markup--p-code">_prototype</code>&nbsp;, to copy those functions into <code class="markup--code markup--p-code">that</code> you should define it like</p><pre name="88ef" class="graf graf--pre graf-after--p">that = Object.create(this.constructor.prototype);</pre><p name="4af8" class="graf graf--p graf-after--pre">And then use <code class="markup--code markup--p-code">that</code> in place of <code class="markup--code markup--p-code">this</code> to call functions</p><p name="a2b0" class="graf graf--p graf-after--p">E.g. <code class="markup--code markup--p-code">that.animationStarted</code> points to a function <code class="markup--code markup--p-code">animationStarted</code>&nbsp;. Using <code class="markup--code markup--p-code">this</code> here would throw an error because <code class="markup--code markup--p-code">create()</code> function is a Phaser default and contains scene’s default state inside <code class="markup--code markup--p-code">this</code></p><p name="481e" class="graf graf--p graf-after--p">If you are not comfortable with the <code class="markup--code markup--p-code">this</code>concept, you can read more about it <a href="https://code.tutsplus.com/tutorials/fully-understanding-the-codethiscode-keyword--net-21117"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a>.</p><p name="74a7" class="graf graf--p graf-after--p">(As another work-around, you can put the complete javascript code outside the class implementation of Ionic, or worse even, in a <code class="markup--code markup--p-code">&lt;script&gt;&lt;/script&gt;</code> tag in <code class="markup--code markup--p-code">index.html</code>&nbsp;, but that is too much of a hack. You won’t be able to write huge game codes this way)</p><h3 name="ce4c" class="graf graf--h3 graf-after--p">Step 5: Build the game into a mobile&nbsp;app</h3><p name="0fe1" class="graf graf--p graf-after--h3">Building a Capacitor app with Phaser is exactly same as building a regular Capacitor app. For those who are not familiar with the process in Ionic 4, first build the ionic web assets</p><pre name="61fc" class="graf graf--pre graf-after--p">$ ionic build</pre><p name="2395" class="graf graf--p graf-after--pre">Then add a platform to the app using any of these commands</p><pre name="951e" class="graf graf--pre graf-after--p">$ npx cap add android<br>$ npx cap add ios</pre><p name="6322" class="graf graf--p graf-after--pre">Once the platform is added, you can open the native IDE of that platform and run the app in device or simulator.</p><pre name="59ad" class="graf graf--pre graf-after--p">$ npx cap open android // opens Android Studio<br>$ npx cap open ios // opens Xcode</pre><p name="801d" class="graf graf--p graf-after--pre">You might want to adjust the <code class="markup--code markup--p-code">canvas</code> size as per the device size using <code class="markup--code markup--p-code">window.innerWidth</code> and <code class="markup--code markup--p-code">window.innerHeight</code>&nbsp;. With this, you can adjust the game canvas for all mobile devices sizes.</p><figure tabindex="0" contenteditable="false" name="cc72" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 623px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 178%;"></div><img class="graf-image" data-image-id="1*iZ1Xv4a68TUsiWd1kUHtGg.gif" data-width="350" data-height="623" alt="Zombie walking&#8202;—&#8202;Phaser game in Ionic Capacitor, running in Android device" src="https://cdn-images-1.medium.com/max/800/1*iZ1Xv4a68TUsiWd1kUHtGg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Zombie walking&#8202;—&#8202;Phaser game in Ionic Capacitor, running in Android&nbsp;device</figcaption></figure><p name="2bf2" class="graf graf--p graf-after--figure">With these tweaks, the game looks like above. Not bad, huh. 👻</p><p name="4da3" class="graf graf--p graf-after--p">Cool thing is, you can still have the <strong class="markup--strong markup--p-strong">sidemenu</strong>, or <strong class="markup--strong markup--p-strong">tabs</strong> like a mobile app and put in all regular functionalities of the app in the game (or vice versa) like login, signup etc. making use of Ionic plugins.</p><h4 name="d3d8" class="graf graf--h4 graf-after--p">Space Invaders&nbsp;?</h4><p name="b4d9" class="graf graf--p graf-after--h4">Thinking of making your own PUBG or space invader game in Ionic&nbsp;? We have something for you&nbsp;! We have included Space Invader game in Ionic Capacitor Github repo&#8202;—&#8202;<a href="https://github.com/enappd/Ionic4-phaser"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Ionic-4-phaser </strong></a><strong class="markup--strong markup--p-strong">(SI_capacitor branch)</strong></p><figure tabindex="0" contenteditable="false" name="b1dc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 521px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 74.5%;"></div><img class="graf-image" data-image-id="1*JGdK9H4TECzyH-EbWxKdtw.gif" data-width="796" data-height="593" alt="Space Invaders in Ionic + Phaser&#8202;—&#8202;Using Capacitor" src="https://cdn-images-1.medium.com/max/800/1*JGdK9H4TECzyH-EbWxKdtw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Space Invaders in Ionic + Phaser&#8202;—&#8202;Using Capacitor in&nbsp;Browser</figcaption></figure><p name="0092" class="graf graf--p graf-after--figure">Run the code from the <code class="markup--code markup--p-code">SI_capacitor</code> branch of the repo, and you’ll get a cool Space Invader game app&nbsp;! Looks like this on Android device</p><figure tabindex="0" contenteditable="false" name="2993" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 621px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.4%;"></div><img class="graf-image" data-image-id="1*hUNSejP31GvFtq9rQ-pzwQ.gif" data-width="350" data-height="621" src="https://cdn-images-1.medium.com/max/800/1*hUNSejP31GvFtq9rQ-pzwQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Space Invaders in Ionic + Phaser&#8202;—&#8202;Using Capacitor in&nbsp;Android</figcaption></figure><h3 name="79db" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="142e" class="graf graf--p graf-after--h3">Ionic is super fast in making mobile apps, while Phaser is great for making 2D HTML5 games. Capacitor is a great run time environment to containerize web-apps to run on variety of platforms. Combining Ionic, Capacitor and Phaser, you can create some cool Game apps. You can always include the game in a regular Ionic Capacitor app as well, which makes it much more versatile.</p><blockquote name="7bf2" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">This demo is supported by </strong><a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic 4 Full App Starter</strong></a><strong class="markup--strong markup--blockquote-strong"> from Enappd. Complete source code of this tutorial is available in Github repo&#8202;—&#8202;</strong><a href="https://github.com/enappd/Ionic4-phaser"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic-4-phaser </strong></a><strong class="markup--strong markup--blockquote-strong">(ZMB_capacitor branch &amp; SI_capacitor branch)</strong></blockquote><p name="ffbd" class="graf graf--p graf-after--blockquote">We do more such fun stuff at <strong class="markup--strong markup--p-strong">Enappd</strong> on a regular basis. Feel free to browse through our <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">interesting app starters</a>.</p><h3 name="cb39" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="d7bd" class="graf graf--p graf-after--h3">Now that you have learned the implementation of Music playback in Ionic Capacitor app, you can also try following blogs for <strong class="markup--strong markup--p-strong">Ionic apps</strong></p><h4 name="ae21" class="graf graf--h4 graf-after--p">Ionic React Capacitor</h4><ul class="postList"><li name="38a4" class="graf graf--li graf-after--h4"><a href="https://enappd.com/blog/how-to-make-ionic-apps-in-react-using-capacitor/26"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">How to make basic apps in ionic-react</a>-capacitor</li><li name="e379" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/camera-and-gallery-in-ionic-react-app-using-capacitor/110"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Camera and Image gallery in Ionic-React-Capacitor</a></li><li name="22af" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/firebase-push-notification-in-ionic-react-capacitor/111"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Push notification in Ionic-React-Capacitor apps</a></li><li name="af53" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/play-music-in-ionic-capacitor-apps/112"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Playing Music in Ionic Capacitor apps</a></li><li name="516a" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/icon-splash-in-ionic-react-capacitor-apps/114"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Adding Icon and Splash in Ionic React Capacitor apps</a></li></ul><p name="e083" class="graf graf--p graf-after--li">If you need a base to start your next <strong class="markup--strong markup--p-strong">Ionic 4 React Capacitor app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-react-full-app-capacitor/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic React Full App</a></p><figure tabindex="0" contenteditable="false" name="5cfa" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="1*ofk4HAMnl1ZXyArf1TxZjQ.jpeg" data-width="600" data-height="600" alt="Ionic 4 React Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/1*ofk4HAMnl1ZXyArf1TxZjQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 React Full App with huge number of layouts and&nbsp;features</figcaption></figure><h4 name="bd6f" class="graf graf--h4 graf-after--figure">Ionic Angular</h4><ul class="postList"><li name="39ea" class="graf graf--li graf-after--h4">Ionic 4 Payment Gateways&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RazorPay</a></li><li name="8665" class="graf graf--li graf-after--li">Ionic 4 Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="fd9c" class="graf graf--li graf-after--li">Ionic 4 Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter</a></li><li name="31b6" class="graf graf--li graf-after--li">Ionic 4 Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="4a75" class="graf graf--li graf-after--li">Ionic 4 Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pedometer</a></li><li name="819d" class="graf graf--li graf-after--li">Media in Ionic 4&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Cropper</a></li><li name="eee3" class="graf graf--li graf-after--li">Ionic 4 Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="8bbe" class="graf graf--li graf-after--li">Ionic 4 messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a></li><li name="2467" class="graf graf--li graf-after--li">Ionic 4 with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><p name="2c47" class="graf graf--p graf-after--li">If you need a base to start your next <strong class="markup--strong markup--p-strong">Ionic 4 Angular app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="cc4a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" alt="Ionic 4 Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 Full App with huge number of layouts and&nbsp;features</figcaption></figure><p name="baa9" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>