Category: JavaScript

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

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

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