Developer Diary : Phaser Platforming Part 4

Development Activity

As of December 21st, I’ve begun adding some more progress onto my platformer game, I’ve now implemented a couple of new animations for the player as well as starting on the enemies and obstacles of the game – there are also game start and game over screens too.

At first, once I loaded the game it was quite blurry due to the canvas having to stretch the small sprites out onto a bigger screen as shown on Figure 1.

Figure 1

The game screen’s is around 256 pixels wide and high as to compensate for the small sprites, to keep the art sharp and from being stretched we have to include a very important feature in our config part of our HTML file for Phaser which enables pixel art mode (See Figure 2).

Figure 2

Now that this has been enabled, the has a much more sharper look.

Figure 3

This was a feature that I had found on the Phasers website’s example pages, and is also what I used as a reference for my own code:

Figure 4 (Courtesy of Phaser)

I’ve also implemented some working player animations into the game, this includes; walking, jumping and dying (See Figure 5).

Figure 5

Most animations as shown, are first created within SceneA’s file which is when the game is in action (See Figure 6).

You can see many of these animations are assigned to a certain key, these can be activated throughout the code and even by player input which is how it works for the player’s animations.

Figure 6

In Figure 7, as you can see if any of the arrow key inputs on the keyboard are pressed then the code will first check if the player’s body is being blocked by anything underneath it – this means that the player is standing on top of a surface and thus will play a normal walk animation.

There is also an else if function to determine whether the player is standing still on this surface or not, if so then the idle animation will play – this is triggered when none of the player inputs are being pressed.

However, if the player is not standing on any surface, then this must mean that they’re in mid-air – this is where we would want to play our jump animation.

Figure 7

Within the game there is also some enemies, those being bats and sawblades.

The sawblades are pretty much a static enemy that stays in space, they take up around 32×32 pixels, so they can cover quite a large amount of area. The player will most likely have to jump over to avoid them properly as they will obstruct their path.

Once the game has started up, the code will try to detect the objects layer of our tiled layout and then try to find any object labelled ‘saw’, for each point it finds a saw will then be spawned there.

Figure 8

If the player collides with the saw, then this function will be activated. As shown in Figure 9, once activated the game will trigger a death animation for the player as well as removing the saw’s collider as to not accidentally trigger the collision again.

Figure 9

I’ve also started on doing the second level for this game, which will feature some parallax backgrounds as well as an enemy that can move.

As seen in Figure 10, I have added a new layer to the tiles with the name ‘middetail’. You can also see that I have added a bat spawn object included with a destination for it to move.

Figure 10

For the parallax tiles to work, I needed to set a scrollfactor onto the layer to make it scroll at a certain speed compared to the other layers.

“Parallax scrolling is when the website layout sees the background of the web page moving at a slower rate to the foreground, creating a 3D effect as you scroll.”

Alex Black, 2020

Figure 11 shows the new layer being made, and a “setScrollFactor” component being added onto it.

Figure 11

When I move my character forwards, the ‘middetail’ layer of the level slides slightly more to the right at a different pace than the other layers. This is our parallax details at work (See Figure 12).

Figure 12

Here you can also see the bat enemy ai at work here, when the bat spawns it simply travels between its spawn point and assigned destination at figure 13.

Figure 13

As shown in Figure 14’s code, we create a for loop with variables for our spawn and destination, as well as a ‘line’ for our enemy to follow. Both the ‘batspawn’ and ‘batdest’ objects in our tiled layout will be detected by the findpoint as well as a ‘+ i’ which helps count for multiple instances of the object.

A line is then created between our spawn and destination, the bat will then follow this line. There is also a yoyo and ease component which allows it to move back and forward albeit at a smoother pace as evident by the gif on Figure 13.

Figure 14

The game also has some screens for when it starts up as well as when the player fails too.

As shown in Figure 15 the game starts off with a straightforward message that the player can click to begin. Once the player dies, a game over screen is presented in-which the player can click on to restart the game back from the start.

Figure 15

Within the code are two functions, the startgame function is activated once the game is started up and enables the player to resume control once a mouse input is detected, the end screen is quite similar although it sets off a restartgame function.

There is also an alpha component which gradually increases to give it an easing effect, this makes the transition between screens look more smooth.

Figure 16

The game over screen function is also triggered once the animation for the player dying is completed as seen on Figure 17.

Figure 17

Bibliography, P., 2020. Phaser – Examples – Pixel Art Mode. [online] Available at: <> [Accessed 30 December 2020].

Bloq, C., 2020. 18 Stunning Parallax Scrolling Websites. [online] Creative Bloq. Available at: <> [Accessed 30 December 2020].

Leave a Reply

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