Category: Phaser

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

Phaser Cordova Mobile App Crashing on iOS

NG Intel XDK, iOS, Mobile, Phaser, Quick Tip

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

View More

Phaser RESIZE Scale mode not resizing the game on mobile

NG Framework, HTML5, JavaScript, Mobile, Phaser

I had minimal html markup for a web game which used RESIZE scale mode as following <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>My Game</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> </head> <body> <div id=”game-container”> <div id=”mygame”></div> </div> <script src=”js/game.js”></script> </body> </html> The game was started with the following statement 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(“TheGame”, TheGame); mygame.state.start(“Boot”); } code of Boot class // —————boot——————— var Boot = { init: function () { mygame.scale.scaleMode = Phaser.ScaleManager.RESIZE; }, preload: function () { mygame.stage.backgroundColor = 0x510100; mygame.load.image(“loading”, “images/loading.png”); }, create: function () { mygame.state.start(“Loading”); } }; When the game was loaded initially on mobile, it took the available space on the mobile screen for that orientation but turning the mobile device to other orientation did not correctly fit in the[…]

View More

How to avoid screen flicker when embedding responsive Phaser game in Bootstrap site

NG Bootstrap, HTML5, jQuery, Phaser

Phaser games can be responsive and will fit in the available space which makes it easy to embed in variety of devices with different sizes. When Phaser games are embeded in a Bootstrap site which is responsive, there can be some flickering on the web page when game is initially loaded. When Phaser games are loaded, it loads in the actual size it was created in and afterwards CANVAS is resized to fit in the available space. The example below is a bootstrap template in which Phaser game is embeded in half of the screen and remaining half screen has some other content. Click the link to load the page to see how the game is being resized to fit in the available space. To make the game load in a nice manner without visible resizing, we need to intially hide the div in which game is loaded. In Phaser boot method we can[…]

View More

How to Handle Orientation Change in Phaser Mobile Web Game

NG HTML5, Mobile, Phaser

If you are not using RESIZE mode for mobile game development and using SHOW_ALL or other scale modes, then you would need to lock the game for one specific orientation. In the previous articles we discussed about the mobile game which was to be published to Android store (Intoduction, Calculation, Game Screen), I also uploaded the game online. The game was played in Landscape mode and I initially developed it for desktop. When I opened it in mobile, though I could open it in Portrait mode and everything was calculated well, I wanted to lock it for Landscape orientation when opened in browser on a mobile device. The orientation was easily locked in Android app by simply changing some configuration option but for browser version I had to write some addtional code. I got some help from Emanuele’s blog on the same topic and borrowed some code. I had to handle it differently[…]

View More

Monetize Windows 10 Store App with Ads

NG HTML5, Phaser, Windows Store App

In the previous article we converted our Phaser game to a windows 10 store app (UWP app). Now we all want to monetize our games. One way of monetizing is by putting ads in our game. Micorsoft has built support for ads in the UWP which offers various ad types and also supports mediation with other ad networks. Refer to following resources to get more detail https://developer.microsoft.com/en-us/store/monetize/ads-in-apps We will go through steps to quickly add a banner ad to our game. First step is to add WinJS and Microssoft Advertising SDK to our visual studio project. Open proejct and go to NuGet Package Manager -> Manage NuGet Packages for Solution Search for WinJS in Browse section, select the package and click install which will install the package in the current solution. Accept the popup confirmations if you get any. Next we will add Microssoft Advertising SDK. Simply browse for Advertising and in the results[…]

View More