Category: HTML5

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

NG Android, HTML5, Mobile, Phaser

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[…]

View More

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

NG Android, HTML5, Mobile, Phaser

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[…]

View More

Making of a Responsive Mobile Game App using Phaser: Introduction

NG Android, HTML5, Mobile, Phaser

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[…]

View More

Black Squares in place of sprite images on Mobile in a Phaser Game

NG HTML5, Mobile, Phaser

I am working on a new game which worked fine on desktop but the moment I opened it on Mobile, I was surprised to see black squares in place of sprite images in the game. After some troubleshooting it turned out that the tile sprite I was using in the game was quite long (around 4000 px) which mobile was not able to handle so the fix was to distribute the tile icons to multiple rows (I kept the width around 1200 px this time) which fixed the issue. Now everything looks just fine on mobile as well. Go Phaser..

View More

Path must be a string. Received undefined

NG Android, How to, HTML5, Intel XDK, Mobile

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[…]

View More

Add AdMob Ads to HTML5 Game using Intel XDK

NG Android, HTML5, Intel XDK, Plugin

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[…]

View More

Add Social Sharing Feature to HTML5 Game using Intel XDK

NG Android, HTML5, Intel XDK, Plugin

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[…]

View More

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

NG Android, HTML5, Intel XDK, Phaser

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[…]

View More

Integrate Kongregate’s JavaScript API in HTML5 Game to Submit High Score

NG HTML5, Kongregate

Though Kongregate’s API can be directly initialized in the main game’s HTML, the better way is to always create a Kongregate’s Shell which is nothing but another HTML file which you refer for running the game in stead of your default game’s HTML file. The Shell file in turn embeds your game’s default HTML file using an iFrame. Code for Shell HTML can be used from the code snippet below <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html lang=”en” xml:lang=”en” xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>Kongregate Game Shell</title> <!– Load the Kongregate Javascript API –> <script src=’https://cdn1.kongregate.com/javascripts/kongregate_api.js’></script> <!– Give the shell no border/scroll bars and match the Kongregate background color. If your game needs scrollbars, you might need to modify these styles –> <style type=”text/css”> html{border: none; overflow: hidden; background-color: #333;height: 100%;} body{border: none; background-color: #333;margin:0; padding:0;} </style> </head> <body> <script type=”text/javascript”> // Called when the API is finished loading function onLoadCompleted(){[…]

View More

Optimize/Minify HTML5 Game Assets

NG Framework, HTML5, Phaser

After I wrote Block Dominoes game I decided to look into optimization of the assets, compress whatever could be done and make the game as lightweight as it could be. I had designed and made the assets at a resolution of 1920×1080. The first logical step was to go search what other developers were doing and surprisingly 1920×1080 seemed quite a big resolution to choose for a game. There was an older discussion on  HTML5GameDevs.com which suggested using a lower resolution such as 320×480 which many devs have been using successfully.  I decided to go for half of what I initially designed so I reduced all game assets to half of the original size which was 960×540. The size of all graphical assets were reduced by 40% which was a very good saving. Interestingly there was no visible difference on look and feel of the game when I tested it on iPhone6, Nexus 5 and Lenovo[…]

View More