Hashmap in Javascript
Something like a Hashmap can be easily done in javascript as following
Category: How to
Vertically Center-align Phaser Game in a Div
Let say you have a you have defined ‘mygame’ as parent in your config And the HTML is defined as following Define the CSS for mygame as following
Allow IIS Web Server to serve APK file for download
If you upload APK to a web server and try to download it on mobile be giving the URL of APK, it will fail since web server will block serving of any file type not recognized by it. In order to allow serving of APK file from the IIS web server add following mime-type in the web.config file The complete entry should be as following
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[…]
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
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. 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 }
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. 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[…]
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 <!DOCTYPE html> <html> <head> <title>Demo</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> <script src=”js/game.js”></script> </head> <body> <textarea disabled id=”txtArea” style=”display:none” class=”txtArea”></textarea> <div id=”container”> <div id=”mygame”></div> </div> </body> </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 body { padding: 0px; margin: 0px; background: #862C2C; overflow-x: hidden; } .txtArea{ position: absolute; background-color: #ffffff; color: #000; padding: 10px; border: 3px solid #9E9E9E;[…]
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 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(“MyGame”, MyGame); mygame.state.start(“Boot”); }; 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 var mygame[…]