Making of a Responsive Mobile Game App using Phaser: Game Screen

In previous article I fixed the resolutions I wanted to use for my game, the next step was to set up the game screen and placing the controls on the screen. This is very similar to how it was done for RESIZE mode but for the continuation of this article I will demonstrate the first screen of the game which will give good idea about other screens as well. Then I will focus on the optimization which I am going to try to improve the overall performance of the game on mobile devices. First thing I do is to fix the area for individual controls so that we can calculate its size and give maximum space available on mobile device. The layout I chose for first screen of my game is something like below Look at the percentage values. The selected orientation for my game is going to be Landscape. Top 30% area heightwise is[…]

Making of a Responsive Mobile Game App using Phaser: Calculation for Game Size

In my introductory article on this series I talked about using SHOW_ALL scale mode for my game which fits perfectly for need to be responsive. It will resize the game to fit into available space using the original aspect ratio which was used to develop the game. The only issue I saw was the “letter-boxing” effect so if device’s aspect ratio was different than the game’s aspect ratio, there will be blank space around either horizontal edges or vertical edges. We can account for that extra available space when loading new game and positioning of all ui controls can then be done relative to available space which is similar to how we handled RESIZE scale mode. The only difference here is that it can only be done once in SHOW_ALL scale mode when the game is initialized. In mobile app this is not going to be a problem and we can[…]

Making of a Responsive Mobile Game App using Phaser: Introduction

In my previous posts on responsive Phaser game (part1, part2, part3) I used RESIZE scale mode for making game reponsive. RESIZE mode needed quite some handling whenever screen was resized. For example position of individual controls were required to be recalculated. Moving tweens were also something which required special handling on resize. It serves better for desktop games in which you can support different aspect ratios. I planned to compile and publish my next game to Android play store which made me also look into SHOW_ALL scale mode. SHOW_ALL handles resizing automatically and does not have a resize method for moving controls around on resize. The only limitation is that it fixes the aspect ratio of the game canvas and when game screen is resized, it resizes game canvas in the same aspect ratio. It might be a problem for desktop games where browser window can be resized to any proportion but mobile[…]

Path must be a string. Received undefined

It has been a couple months since I last used Intel XDK and a lot has changed since. I just tried to compile a demo HTML5 + Cordova Android app which was exported using Intel XDK version 3987 and got the following error while trying to add android platform to the app using cordova command line. To see how compiling is done, check this blog post. Discovered plugin “cordova-plugin-whitelist” in config.xml. Adding it to the project Installing “cordova-plugin-whitelist” for android This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in. Saved plugin info for “cordova-plugin-whitelist” to config.xml Error: Path must be a string. Received undefined After this error you wont be able to compile the APK. Some research on google got me to this thread which eventually worked. https://stackoverflow.com/questions/46730465/can-not-add-cordova-platform-on-cordova-7-1-0-path-must-be-a-string To fix[…]

Failed to remove a plugin from Intel XDK

In the latest Intel XDK version 3987 I was not able to remove the third-party plugins from HTML5 + Cordova app. Whenever I try to remove a plugin, it failed with the error message Uh oh! Path much be a string. Received undefined I found a workaround @ https://software.intel.com/en-us/forums/intel-xdk/topic/733620 Since Intel XDK is no more into development phase, I think this is the only way as long as this works. Steps are simple. Go to development tab and expand plugins folder there. Delete the third-party plugin and all dependent plugins. Also, delete fetch.json. Then go to Projects tab and delete the plugin from there under Plugin Management. Finally restart XDK.  

Cordova Plugins: Review Unnecessary Permissions

If you went through the article on adding social sharing feature in HTML5 game using Intel XDK, it seemed like a simple plugin which should not require any permission but after adding the plugin and few more other plugins I found that WRITE_EXTERNAL_STORAGE permission was added in my android app so I checked all plugins one by one to see which plugin is adding what permissions and found out that WRITE_EXTERNAL_STORAGE permission was being added by social sharing plugin. When I checked developer notes (quoted below) I found that the permission was not required in my case, since I was not fetching any remote images for sharing. For sharing remote images (or other files) on Android, the file needs to be stored locally first, so add this permission to AndroidManifest.xml: <uses-permission android:name=“android.permission.WRITE_EXTERNAL_STORAGE“ /> In fact it was just a simple play store URL which I was sharing in my app so[…]

Add AdMob Ads to HTML5 Game using Intel XDK

The steps are as following Open your app in Intel XDK and go to CORDOVA HYBRID MOBILE APP SETTINGS section Click on “Add Plugins to this project” and search for the plugin “cordova-plugin-admob-free” in npm. Click “Add Plugin” which adds plugin to the project. Open your index.html and add following code <script> document.addEventListener(“deviceready”, onDeviceReady, false); function onDeviceReady() { initAd(); showBannerFunc(); } //initialize the goodies function initAd(){ admob.banner.config({ id: ‘ca-app-pub-3940256099942544/6300978111’, adSize: window.plugins.AdMob.AD_SIZE.BANNER }); admob.interstitial.config({ id: ‘ca-app-pub-3940256099942544/1033173712’, autoShow: false }); // Create banner admob.banner.prepare() } //display the banner function showBannerFunc(){ admob.banner.show(); } //prepare the interstitial function prepareInterstitialFunc(){ admob.interstitial.prepare(); } //display the interstitial function showInterstitialFunc(){ admob.interstitial.show(); } </script> Replace banner and interstitial ad code id with yours. The code in the example is given by Google to test the ads which displays placeholder ads for testing. This can be used during development and testing. Replace it with your ad codes for release. Another thing to note here[…]

Add Social Sharing Feature to HTML5 Game using Intel XDK

If you have gone through previous post in which we discussed about using Intel XDK to compile HTML5 games to Android apps, next steps are to add features which are quite necessary for every Android app such Social Sharing option. There are many open source plugins available to add Social Sharing feature to your app and it takes no more than a few minutes of effort to integrate this feature and get it working. The steps are as following Open your app in Intel XDK and go to CORDOVA HYBRID MOBILE APP SETTINGS section Click on “Add Plugins to this project” and search for the plugin “cordova-plugin-x-socialsharing” in npm. Click “Add Plugin” which adds plugin to the project. Open your index.html and add following code <script> function share(){ window.plugins.socialsharing.share(‘Sample’, null, null, ‘https://play.google.com/store/apps/details?id=com.html5games.sample’); } </script> Replace title and URL of the Android app in the code. And that is it. Now the share[…]

Compile Phaser Games (or any other HTML5 Game) as Android Store App using Intel XDK

Intel XDK has long supported development and compilation of HTML5 games for Android, iOS and Windows store. It even provided a cloud based build system which took care of preparation of final packages which could be directly published to respective Android, iOS and Windows stores but starting from July 2017, Intel XDK build system has been shut down and new versions of Intel XDK do not have Game templates anymore. Still the tool is very useful for compiling your HTML5 games for Android, iOS and Windows stores. We are going to look at steps to compile HTML5 game for Android in this tutorial. Step 1 – Download and install Intel XDK. Step 2 – Create a new project using Blank HTML5 + Cordova template. Select “HTML5 + Cordova” and Click “Continue” which open a dialog box for specifying Project Name and Directory. We are going to use Dice Roller example code[…]