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);
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;[…]
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.
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 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[…]
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.
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[…]
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)[…]
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 using System; using System.Configuration; using System.Net.Mail; using System.Web.Services; namespace GoDaddy.Email { /// <summary> /// Summary description for Mail /// </summary> [WebService(Namespace = “http://tempuri.org/”)] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class Mail : System.Web.Services.WebService { [WebMethod] public string SendEmail(string to, string subject, string body)[…]
Json.Net is the preferred way to go about it because of performance gain it gets compared to JavascriptSerializer. Download and install Newtonsoft.Json using Nuget Now in order to create Json for an object simply use SerializeObject method as following Product product = new Product(); product.Name = “Apple”; product.Expiry = new DateTime(2008, 12, 28); product.Sizes = new string[] { “Small” }; string json = JsonConvert.SerializeObject(product); // { // “Name”: “Apple”, // “Expiry”: “2008-12-28T00:00:00”, // “Sizes”: [ // “Small” // ] // } In order to convert Json to the object use DeserializeObject method as following string json = @”{ ‘Name’: ‘Bad Boys’, ‘ReleaseDate’: ‘1995-4-7T00:00:00’, ‘Genres’: [ ‘Action’, ‘Comedy’ ] }”; Movie m = JsonConvert.DeserializeObject<Movie>(json); string name = m.Name; // Bad Boys