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

Use textarea in Phaser Game

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

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

We can customize scrollbar styles to make it look nicer using webkit scrollbar properties. You can change these styles to match your game. This works on chrome and safari. Other browsers do not support these properties but you can still stylize it using normal css styles to match your game. Now add the game code as following


Quick Tip

Shun window.onload in HTML5 games

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

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

This starts loading the game as soon as HTML DOM is parsed and ready and no fear of having to change[…]