Quick Tip

Add Phaser 2 style buttons in Phaser 3

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.

Above piece of code can now be used

clickButton event can be defined as following

 

Quick Tip

Remote debugging HTML5 games on Android using Chrome DevTools

Steps – Enable your Android device for debugging. For this go to settings on your mobile device -> Developer Options -> Enable USB debugging Now go to your PC/Mac and launch Chrome browser. Open DevTools by hitting F12. In DevTools open Remote Devices. Make sure you have “Discover USB devices” option checked here. Now connect your mobile device to Mac/PC using USB cable. You should now see you device listed under devices section Now go to your mobile device and open the app your are trying to debug. Once app is running in mobile, go back to chrome browser on your Mac/PC and click on the device name to see all running browser as well as webview instances on your mobile.   Simply click on “Inspect” button to luanch chrome tab for your app. You can continue to browser your app on mobile and check for errors/messages etc in the[…]

WebGL: INVALID_VALUE: vertexAttribPointer: index out of range

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.

Quick Tip

Various ways to iterate an element in a group in Phaser 3

Option 1 –

Option 2 –

Option 3 –

 

Fullscreen in Phase 3

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

Check out the game in your browser window here. Try resizing it in your browser window to see scaling at work. You can play the game here

Exploring RESIZE Scale Mode in Phaser 3

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

Now we need to add a resize event in our create method as following

Create resize method as following

In resize method we retrieve width and height of the game from “gameSize”. We will reposition the controls by simply calling “positionControls”. This change is made for both scenes. See below for the complete code of both scenes (All changes in the code from FIT mode is marked)

We also need to change tweens since they are used for moving sprites. If tweens are running while game is resized,[…]

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

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

Another change I did was to remove css for canvas element which we had earlier added to center align our game. Our app.css file now looks like this

You can also see that we have declared ‘parent’ attribute as ‘mygame’ in our scale configuration so we are going to add a div in our html[…]

Exploring Phaser 3 with a Game: Adding Tweens

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.

Since the main board is just switching the sprite frames, we needed a temporary sprite which we will move between the holes. We added “removePeg” method which starts the tween on temporary sprite. clickPeg method is changed to call “removePeg” and we also removed code to update sprite frames in clickPeg. Those frames will now be changed in the tween onStart and onComplete events. Code to check for “gameover” is also moved to the tween onComplete event since we want to wait for the pegs to move before checking for “gameover” and switching to another scene. The updated game code now runs as following

Exploring Phaser 3 with a Game: Adding Multiple Scenes

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

Game over scene simply displays a “game over” message and total number of moves it took to finish. In case of “no win” we can also display no of pegs remaining. In “preload” method of this scene we are loading “restart” image which will be used for restart button and attached with the “pointerup” event.[…]

Exploring Phaser 3 with a Game

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 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

If you are coming from Phaser 2 then you would notice some differences. We are starting a game and passing a config which defines the[…]