Author: NG

Symbolicate iOS App Analytics Data

NG How to, iOS

When a crash happens in an app, and we get un-symbolicated logs from a remote user, we need to first symbolicate it in order to find out exact reason of the crash. We need following items in in order to symbolicate a crash log Log file – This file can be taken from the real device on which app crashed. .app file – Download archive file (.ipa) to a folder and rename it to .zip. Unzip content and copy .app file. dSYM File – This file can be retreived from the app ipa file. Open XCode -> Window -> Organizer -> Find the Archive file, right click on the Archive file and click “Show in Finder” which will open .xcarchive file in finder. Right click on .xcarchive and click “Show Package Contents”. Go to dSYMs folder and copy dSYM file for the archive. Create a new folder on your mac and[…]

View More

GADInvalidInitializationException: The Google Mobile Ads SDK was initialized incorrectly.

NG Cordova, iOS, Issue

While running a cordova app for iOS, if following error is thrown *** Terminating app due to uncaught exception ‘GADInvalidInitializationException’, reason: ‘The Google Mobile Ads SDK was initialized incorrectly. Google AdMob publishers should follow instructions here: https://googlemobileadssdk.page.link/admob-ios-update-plist to include the AppMeasurement framework, set the -ObjC linker flag, and set GADApplicationIdentifier with a valid App ID. Google Ad Manager publishers should follow instructions here: https://googlemobileadssdk.page.link/ad-manager-ios-update-plist’ Make sure to include following values in your info.plist <key>GADIsAdManagerApp</key> <true/> <key>GADApplicationIdentifier</key> <string>REPLACE_YOUR_ADMOB_APP_ID</string>

View More
Quick Tip

How to choose a category when submitting app in Samsung seller office

NG Android, Mobile

If you are trying to upload an APK to Samsung seller office and you are seeing two categories as following Main Category Galaxy Specials If you leave it to Main Category, it won’t let you submit the APK for approval. If you select “Galaxy Specials” then you may get following error The registered binaries do not meet the category conditions for GALAXY Specials. The GALAXY Specials category can be selected only if at least one binary supports GALAXY Specials. You can go to ‘Binary>Advanced Mode>Binary Details’ to check the supported GALAXY Specials options. If you are trying to upload the saem APK which you uploaded to Google Play store, it will not work. Simply add following line to your manifest.xml and and build APK again. <uses-permission android:name=”com.samsung.android.providers.context.permission.WRITE_USE_APP_FEATURE_SURVEY” /> Now you can simply select “Galaxy Specials” as the category and submit your app.

View More
Quick Tip

Add Phaser 2 style buttons in Phaser 3

NG How to, JavaScript, Phaser, Quick Tip

Phaser 2 had a very convenient way of adding buttons to a state. Phaser 3 has got rid of those buttons but if we want to keep the habit of adding buttons in Phaser 3 scenes like we used to in Phaser 2, following lines will help achieve it. Phaser.Scene.prototype.addButton = function (x, y, key, callback, callbackContext, overFrame, outFrame, downFrame) { // add a button let btn = this.add.sprite(x, y, key, outFrame).setInteractive(); btn.on(‘pointerover’, function (ptr, x, y) { this.setFrame(overFrame); }); btn.on(‘pointerout’, function (ptr) { this.setFrame(outFrame); }); btn.on(‘pointerdown’, function (ptr) { this.setFrame(downFrame); }); btn.on(‘pointerup’, callback.bind(callbackContext, btn)); return btn; }; Above piece of code can now be used var button = this.addButton(100, 100, ‘buttons’, this.clickButton, this, overFrame, outFrame, downFrame); clickButton event can be defined as following clickButton(button) { // use this to access scene // button is also available as the first param }  

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

Fullscreen in Phase 3

NG HTML5, JavaScript, Phaser

Phaser 3 also has the full support for fullscreen mode. Resizing a game to fullscreen is quite simple as shown in the code below. We are going to add a button to resize the game to fullscreen and then switch the button which will revert fullscreen mode to normal screen mode. We have updated icons sprite as following Changes from previous code is marked below let loadGame = function () { let config = { type: Phaser.AUTO, scale: { parent: ‘mygame’, mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: window.innerWidth, height: window.innerHeight }, backgroundColor: 0xFF0000, scene: TheGame } let game = new Phaser.Game(config); }; if (document.readyState === “complete” || (document.readyState !== “loading” && !document.documentElement.doScroll)) { loadGame(); } else { document.addEventListener(“DOMContentLoaded”, loadGame); } class TheGame extends Phaser.Scene { constructor() { super(“TheGame”); } preload() { this.load.spritesheet(“pegs”, “images/pegs.png”, { frameWidth: 60, frameHeight: 60 }); this.load.spritesheet(“icons”, “images/icons.png”, { frameWidth: 128, frameHeight: 128 }); } create() { this.boardDef = [ [-1,[…]

View More

Exploring RESIZE Scale Mode in Phaser 3

NG HTML5, JavaScript, Phaser

We explored FIT scale mode in previous article. We already did most of the base work for calculating and scaling sprites and texts and respositioning them in the scene view area so let see how much of additional code do we need to add in order to change our game from FIT to RESIZE scale mode. First we need to change game config as following let config = { type: Phaser.AUTO, scale: { parent: ‘mygame’, mode: Phaser.Scale.RESIZE, width: ‘100%’, height: ‘100%’ }, backgroundColor: 0xFF0000, scene: TheGame } let game = new Phaser.Game(config); Now we need to add a resize event in our create method as following this.scale.on(‘resize’, this.resize, this); Create resize method as following resize(gameSize, baseSize, displaySize, resolution) { let width = gameSize.width; let height = gameSize.height; this.cameras.resize(width, height); this.positionControls(width, height); } In resize method we retrieve width and height of the game from “gameSize”. We will reposition the controls by simply[…]

View More