Category: HTML5

Mouse/Touch Events getting called twice on Mobile devices

NG Code, HTML5, Issue, JavaScript, Mobile

I recently wrote a HTML5 webgame utilizing simple canvas apis and added both mouse events and touch events to make sure it can be played on both desktop as well as mobile devices which led to the issue on mobile where touch events were getting called twice and not just once. The code I used to add events was as following It seemed like mouse events were geting called in addition to the touch events. After debugging this issue for hours and trying many suggestions found online, nothing worked so I switched to simply add only one set of events based on the device type. If it is mobile, call touch events and if it is desktop, call mouse events. Here is the modifed code I used which is wroking perfectly on both mobile and desktop devices.

View More
Quick Tip

Add borders in Puzzle games in Phaser 3

NG Code, HTML5, JavaScript, Phaser, Quick Tip

In puzzle games where we need to add borders to our puzzles and mark various zones, we can use Phase Path to draw those lines. For this example we are going to draw something like the image below Let us start by creating our html file and including Phaser 3 js and our game js in it. Now our JS code for would be Try running this locally in your web server and you will see the result as shown in the screenshot.

View More

How to add AdMob Reward Ads to Phaser 3 Game

Admin AdMob, Android, Cordova, How to, HTML5, JavaScript, Mobile, Phaser, Plugin

We will be using corodva to compile a Phaser 3 Game to Android App. We are going to go over step by step description of how to implement Admob Reward Ads to our game. Let us start by creating a Phaser Game. For simplicity we will not have any game code in it but only a butoon to launch reward ads. Create the cordova project by using the following command in Node.js console. Refer to this blog to go over basic steps to compile an HTML5 game to Android app. We are going to use Admob Plus cordova plugin for implementing Admob ads in our game. Add plugin by using the command below. Make sure to replace App ID with your App ID in AdMob console. You need to create an App for your Android app and then create a Reward ad for that app which will be used here.[…]

View More

Use Cordova to compile HTML5 games to Android App

Admin Android, Cordova, How to, HTML5, Mobile, Useful

Install npm and cordova https://docs.npmjs.com/downloading-and-installing-node-js-and-npm It is also useful to insall nvm which is node version manager to manage different versions of node.js. For windows the installable can be downloaded from here https://github.com/coreybutler/nvm-windows/releases check version of node, npm and, cordova using the commands as following Once nvm is installed it can be used to check for installed version of node by using the command On windows use following command to see available versions on node If a higher version of node is available it can be installed by specifying the version as following Configure the system to use the installed version of node now Cordova install and update Update npm to the latest version by specifying the version number All of the above commands are specified to make sure that we have latest version of node, npm, nvm, cordova installed before we start creating packages for our HTML5 game. Version[…]

View More
Quick Tip

Remote debugging HTML5 games on Android using Chrome DevTools

NG Android, How to, HTML5, Mobile

Steps – Enable your Android device for debugging. For this go to settings on your mobile device -> Developer Options -> Enable USB debugging Now go to your PC/Mac and launch Chrome browser. Open DevTools by hitting F12. In DevTools open Remote Devices. Make sure you have “Discover USB devices” option checked here. Alternatively, simply type chrome://inspect/#devices in the chrome browser Now connect your mobile device to Mac/PC using USB cable. You should now see you device listed under devices section Now go to your mobile device and open the app your are trying to debug. Once app is running in mobile, go back to chrome browser on your Mac/PC and click on the device name to see all running browser as well as webview instances on your mobile. Simply click on “Inspect” button to luanch chrome tab for your app. You can continue to browser your app on mobile[…]

View More

WebGL: INVALID_VALUE: vertexAttribPointer: index out of range

NG Android, Cordova, HTML5, Issue, JavaScript, Mobile, Phaser

I tried to update a game which was using last official relase of Phaser CE 2.6.2 compiled with cordova to the latest version (2.12.0) and started seeing below error in some mobile devices WebGL: INVALID_VALUE: vertexAttribPointer: index out of range There were hundreds were such errors logged and webview declined to log any further errors. Reverting it back to 2.6.2 fixes the problem. Looked for fixes in Phaser forums but did not find anything of help so reverted it back to 2.6.2. Seems like its going to be like that until we get regressively tested newer CE versions available.

View More