NG | Tech Diary

Steps to add Play Games Services to HTML5/Cordova App

NG November 26, 2022 Android, Code, Cordova, How to, JavaScript, Mobile, Plugin, Useful

If you have made an HTML5 game and have compiled the game to an APK using Cordova and now want to add Play Games Services to your app to use Leaderboard and Achievements from Play Games Services, you need to follow a set of steps to make it work. If you want to learn how to use cordova to compile HTML5 game to an APK and publish to the Google Play Store, follow the steps @ http://www.netexl.com/blog/use-cordova-to-compile-html5-games-to-android-app/ Assuming that we have installed all tools for cordova on our system and can compile the game to the APK, we will follow next steps for the Play Games Services integration. First we need to find a cordova plugin which integrates the Play Game Services API and add it to our project. Go to NPM and search for the latest plugin for the Play Game Services integration. If you have not already created[…]

Randomly generate boolean in Javascript

NG November 23, 2022November 23, 2022 Code, How to, JavaScript

Mouse/Touch Events getting called twice on Mobile devices

NG November 19, 2022November 19, 2022 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.

Google Mobile Ads SDK Deprecation Timetable

NG October 12, 2022October 12, 2022 AdMob, Useful

With the release of a new major Google Mobile Ads SDK version, a deprecated major version may be given a sunset date, after which all SDKs with that major version will no longer serve ads. https://developers.google.com/admob/android/deprecation

Cordova App Error: The connection to the server was unsuccessful

NG September 29, 2022September 29, 2022 Android, Cordova, Issue

After migrating to cordova 11 when I created a new app with android-targetSdkVersion set to 32, some of the mobiles were giving this error The connection to the server was unsuccessful. (https://localhost/index.html). Following entries in config.xml helped fix this problem.

Migrate to cordova 11.0.0

NG September 29, 2022September 29, 2022 Android, Cordova

Google Play Store has updated the target API level requirements. All app submissions are required to target Android 12 (API level 31) or higher. Cordova developers also need to upgrade to cordova-android 11.0.0. Check out following link for cordova update instructions. http://www.netexl.com/blog/use-cordova-to-compile-html5-games-to-android-app/ Once we update to cordova version 11 there are a few dependencies which also need to be updated. Android SDK Build Tool version should be updated to min 32.0.0. Go to SDK Manager -> Android SDK -> SDK Tools (select show package details checkbox) and make sure 32.0.0 is installed. If not, select and install it. We also need to update java version to java 11 otherwise you will see an error as following when compiling the APK. Android Gradle plugin requires Java 11 to run. If its an old project, delete previous platform and add new by specifically specifying the version For new projects simply add the[…]

Resize external website to fit in the iFrame

NG February 23, 2022February 23, 2022 Code, How to, Quick Tip, Useful

I recently had to publish a game on my website which was written by another developer and was in public domain. My website was responsive and worked great for PC, tablet and mobile but this game came in a fixed size and was not responsive. It was using canvas which could not be resized inside an iFrame to fit in the available space so I looked for options to fit this game in my website layout and make it work for all devices (PC, tablet, mobile). The idea was to use something which would work similar to how mobile devices use viewport to fit the content in its browser. CSS3 comes with the support for scaling of iFrame content which works perfectly in my scenario so the embeded game/page is scaled down to fit in the iFrame. There is some computation required to scale the embeded page correctly. The article[…]

Add borders in Puzzle games in Phaser 3

NG February 22, 2022February 22, 2022 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.