Author: NG

Phaser 3 Scale Manager is here. Exploring Phaser 3 with 3.16.1 version now

NG HTML5, JavaScript, Phaser

I just checked Phaser release log and have been pleasantly surprised to see the new Scale Manager available now with version 3.16.1 so we are now going to update our Peg Solitaire code to make it responsive and use the newly released scale manager. One thing I would like to do away with is to stop using absolute size values and calculate those values depending upon display area available for the game (just like we did it in Phaser 2). The first thing we need to change with 3.16.x version is to add scale property in game configuration as following let config = { type: Phaser.AUTO, scale: { parent: ‘mygame’, mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 500, height: 500 }, backgroundColor: 0xFF0000, scene: TheGame } let game = new Phaser.Game(config); Another change I did was to remove css for canvas element which we had earlier added to center align our game. Our app.css[…]

View More

Exploring Phaser 3 with a Game: Adding Tweens

NG HTML5, JavaScript, Phaser

In previous articles (part 1 and part 2) we created a game with multiple scenes. Now we are going to add some tweens to it to make pegs jump over the holes. let loadGame = function () { let config = { type: Phaser.AUTO, width: 500, height: 500, backgroundColor: 0xFF0000, scene: TheGame } let game = new Phaser.Game(config); }; if (document.readyState === “complete” || (document.readyState !== “loading” && !document.documentElement.doScroll)) { loadGame(); } else { document.addEventListener(“DOMContentLoaded”, loadGame); } class TheGame extends Phaser.Scene { constructor() { super(“TheGame”); } preload() { this.load.spritesheet(“pegs”, “images/pegs.png”, { frameWidth: 60, frameHeight: 60 }); } create() { this.boardDef = [ [-1, -1, 1, 1, 1, -1, -1], [-1, -1, 1, 1, 1, -1, -1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 0, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [-1, -1, 1, 1, 1, -1, -1], [-1, -1, 1, 1, 1, -1,[…]

View More

Exploring Phaser 3 with a Game: Adding Multiple Scenes

NG HTML5, JavaScript, Phaser

In part one we had made peg solitaire game in Phaser 3 which was a single scene game. We will further explore Phaser 3 and use multiple scenes. Most of the times games would have a menu screen and a separate game screen. Many games would also keep a separate screen once the game is over so let us make changes in our game to add another scene which will be called once the game is over (either game is finished or there are no further moves). We are going to define our “game over” scene as following class GameOver extends Phaser.Scene { constructor() { super(“GameOver”); } preload() { this.load.image(“restart”, “images/restart.png”); } create() { var gamedata = this.registry.get(‘gamedata’); this.add.text(140, 100, ‘Game Over’, { font: ’42px Courier’, fill: ‘#000000’ }); this.add.text(155, 160, ‘Moves: ‘ + gamedata.movesCount, { font: ’42px Courier’, fill: ‘#000000’ }); if (gamedata.remainingPegs > 1) { this.remainingPegs = this.add.text(30, 220, ‘Remaining Pegs: ‘[…]

View More

Exploring Phaser 3 with a Game

NG HTML5, JavaScript, Phaser

After sticking with Phaser 2 (CE) for a while finally I decided to jump onto Phaser 3 (ver 3.15.1). Though there is still some work going on such as Scale Manager which is not released yet but the api seems to have grown and stablized with plenty of documentation available now. We are going to write a game while we explore this deeper. Let us write classic game of Peg Solitaire which is also known as just “Solitaire” in England and Brainvita in “India”. First we are going to create an html file (index.html) with following content <html> <head> <title>Peg Solitaire</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”> <script src=”js/phaser.min.js”></script> </head> <body> <script src=”js/game.js”></script> </body> </html> html file includes phaser js and our game code (game.js) which is placed in js folder. Let us start with the basic one screen setup as following let loadGame = function ()[…]

View More

Use textarea in Phaser Game

NG How to, HTML5, JavaScript, Phaser, Quick Tip

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

View More
Quick Tip

Shun window.onload in HTML5 games

NG How to, HTML5, JavaScript, Phaser

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

View More

Add Link to Rating Feature in Windows UWP App

NG How to, JavaScript, Quick Tip, Windows Store 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.

View More

App Promotion Trick for Windows Store App

NG How to, HTML5, JavaScript, 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 function showPublisherApps() { var publisherDisplayName = “Microsoft Corporation”; // Change this to your publisher name var uri = new Windows.Foundation.Uri(“ms-windows-store://publisher/?name=” + publisherDisplayName); var options = new[…]

View More

Open Share Dialog from Universal Windows Javascript App (UWP)

NG How to, HTML5, JavaScript, Windows Store App

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 var page = WinJS.UI.Pages.define(“/index.html”, { ready: function (element, options) { var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView(); dataTransferManager.addEventListener(“datarequested”, dataRequested); }, unload: function () { var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView(); dataTransferManager.removeEventListener(“datarequested”, dataRequested); } }); function dataRequested(e) { var request = e.request; var storeID = ‘xxxxxxxxxxxx’; request.data.properties.title = “Your title”; request.data.properties.description = “App description”; request.data.setWebLink(new Windows.Foundation.Uri(“https://www.microsoft.com/store/apps/” + storeID)); } function showShareUI() { Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI(); } 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[…]

View More
Quick Tip

Display CPMStar ads at the start of HTML5 game

NG HTML5, JavaScript, Quick Tip

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

View More