Mobile | Tech Diary

Remote debugging HTML5 games on Android using Chrome DevTools

NG April 14, 2019February 7, 2022 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[…]

WebGL: INVALID_VALUE: vertexAttribPointer: index out of range

NG April 14, 2019 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.

“App not Installed” Error on Android When Updating to Newer Version

NG November 2, 2018November 2, 2018 Android, Cordova, Intel XDK, Issue, Mobile

I recently updated an old Cordova Android app and tried to install it on my Android phone which had previous version installed already and the install failed with the message “App Not Installed”. Other than updating Android version and couple of plugins, everything else was same old and I had correctly changed “android-versionCode” as well as “version” to higher number so nothing looked wrong but I suspected it had something to do with either the version code or the certificates I was using to sign the app so I decided to look into the previous APK file and try to find something out. We can use AAPT tool to look into APK files which can be found in build-tools\<buildToolVersion> folder (for ex, C:\Program Files (x86)\Android\android-sdk\build-tools\23.0.1). Go to the folder and run following command in the command prompt aapt dump badging myapp.apk It turned out that though I had android-versionCode code[…]

Use Standalone Visual Studio Emulator for testing Android Apps

NG September 29, 2018September 29, 2018 Android, Mobile, Visual Studio

Microsoft is now providing Visual Studio Emulator for Android which can be used to deploy, test and debug Android apps. It also comes with a standalone version which can be used for quickly testing your APK files without needing Visual Studio which is very helpful for hybrid apps which are not built using standard development tools. For example if you have built your app using cordova and are looking for testing your app on a few emulators and are short of actual physical devices then this emulator comes handy which currently has support up to Marshmallow (API level 23). Download the standalone emulator installer from https://aka.ms/vscomemudownload Click on the installer and go through the installation process. It uses Hyper-V for running the emulator so it may ask you to confirm on activating it. Once it is installed you can open the emulator by searching for “Visual Studio Emulator for Android” in your windows[…]

Cordova Error: Android SDK not found. Make sure that it is installed

NG September 26, 2018September 26, 2018 Android, Cordova, Issue, Mobile, Plugin

I recently tried to upgrade Cordova app which was last compiled almost an year back and got the following error Error: Android SDK not found. Make sure that it is installed. If it is not at the default location, set the ANDROID_HOME environment variable. I turns out that I had updated Android SDK version on my PC during that time and all I needed to do was to update the platform version in the app as well. Using Node.js Command Prompt and cordova commands, check the installed platform in the app using the following command cordova platform version android Update the installed platform version in the app using the following command cordova platform update android While upgrading the app additional issues I faced were related to plugins not being compatible with the new platform version which were fixed by simply removing the plugins and re-adding it which in some cases[…]

Compile Cordova App for iOS

NG August 31, 2018 Cordova, How to, HTML5, iOS, Mobile

I recently planned to compile my Phaser games for iOS App Store. These games were build using Cordova CLI and have already been published on Android Store so I already have a functioning game which was to be ported to iOS. I decided to document the steps I had to follow to get my game compiled and published to iOS App Store. You can develop the game on any platform of your liking but in order to compile and publish these games to iOS App Store you do need to have a Mac. It can not be done from Windows or any other platform. Steps to compile the game: Download MacOS installer for Node.js and install it on your Mac. Go to App Store on your Mac and install latest version of XCode. You need XCode to build the game. Open Terminal console (Finder -> Applications ->Utilities) on your MacOS and install cordova using npm utility of Node.js by[…]

Cordova iOS Mobile App displays White Background Color after Splash Screen

NG August 29, 2018August 29, 2018 Cordova, iOS, Mobile

Cordova Mobile apps display a white background right after Splash screen. This happens because WebView is loaded before our app is initialized. I tried many suggestions such as setting AutoHideSplashScreen to false and then call navigator.splashscreen.hide() in deviceready function which did not work for me. It gets called before WebView is even loaded. After trying a lot of things I finally had to look into the main view controller code which is automatically generated by Cordova (I am using Cordova 8.0.0). Go to MainViewController.m file in the platforms/ios/CordovaLib/Classes folder and look for following code – (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view from its nib. } Add the lines highlighted as below. I used a transparent Splash screen (which gives black background while splash screen is shown) and changed the background color of the WebView to the color which matched with my app’s background color. – (void)viewDidLoad { [super viewDidLoad]; self.webView.opaque=NO; self.webView.backgroundColor =[…]

Phaser Cordova Mobile App Crashing on iOS

NG August 28, 2018August 28, 2018 Intel XDK, iOS, Mobile, Phaser, Quick Tip

I recently decided to compile Phaser games to iOS and publish to The App Store. The games were already published on Google Play Store for Android and worked without any issues. I faced few issues after compiling Phaser games for iOS. The first issue which I faced was the game crashing randomly on iOS. After doing further research I found this article on Intel XDK forum which turned out to be the reason for crash. The games were written a while back with older versions of Phaser and I did not get time to upgrade and test this with newer versions of Phaser (CE and higher) so I decided to try the fix specified in this thread and voila, it worked just fine. Here is the code which I borrowed from the thread var mygame; window.onload = function () { mygame = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, “mygame”); mygame.state.add(“Boot”, Boot); mygame.state.add(“Loading”, Loading); mygame.state.add(“MainMenu”, MainMenu); mygame.state.add(“TheGame”, TheGame); mygame.state.start(“Boot”); function onPause() { if(!mygame.paused)[…]

Different MasterPage for Mobile and Desktop in ASP.NET

NG June 9, 2018 Asp.Net, How to, Mobile

Now a days more people have been accessing the web on mobile devices as compared to desktops and creating mobile versions of websites have become a necessity. In ASP.NET Web Forms application we can switch between different mastre pages basis which device user is using to access the site. This gives a lot of advantages such as changing layout of the pages, applying different style sheets and even load different content if the need be. To achieve this im ASP.NET Web Forms application simply define a base page as following public partial class BasePage : System.Web.UI.Page { protected void Page_PreInit(Object sender, EventArgs e) { if (Request.Browser.IsMobileDevice) { this.MasterPageFile = “~/Mobile.master”; } else { this.MasterPageFile = “~/Desktop.master”; } } } Now rest of the pages (such as example below) can simply inherit base page and all those pages will have different master pages for mobile and desktop. public partial class MyPage :[…]

Phaser RESIZE Scale mode not resizing the game on mobile

NG May 27, 2018 Framework, HTML5, JavaScript, Mobile, Phaser

I had minimal html markup for a web game which used RESIZE scale mode as following <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>My Game</title> <meta http-equiv=”Content-type” content=”text/html; charset=utf-8″> <meta name=”viewport” content=”width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no”> <link rel=”stylesheet” href=”css/app.css”> <script src=”js/phaser.min.js”></script> </head> <body> <div id=”game-container”> <div id=”mygame”></div> </div> <script src=”js/game.js”></script> </body> </html> The game was started with the following statement var mygame; window.onload = function () { mygame = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, “mygame”); mygame.state.add(“Boot”, Boot); mygame.state.add(“Loading”, Loading); mygame.state.add(“TheGame”, TheGame); mygame.state.start(“Boot”); } code of Boot class // —————boot——————— var Boot = { init: function () { mygame.scale.scaleMode = Phaser.ScaleManager.RESIZE; }, preload: function () { mygame.stage.backgroundColor = 0x510100; mygame.load.image(“loading”, “images/loading.png”); }, create: function () { mygame.state.start(“Loading”); } }; When the game was loaded initially on mobile, it took the available space on the mobile screen for that orientation but turning the mobile device to other orientation did not correctly fit in the[…]

A1

Category: Mobile