Hashmap in Javascript
Something like a Hashmap can be easily done in javascript as following
Category: 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.
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 }
Various ways to iterate an element in a group in Phaser 3
Option 1 – Phaser.Actions.Call(group.getChildren(), function(sprite) { this.children.bringToTop(sprite); }, this); Option 2 – group.children.each(function(sprite) { this.children.bringToTop(sprite); }, this); Option 3 – group.getChildren().forEach(function(sprite) { this.children.bringToTop(sprite); }, this);
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;[…]
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 var storeID = ‘xxxxxxxxxxxx’; function rate() { var uri = new Windows.Foundation.Uri(“ms-windows-store://review/?ProductId=” + storeID); var options = new Windows.System.LauncherOptions(); Windows.System.Launcher.launchUriAsync(uri, options); } 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.
Display CPMStar ads at the start of HTML5 game
Create a css file as following * { padding: 0; margin: 0; } body{ padding:0px; margin:0px; overflow-x: hidden; } canvas { touch-action-delay: none; touch-action: none; -ms-touch-action: none; } #topContainer{ position: relative; overflow: hidden; } #adContainer{ position:absolute; top:0px; left:0px; width:100%; height:100%; text-align:center; background-color:rgba(0,0,0,0.9); z-index:1000; } #closeBtn{ cursor:pointer; background-color:#2196F3; width:250px; margin:20px auto; padding:10px; font:bold 14px Arial; color:#FFF; text-transform:uppercase; } Create game HTML as following <!DOCTYPE html> <html> <head> <title>HTML5 Game</title> <meta name=”author” content=”Netexl” /> <meta name=”description” content=”HTML5 Game.” /> <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ /> <link rel=”stylesheet” href=”app.css”> <script src=”phaser.min.js”></script> <script src=”game.js”></script> </head> <body> <div id=”topContainer” style=”width:500px;”> <div id=”mygame”></div> <div id=”adContainer”> <div style=”margin-top:20px”> <script language=”Javascript”> var cpmstar_rnd=Math.round(Math.random()*999999); var cpmstar_pid=xxxxx; document.writeln(“<SCR”+”IPT language=’Javascript’ src=’//server.cpmstar.com/view.aspx?poolid=”+cpmstar_pid+”&script=1&rnd=”+cpmstar_rnd+”‘></SCR”+”IPT>”); </script> </div> <div id=”closeBtn” onclick=”closeAd()”></div> </div> </div> <script src=”ads.js”></script> </body> </html> Replace cpmstar_pid with your pid The ad is initialized and loaded as soon as HTML is loaded. The ad is positioned on top of HTML5 game area. We will initialized a timer which[…]
WebP Image Fallback Options
WebP is a relatively new image format which provides lossless and lossy compression for web images. It was developed and released by Google in 2010. Accroding to Google WebP format saves around 25-30% of image size which is a big saving for image-heavy sites. Even for normal sites, it saves a lot of network bandwidth and results in overall performance improvement of a web site (in turn a better ranking by search engines). Even though this format has been there since 2010, it is still not supported by all browsers.The good thing is that it is natively supported in Google Chrome and the Opera browsers which cover for bigger chunk of browser market share. For mobile sites this format has become a necessity to optimize load time of websites on mobile. Google provides tools to convert images from one format(png, jpg etc) to webp and viceversa https://developers.google.com/speed/webp/ If we are using webp format of[…]
Commands to Switch Hyper-V role on windows PC
Open command prompt with admin previledges and run following command to disable Hyper-V role on windows PC bcdedit /set hypervisorlaunchtype off Reboot the system after the command is run. Use the following command to enable the Hyper-V role again bcdedit /set hypervisorlaunchtype auto Reboot the system after the command is run.
Trim object info in Javascript
Use this method to trim JS object values and display only the required info (which I do a lot for deugging purposes). Here is what gives me a concise info I am looking for while debugging my code in JS. function trimInfoInArray(array, props) { return array.map(function (item) { var obj = {}; for (var i = 0, len = props.length; i < len; i++) obj[props[i]] = item[props[i]]; return obj; }); } function trimInfoInObject(object, props) { var obj = {}; for (var i = 0, len = props.length; i < len; i++) obj[props[i]] = object[props[i]]; return obj; } Now the example on how to use it is as following var player1 = {id: 1, name:’Tom’, Age: 30} var player2 = {id: 2, name:’Jon’, Age: 28} var players = [player1, player2] console.log(JSON.stringify(trimInfoInArray(players, [“id”, “name”]))); console.log(JSON.stringify(trimInfoInObject(player1, [“id”, “name”]))); With some objects having hundreds of properties and printing those values and searching for just the[…]