Author: NG

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

Failed to remove a plugin from Intel XDK

NG Android, How to, Intel XDK, Plugin

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.  

View More

Repeating or Tiled Background in Phaser

NG How to, 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 =[…]

View More

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

NG Adsense, How to, WordPress

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

View More
Mobile Apps

Responsive Bootstrap and JQuery Game Template for Mobile

NG Bootstrap, jQuery, 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.[…]

View More

Cannot find type: verify that the assembly containing this type is loaded. (Exception from HRESULT: 0x80131515)

NG How to

Downloaded  HtmlAgilityPack.dll and loaded in Windows Powershell by running the following command Add-Type -Path ‘c:\Temp\PS\Net40\HtmlAgilityPack.dll’ Got the following error.. Add-Type : Could not load file or assembly ‘file:///C:\Temp\PS\Net40\HtmlAgilityPack.dll’ or one of its dependencies. Operation is not supported. (Exception from HRESULT: 0x80131515) At C:\Temp\PS\script.ps1:12 char:1 + Add-Type -Path ‘c:\Temp\PS\Net40\HtmlAgilityPack.dll’ + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + CategoryInfo : NotSpecified: (:) [Add-Type], FileLoadException + FullyQualifiedErrorId : System.IO.FileLoadException,Microsoft.PowerShell.Commands.AddTypeCommand   HtmlAgilityPack.dll does not have any dependency for the .Net version I was on (use the command $psversiontable to get the .Net version used by Powershell) It turned out that the file was blocked since it was downloaded from the internet. All I needed to do was to go to DLL’s properties and unblock it.

View More

Asp.Net Error: There is no build provider registered for the extension ‘.html’

NG Asp.Net, How to

When you try to map an html file in ASP.net and rewrite the URL to remove .html extension such as the example below routes.MapPageRoute(“myhtml”, “myhtml”, “~/Resources/demo/myhtml.html”); It throws an error as following There is no build provider registered for the extension ‘.html’. You can register one in the <compilation><buildProviders> section in machine.config or web.config The following configuration changes in web.config fixes it. <compilation debug=”true” targetFramework=”4.5″ > <buildProviders > <add extension=”.htm” type=”System.Web.Compilation.PageBuildProvider” /> <add extension=”.html” type=”System.Web.Compilation.PageBuildProvider”/> </buildProviders> </compilation>  

View More

Cordova Plugins: Review Unnecessary Permissions

NG Android, How to, Intel XDK, Plugin

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

View More