{"id":3457,"date":"2018-04-17T10:00:15","date_gmt":"2018-04-17T04:30:15","guid":{"rendered":"https:\/\/code4developers.com\/?p=3457"},"modified":"2018-04-16T20:57:38","modified_gmt":"2018-04-16T15:27:38","slug":"native-html5-games-with-phaser-and-capacitor","status":"publish","type":"post","link":"https:\/\/code4developers.com\/native-html5-games-with-phaser-and-capacitor\/","title":{"rendered":"Native HTML5 Games with Phaser and Capacitor"},"content":{"rendered":"<p>Building HTML5 games with Phaser has been somewhat of a hobby of mine over the past few years, and I will be writing a few tutorials about Phaser with a focus on developing HTML5 games for mobile. However, despite having created a few mostly finished games most of them never actually see the light of day.<!--more--><\/p>\n<p>I do love the idea of creating games with web tech (I love the idea of creating everything with web tech, really). The recent release of <a href=\"https:\/\/phaser.io\/phaser3\" target=\"_blank\" rel=\"noopener\">Phaser 3<\/a>, and of <a href=\"https:\/\/capacitor.ionicframework.com\/\" target=\"_blank\" rel=\"noopener\">Capacitor<\/a> (<em>and<\/em> a recent obsession with pixel art), has re-sparked my interest in building mobile games with web tech.<\/p>\n<p>Phaser 3 is the next-generation of frameworks for building mobile applications with web tech, but what this article is going to be about is combining that with <strong>Capacitor<\/strong>. We are going to talk a little bit about what Capacitor is and why we might want to use it in just a second.<\/p>\n<p>In this article, I am going to introduce you to a starter template I\u2019ve put together for a <strong>Phaser 3<\/strong> project that uses <strong>TypeScript<\/strong>, is built using <strong>Webpack<\/strong>, and includes <strong>Capacitor<\/strong> for native builds. The starter template has some demo code set up, so we will end up with a little demo game that looks like this:<\/p>\n<p><img  loading=\"lazy\"  decoding=\"async\"  data-attachment-id=\"3460\"  data-permalink=\"https:\/\/code4developers.com\/native-html5-games-with-phaser-and-capacitor\/phaser-starter-demo-gif\/\"  data-orig-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/phaser-starter-demo-1.gif?fit=426%2C322&amp;ssl=1\"  data-orig-size=\"426,322\"  data-comments-opened=\"1\"  data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\"  data-image-title=\"phaser-starter-demo.gif\"  data-image-description=\"\"  data-image-caption=\"\"  data-medium-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/phaser-starter-demo-1.gif?fit=300%2C227&amp;ssl=1\"  data-large-file=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/phaser-starter-demo-1.gif?fit=426%2C322&amp;ssl=1\"  class=\" wp-image-3460 aligncenter pk-lazyload\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"phaser-starter-demo\"  width=\"357\"  height=\"270\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"auto, (max-width: 357px) 100vw, 357px\"  data-pk-src=\"https:\/\/code4developers.com\/wp-content\/uploads\/2018\/04\/phaser-starter-demo-1-300x227.gif\"  data-pk-srcset=\"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/phaser-starter-demo-1.gif?resize=300%2C227&amp;ssl=1 300w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/phaser-starter-demo-1.gif?resize=120%2C90&amp;ssl=1 120w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/phaser-starter-demo-1.gif?resize=90%2C68&amp;ssl=1 90w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/phaser-starter-demo-1.gif?resize=320%2C242&amp;ssl=1 320w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/phaser-starter-demo-1.gif?resize=240%2C181&amp;ssl=1 240w, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/phaser-starter-demo-1.gif?resize=180%2C136&amp;ssl=1 180w\" ><\/p>\n<h2 id=\"what-is-capacitor\">What is Capacitor?<\/h2>\n<p>Capacitor is a tool that the Ionic team recently released, and the easiest way to think about it is as a substitute for Cordova. It was built with Ionic in mind, but it is not in any way specific to Ionic (you can use it with any web-based code). I don\u2019t want to dive too much into the project and its goals here, because I have already covered that <a href=\"https:\/\/code4developers.com\/capacitor-new-native-bridge-web-apps\/\">in another blog post<\/a>. The main point is that Capacitor allows us to package up web code into a native application, and provides us with access to Native APIs.<\/p>\n<p>The cool thing about Capacitor is that rather than just being a tool for getting your web code running on native devices, it is aiming to be a run time that allows your application to run just about <em>anywhere<\/em>. This means it would be possible to create a game using Phaser that you could run as:<\/p>\n<ul>\n<li>A standard website<\/li>\n<li>A Progressive Web Application (with offline support)<\/li>\n<li>A Native iOS Application<\/li>\n<li>A Native Android Application<\/li>\n<li>A Desktop Application (with Electron)<\/li>\n<\/ul>\n<p>Designing a game that works seamlessly across multiple different device sizes\/resolutions isn\u2019t an easy task, but this tech stack will make that possible and as easy as it possible <em>could<\/em> be. Aside from the lofty goal of building a game that works on every platform from a single codebase, there are other advantages to using Capacitor that haven\u2019t been fully addressed in the past:<\/p>\n<ul>\n<li>Issues with WKWebView and running Phaser games don\u2019t seem to be a problem now. Having to rely on UIWebView (a less performance mobile browser) previously was not ideal for games.<\/li>\n<li>It is very quick and easy to set up Capacitor in a Phaser project<\/li>\n<li>The local development workflow with Capacitor is easy to work with (but does require you to have Native SDKs configured on your machine)<\/li>\n<li>Using Capacitor for native builds is entirely free<\/li>\n<\/ul>\n<p>Overall, it finally just feels like a solution where the tech stays out of your way and you can just focus on building the game.<\/p>\n<h2 id=\"phaser-typescript-webpack-capacitor-starter-template\">Phaser\/TypeScript\/Webpack\/Capacitor Starter Template<\/h2>\n<p>As well as Capacitor, I\u2019ve also come to enjoy working in a TypeScript environment too much to not use it now. Phaser does not use TypeScript by default, and it is a bit tricky to set up, but once it\u2019s done it\u2019s done and you are free to work with TypeScript as you usually would.<\/p>\n<p>I wanted to set something up that was configured with everything you need by default and handled the build process for you. So, I put together this starter template to do just that. I had help from a lot of sources in creating this template, including the official Phaser documentation and random threads on StackOverflow. These two repositories, in particular, were a great help in deciding on configuration and project structure:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/digitsensitive\/phaser3-typescript\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/digitsensitive\/phaser3-typescript<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/TooManyCaptains\/TooManyCaptains\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/TooManyCaptains\/TooManyCaptains<\/a><\/li>\n<\/ul>\n<h2 id=\"installing-the-starter\">Installing the Starter<\/h2>\n<p>In order to install the <a href=\"https:\/\/github.com\/arifkhoja\/Phaser-TypeScript-Webpack-Capacitor-Starter\" target=\"_blank\" rel=\"noopener\">starter<\/a>, you should run the following command to clone the repository:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">git clone https:\/\/github.com\/arifkhoja\/Phaser-TypeScript-Webpack-Capacitor-Starter.git my-game<\/pre>\n<p>Then you will need to make it your working directory:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">cd my-game<\/pre>\n<p>and install the dependencies:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">npm install<\/pre>\n<p>Once the dependencies have been installed, you will need to initialize your Capacitor project:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">npx cap init<\/pre>\n<p>Throughout development, you can use:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">npm run dev<\/pre>\n<p>to run your game. When you are ready to build for production, you can run:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">npm run build<\/pre>\n<p>This will handle generating the <code>www<\/code> folder that will contain the web code for Capacitor to natively package, and it will also copy the web code into the native projects if you have the appropriate platforms added. To add platforms to your project, just run:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">npx cap add ios\r\n\r\nnpx cap add android\r\n\r\nnpx cap add electron<\/pre>\n<p>Native builds with Capacitor are handled locally using the native tools for the platform (XCode for iOS, Android Studio for Android). You can open your project in the appropriate environment with:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">npx cap open ios<\/pre>\n<p>or<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\">npx cap open android<\/pre>\n<p>From there, you can run or build the application as you would any other native mobile application project.<\/p>\n<h2 id=\"summary\">Summary<\/h2>\n<p>The starter project has some default code supplied that enforces some opinions on how you should go about building the application, but these are just my preferences. You do not need to follow the supplied structure and are free to change it up however you want. I find it useful to separate entities like that \u201cPlayer\u201d out into their own classes, but that\u2019s entirely up to you. Just keep in mind that both Phaser 3 and Capacitor are not officially complete yet, so you may run into some bugs or missing documentation if you use this for a project.<\/p>\n<h3 id=\"what-to-read-next\">What to read next&#8230;<\/h3>\n<ul>\n<li>\n<h4 id=\"capacitor-a-new-native-bridge-for-web-apps\"><a href=\"https:\/\/code4developers.com\/capacitor-new-native-bridge-web-apps\/\">Capacitor &#8211; A New Native Bridge for Web Apps<\/a><\/h4>\n<\/li>\n<li>\n<h4 id=\"ionic-project-structure-and-installation\"><a href=\"https:\/\/code4developers.com\/ionic-project-structure-installation\/\">Ionic Project Structure and Installation<\/a><\/h4>\n<\/li>\n<li>\n<h4 id=\"benefits-of-creating-progressive-web-apps\"><a href=\"https:\/\/code4developers.com\/benefits-of-creating-progressive-web-apps\/\">Benefits of Creating Progressive Web Apps<\/a><\/h4>\n<\/li>\n<li>\n<h4 id=\"webpack-introduction-without-any-code\"><a href=\"https:\/\/code4developers.com\/webpack-introduction-without-code\/\">Webpack: introduction without any code<\/a><\/h4>\n<\/li>\n<li>\n<h4 id=\"css-keylogger\"><a href=\"https:\/\/code4developers.com\/css-keylogger\/\">CSS Keylogger<\/a><\/h4>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Building HTML5 games with Phaser has been somewhat of a hobby of mine over the past few years, and I will be writing a few tutorials about Phaser with a&hellip;<\/p>\n","protected":false},"author":7,"featured_media":3464,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[158],"tags":[147,144,155,52,154,141,146,122,80,153,157,156,67],"powerkit_post_featured":[],"class_list":{"0":"post-3457","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-phaser","8":"tag-android","9":"tag-capacitor","10":"tag-games","11":"tag-html","12":"tag-html5","13":"tag-ionic","14":"tag-ios","15":"tag-native-script","16":"tag-node","17":"tag-phaser","18":"tag-phaser3","19":"tag-typescript","20":"tag-webpack"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/phaser.jpg?fit=242%2C208&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-TL","jetpack-related-posts":[{"id":3412,"url":"https:\/\/code4developers.com\/capacitor-new-native-bridge-web-apps\/","url_meta":{"origin":3457,"position":0},"title":"Capacitor &#8211; A New Native Bridge for Web Apps","author":"Arif Khoja","date":"April 7, 2018","format":false,"excerpt":"A short while ago, the Ionic team announced that they were working on a project called \u201cAvocado\u201d which later took on its official moniker of Capacitor. In this article, I want to introduce you to Capacitor and what it will do. I will get into the specifics soon (and we\u2026","rel":"","context":"In &quot;Ionic&quot;","block_context":{"text":"Ionic","link":"https:\/\/code4developers.com\/category\/ionic\/"},"img":{"alt_text":"Catch","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/Screenshot-2018-02-07-12.11.05-300x26.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/Screenshot-2018-02-07-12.11.05-300x26.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/Screenshot-2018-02-07-12.11.05-300x26.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/Screenshot-2018-02-07-12.11.05-300x26.png?resize=700%2C400 2x"},"classes":[]},{"id":3757,"url":"https:\/\/code4developers.com\/bootstrap-basics-for-beginners\/","url_meta":{"origin":3457,"position":1},"title":"Bootstrap basics for beginners","author":"Patel Harsh","date":"July 2, 2018","format":false,"excerpt":"Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. In this article we will discuss about basics of bootstrap. Bootstrap: Bootstrap is a free front-end framework for faster and easier web development It includes HTML and CSS based design templates for\u2026","rel":"","context":"In &quot;HTML\/Stylesheet&quot;","block_context":{"text":"HTML\/Stylesheet","link":"https:\/\/code4developers.com\/category\/htmlstylesheet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/Boostrap_logo.svg_.png?fit=200%2C201&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":12589,"url":"https:\/\/code4developers.com\/how-to-build-an-inclusive-esports-community\/","url_meta":{"origin":3457,"position":2},"title":"How to Build an Inclusive Esports Community","author":"Code4Developers","date":"August 6, 2020","format":false,"excerpt":"Community first, competition second.\u00a0That\u2019s the philosophy driving the inclusive esports and gaming initiatives at DreamYard, a Bronx, New York, organization that partners with local schools to help students achieve success through the arts. In November the organization, which also operates DreamYard Preparatory High School, launched \u201cBX Start,\u201d a 4,000-square-foot gaming\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3225,"url":"https:\/\/code4developers.com\/why-progressive-web-apps\/","url_meta":{"origin":3457,"position":3},"title":"Why Progressive Web Apps?","author":"Yatendrasinh Joddha","date":"February 12, 2018","format":false,"excerpt":"What if I tell you, by creating a website\/webapp you can fulfill the requirement of having mobile application. Yes, that\u2019s true, the concept of creating such an app is called Progressive Web Apps. They called it Progressive because it builds with the core principle of Progressive Enhancement. In this article\u2026","rel":"","context":"In &quot;Progressive Web Apps&quot;","block_context":{"text":"Progressive Web Apps","link":"https:\/\/code4developers.com\/category\/progressive-web-apps\/"},"img":{"alt_text":"PWA","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/02\/what-is-pwa-img.png?fit=1200%2C806&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/02\/what-is-pwa-img.png?fit=1200%2C806&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/02\/what-is-pwa-img.png?fit=1200%2C806&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/02\/what-is-pwa-img.png?fit=1200%2C806&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/02\/what-is-pwa-img.png?fit=1200%2C806&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":2674,"url":"https:\/\/code4developers.com\/pick-your-programming-language\/","url_meta":{"origin":3457,"position":4},"title":"Pick Your Programming Language","author":"Pawan Ingale","date":"June 27, 2017","format":false,"excerpt":"In the IT industry, new technologies are emerging fast. Staying ahead of everyone in the tech market it is very important for every programmer, with changing necessities and new in-demand programming languages for the next years. So here is the list of some technologies which a programmer can choose to\u2026","rel":"","context":"In &quot;Programming&quot;","block_context":{"text":"Programming","link":"https:\/\/code4developers.com\/category\/programming\/"},"img":{"alt_text":"Programming Languages","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1-3.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1-3.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1-3.png?resize=525%2C300 1.5x"},"classes":[]},{"id":2551,"url":"https:\/\/code4developers.com\/benefits-of-creating-progressive-web-apps\/","url_meta":{"origin":3457,"position":5},"title":"Benefits Of Creating Progressive Web Apps","author":"Yatendrasinh Joddha","date":"June 4, 2017","format":false,"excerpt":"Progressive Web Apps (PWA) are a concept of creating a Web site in such a way that it will behave and look like an application. Progressive Web Apps are created to fill the gap between mobile Applications and the Website. Key benefits No app store submission requirements It is quite\u2026","rel":"","context":"In &quot;Progressive Web Apps&quot;","block_context":{"text":"Progressive Web Apps","link":"https:\/\/code4developers.com\/category\/progressive-web-apps\/"},"img":{"alt_text":"PWA","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/02\/what-is-pwa-img.png?fit=1200%2C806&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/02\/what-is-pwa-img.png?fit=1200%2C806&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/02\/what-is-pwa-img.png?fit=1200%2C806&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/02\/what-is-pwa-img.png?fit=1200%2C806&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/02\/what-is-pwa-img.png?fit=1200%2C806&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3457"}],"version-history":[{"count":6,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3457\/revisions"}],"predecessor-version":[{"id":3467,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3457\/revisions\/3467"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3464"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3457"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}