In puzzle games where we need to add borders to our puzzles and mark various zones, we can use Phase Path to draw those lines. For this example we are going to draw something like the image below Let us start by creating our html file and including Phaser 3 js and our game js in it. Now our JS code for would be Try running this locally in your web server and you will see the result as shown in the screenshot.
We will be using corodva to compile a Phaser 3 Game to Android App. We are going to go over step by step description of how to implement Admob Reward Ads to our game. Let us start by creating a Phaser Game. For simplicity we will not have any game code in it but only a butoon to launch reward ads. Create the cordova project by using the following command in Node.js console. Refer to this blog to go over basic steps to compile an HTML5 game to Android app. We are going to use Admob Plus cordova plugin for implementing Admob ads in our game. Add plugin by using the command below. Make sure to replace App ID with your App ID in AdMob console. You need to create an App for your Android app and then create a Reward ad for that app which will be used here.[…]
Let say you have a you have defined ‘mygame’ as parent in your config And the HTML is defined as following Define the CSS for mygame as following
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. Phaser.Scene.prototype.addButton = function (x, y, key, callback, callbackContext, overFrame, outFrame, downFrame) { // add a button let btn = this.add.sprite(x, y, key, outFrame).setInteractive(); btn.on(‘pointerover’, function (ptr, x, y) { this.setFrame(overFrame); }); btn.on(‘pointerout’, function (ptr) { this.setFrame(outFrame); }); btn.on(‘pointerdown’, function (ptr) { this.setFrame(downFrame); }); btn.on(‘pointerup’, callback.bind(callbackContext, btn)); return btn; }; Above piece of code can now be used var button = this.addButton(100, 100, ‘buttons’, this.clickButton, this, overFrame, outFrame, downFrame); clickButton event can be defined as following clickButton(button) { // use this to access scene // button is also available as the first param }
I tried to update a game which was using last official relase of Phaser CE 2.6.2 compiled with cordova to the latest version (2.12.0) and started seeing below error in some mobile devices WebGL: INVALID_VALUE: vertexAttribPointer: index out of range There were hundreds were such errors logged and webview declined to log any further errors. Reverting it back to 2.6.2 fixes the problem. Looked for fixes in Phaser forums but did not find anything of help so reverted it back to 2.6.2. Seems like its going to be like that until we get regressively tested newer CE versions available.
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);
Phaser 3 also has the full support for fullscreen mode. Resizing a game to fullscreen is quite simple as shown in the code below. We are going to add a button to resize the game to fullscreen and then switch the button which will revert fullscreen mode to normal screen mode. We have updated icons sprite as following Changes from previous code is marked below let loadGame = function () { let config = { type: Phaser.AUTO, scale: { parent: ‘mygame’, mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: window.innerWidth, height: window.innerHeight }, 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 }); this.load.spritesheet(“icons”, “images/icons.png”, { frameWidth: 128, frameHeight: 128 }); } create() { this.boardDef = [ [-1,[…]
We explored FIT scale mode in previous article. We already did most of the base work for calculating and scaling sprites and texts and respositioning them in the scene view area so let see how much of additional code do we need to add in order to change our game from FIT to RESIZE scale mode. First we need to change game config as following let config = { type: Phaser.AUTO, scale: { parent: ‘mygame’, mode: Phaser.Scale.RESIZE, width: ‘100%’, height: ‘100%’ }, backgroundColor: 0xFF0000, scene: TheGame } let game = new Phaser.Game(config); Now we need to add a resize event in our create method as following this.scale.on(‘resize’, this.resize, this); Create resize method as following resize(gameSize, baseSize, displaySize, resolution) { let width = gameSize.width; let height = gameSize.height; this.cameras.resize(width, height); this.positionControls(width, height); } In resize method we retrieve width and height of the game from “gameSize”. We will reposition the controls by simply[…]
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[…]
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,[…]