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

Quick Tip

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

Quick Tip

Configure X-XSS-Protection in ASP.NET

To enable X-XSS-Protection header in IIS add following to your site’s Web.config file.

Read more about X-XSS-Protection header here.

Quick Tip

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

Reboot the system after the command is run. Use the following command to enable the Hyper-V role again

Reboot the system after the command is run.