Latest Post

Quick Tip

Resize external website to fit in the iFrame

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

Quick Tip

Add borders in Puzzle games in Phaser 3

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.

How to add AdMob Reward Ads to Phaser 3 Game

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

How to fill “Data Safety” section on Google Play for AdMob?

If your app does not collect any user information, but uses Admob for advertisement in your Android app, you will still need to fill out the “Data Safety” section in your play store app listing. AdMob has provided some information on how to complete the “Data Safety” section in Play Store by providing information on end-user data collected by the Google Mobile Ads SDK. https://developers.google.com/admob/android/play-data-disclosure Though the information seems adequate, filling out form on Play Store still seems somewhat cumbersome task. Here is step-by-step details of what all should we be filling out in the “Data Safety” section. Start with first three questions, we need to select “Yes” for all. Click “Next” button to go to “Data types” page and answer further questions Nothing to be selected for following headers Personal info Financial info Health and fitness Messages Photos and videos Audio files Files and docs Calendar Contacts Nothing for[…]

Configure to use Adaptive Icons in Cordova

Adaptive icons require API 26 or above. We use a combination of legacy icons as well as adaptive icons to serve users who are using Android versions below 26 as well as those using 26 or above. Android will use Adaptive icons for API 26 or above and fallback to use legacy icons for devices with API below 26. For this tutorial we will create icon set using an online service https://easyappicon.com/. Create icon set using the service and download the set. You should see the icons in two folders; Android and iOS. For his tutorial we will use Android icon set. Go inside the folder and you would see folders as following Let us also create an Android app using Cordova as described in the previous article http://www.netexl.com/blog/use-cordova-to-compile-html5-games-to-android-app/ Create a new app by using the command as following A basic skeleton cordova project is created This is the bare[…]

Use Cordova to compile HTML5 games to Android App

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

Some good resources for web game development

Websites to compress images https://tinypng.com/ https://www.websiteplanet.com/webtools/imagecompressor/ Create spritesheets online for HTML5 games https://www.leshylabs.com/apps/sstool/ Create Android assets online https://romannurik.github.io/AndroidAssetStudio https://easyappicon.com/ Royalty free images / vectors https://pixabay.com/ https://publicdomainvectors.org/ Free custom icons https://www.iconsdb.com/ Online APK Analyzer https://www.sisik.eu/apk-tool Free Icons for Commercial Use https://iconarchive.com/ Generate CSS Sprites https://instantsprite.com/ Responsive CSS Sprite Maker https://responsive-css.spritegen.com/