Quick Tip

Download iPhone Crash Log to PC

Following are the steps – Install iTunes on your PC. Connect your iPhone to your PC using its USB cable. Open iTunes. It will automatically recognize your iPhone. Click “iPhone” under “Devices.” Click the “Sync” button in the bottom right corner of the window. This will transfer all iPhone crash logs to your PC. Go to C:\Users\<User Name>\AppData\Roaming\Apple Computer\Logs\CrashReporter\MobileDevice. This will have a folder with your phone’s name. Go to your phone folder and then look for the app name whose crash log you are looking for.

Symbolicate iOS App Analytics Data

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

Quick Tip

Replace White Background in Cordova iOS Mobile App with a Hex Color Background

If you have gone thorugh this article, we replaced white background with black background. In order to change the background color to a color of our choosing, we can use the code snippent below in MainViewController.m

 

Quick Tip

Add Phaser 2 style buttons in Phaser 3

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.

Above piece of code can now be used

clickButton event can be defined as following

 

Quick Tip

Remote debugging HTML5 games on Android using Chrome DevTools

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. 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 and check for errors/messages etc in the[…]

Use textarea in Phaser Game

In order to use textboxes in canvas we can use html input components and position them over the canvas. I recently had a requirement to display a message board resembling “textarea” in a Phaser game. The game was responsive so it also required repositioning and resizing of the textarea. I am posting bare minimum code to achieve this fuctionality here. Add following html

We have added a textarea which is hidden initially. We will display this component after resizing and repositioning inside the game. Now add css as following in app.css

We can customize scrollbar styles to make it look nicer using webkit scrollbar properties. You can change these styles to match your game. This works on chrome and safari. Other browsers do not support these properties but you can still stylize it using normal css styles to match your game. Now add the game code as following

[…]

Quick Tip

Shun window.onload in HTML5 games

A lot of javascript developers have been using window.onload casually in their code but this is something which we should completely avoid since window.onload is only called once and if there are multiple window.onload events, then only the last onload event gets called. In our Phaser games we normally initialize the game as following

window.onload is called after the main HTML, all CSS files, images and other resources have been loaded and rendered. We don’t want to stall loading of the game and its resources until everything else on the page has been loaded and rendered so as soon as initial HTML document has been loaded and parsed, we can start loading our game without waiting for page stylesheets, images, etc to finish loading. An alternate approach for this using vanilla javascript would be

This starts loading the game as soon as HTML DOM is parsed and ready and no fear of having to change[…]

Add Link to Rating Feature in Windows UWP App

In oder to add a link to rate your app following code can be used in javascript UWP app

Replace storeID with your app’s Store ID and call “rate” method on a button click event which will open the app in windows store with rate popup overlay.

App Promotion Trick for Windows Store App

If you are a publisher who has published multiple UWP apps in the windows store and want to add a catalog of all your other apps in your UWP app, then there is no need to write a lot of code to achieve this capability. Microsoft has provided URI scheme to launch the Microsoft Store app to specific pages in the store. We can use search capability to find products from a specific publisher and simply launch that URI using LaunchUriAsync API method. For ex. in order to launch all products published by some “XYZ Corporation” in the windows store we can simply call the following URI ms-windows-store://publisher/?name=XYZ Corporation Following code example demonstrates how this can be achieved using 3 lines of code in Javascript store app

Simply call this method on on some action such as a button click and it will launch a new popup window containing all apps from[…]

Open Share Dialog from Universal Windows Javascript App (UWP)

Opening Share Dialog Popup in Windows Universal App is very simple and with a few lines of code, this functionality can be quickly added to any app. The code below can be used to share an app’s web URL (you can use MS Store URL of the app as well) in UWP Javascript application

In the application page ready event we need to initialize DataTransferManager and attach an event listener for “datarequested”. In that method you can set title, display, web link properties which will be used by the dialog popup. Store ID of the app can be found from “App Management -> App Identity” page of the specific app in your developer account. In order to launch Share Dialog Popup simply call “showShareUI” method on some action (such as some button click etc). This will open dialog box as following Share Dialog Popup displays the title and description at the[…]