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

Various ways to iterate an element in a group in Phaser 3

Option 1 –

Option 2 –

Option 3 –

 

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

[…]

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.

Quick Tip

Display CPMStar ads at the start of HTML5 game

Create a css file as following

Create game HTML as following

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 will enable closeAd button after a predefined interval (normally 5 or 10 secs)

Below is the skeleton game code.

 

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

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.

Quick Tip

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.

Now the example on how to use it is as following

With some objects having hundreds of properties and printing those values and searching for just the right info is an easy task with these functions.

Phaser Cordova Mobile App Crashing on iOS

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

 

Quick Tip

Send Email from Asp.Net Application using Google Account and SMTP

In order to send mail from the application we can use SMTP server from Google (which off course has certain limitations). We can use a Google mail account and send the mail using SMTP server from Google. This works very well for Asp.net applications which need to use a simple form such as “Contact Us”. An example of this is explained below. We will use AJAX to send the request to an ASP.Net web service which sends the mail from the server side. Create a web service as following

In order for the method to be called using AJAX make sure to uncomment [System.Web.Script.Services.ScriptService] in the web service code. Add following appsettings in web.config

Change values and replace email and password to your account credentials. Leave SMTPhost and port as-is. We will now create a simple HTML page to input the data

Now the last piece is[…]