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 with id ‘mygame’. Our updated html is as following now

Now the game is resized to fit in the available space (it fits in the screen according to the aspect ratio for declared width and height). This can be compared to SHOW_ALL scale mode in Phaser 2 with additional advantage of automatic resizing of the game in available space. We are going to make further changes to scale properties and use entire screen area for our game so there won’t be fixed width and height for the game. We will take width and height as the available width and height of the window object.

With this change when the game is loaded, it takes full screen space. We will be calculating size for rest of the components in the game now which makes it work in a responsive manner. Once the game with FIT scale is loaded in the browser and then you resize it, it will resize in the same aspect ratio as the initial load. If we want the game to always take entire available space and components in the game to re-align themseleves accordingly, then we need to use RESIZE scale mode (which is similar to RESIZE scale mode from Phaser 2). We will look at that as well in later articles. For now we are going to focus on using FIT scale mode and making our game responsive for initial load. For most of the games this works well since aspect ratio won’t be changing for games unless it is played on desktop where we can resize browser window or, on mobile when we are switching between full screen or normal screen mode which changes the aspect ratio of the game.

We are going to define a LocalScaleManager for our game which will take care of scaling our sprites and texts in available area. This code I picked from my previous Phaser 2 game and just made changes to use Phaser 3 api which does pretty much same thing in a different way.

We have instantiated localScaleManager which will be used by our scenes to scale its components.

In Phaser 3 cameras are created by default with the same size as the game so we can find out our game’s width and height as following

We will make a change to our code and add components (sprite, text etc) outside main view area and then position components in “positionControls” method which takes the available game width and height. Below is the updated code for TheGame class

I  made few changes to the code from previous articles. I have updated gameover code to add some camera effects while transitioning to GameOver scene, updated text styling, some additional checks in the game.

GameOver scene code is also updated. Below is the updated GameOver scene code

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


Leave A Comment

Your email address will not be published. Required fields are marked *