Latest Post

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

Disable Comments in a Single Post in WordPress

Recently I started getting hundreds of spam comments to a specific post and for a couple days I kept deleting it assuming it was a one time flood but those spam comments kept coming in hundreds everyday. I did not want to delete the post since it had a decent views so decided to look for ways to disable comments in only that specific post. The solution came pretty quickly and was already built-in the WordPress. All I had to do was to go to the posts and then click Quick Edit link which opened an inline edit box and there it was; the option to disable comments. Check for highlighted section below for the same

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

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..

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.  

How to Move WhatsApp Data to SD Card

With the increase of Video and Photo sharing on WhatsApp there has been a sudden requirement for more data storage space in phones. Phones have limited internal storage which fills up pretty soon with the amount of data being shared on WhatsApp. WhatsApp does not support storing data on SD card as specified on their FAQ page. This has more to do with technical limitations which leaves us only with the option to copy data from WhatsApp Media folders to SD card and then delete the data from the original location which in other words is a simple data backup task. Also, remember once you move the data from WhatsApp Media folder to SD card, the working link to those files in WhatsApp message history is not going to work anymore. You will need to access those files from other Video and Photo Viewer apps. In order to move data from WhatsApp we will need a File Explorer[…]

Repeating or Tiled Background in Phaser

Creating tiled or repeating background is pretty straight forward in Phaser by using tileSprite. Let say we have an image or a texture such as  which we want to use to create a background by repeating it in entire game area. Check out the highlighted line in the example below which is all that is required to create a nice tiled background in Phaser. var TheGame = { }; TheGame.Params = { baseWidth: 200, baseHeight: 200 }; TheGame.Boot = function (game) { }; TheGame.Boot.prototype = { init: function () { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; }, preload: function () { this.load.image(“background”, “repeatxy.png”); this.load.image(“loading”, “loadingback.png”); }, create: function () { this.state.start(“Loading”); } }; TheGame.Loading = function (game) { }; TheGame.Loading.prototype = { init: function () { }, preload: function () { var loadingBar = this.add.sprite(this.world.centerX, this.world.centerY, “loading”); loadingBar.anchor.setTo(0.5); this.load.setPreloadSprite(loadingBar); }, create: function () { this.state.start(“TheGame”); } }; TheGame.MyGame =[…]

How to Embed Google AdSense Code inside a WordPress Post without Any Plugin

WordPress does not let you embed PHP code inside the posts but uses a feature to create Shortcode functions which are executed whenever they are encountered within a post. This is pretty handy feature since this gives you capability to add some PHP code in your WordPress files and then call it from your posts. The PHP code can be added to Theme’s functions.php file. We can use this to load ads from within the posts. Go to WordPress administration -> Appearance -> Editor -> By default style.css is opened for editing. Open functions.php by clicking on the file name on right hand side listing. Now copy the following code at the end of the file and change the return string to your Adsense code. Shortcode is defined by calling add_shortcode function and passing two parameters to it. The first one is a given name which will be used in the posts to call this[…]

Mobile Apps

Responsive Bootstrap and JQuery Game Template for Mobile

For mobile web app templates, Jquery Mobile has been a popular choice but it comes with its own set of issues when we have multiple pages in the game since it makes ajax calls to load the pages and if there are specific things which are required to be handled on each page then it becomes even more complex to handle those scenarios. The alternate is to have a simple Bootstrap and JQuery based template with multiple pages which is simple and works just like a website. The problem here is that the pages are loaded again and again whenever we navigate from one page to another. This is not an ideal scenario for mobile web apps since all external libraries are required to be initialized on all pages which is not required and unnecessary work for processor. For example, if you compiled your web app using PhoneGap and are using a plugin to play audio.[…]