For this week, we worked on a tank game during Tuesday in class using Phaser. Included in the project, we were also tasked to add on at least two customizations for the game as well.
The two addition I have decided to add to the game was a UI element that displayed the player’s current health, and some health pickups that dropped by random chance from defeated enemies (See Figure 1).
To add the text, I created a variable called ‘healthDisplay’ and assigned some text to it.
This text would subtract the player’s current ‘damageCount’ and ‘damageMax’ which would then display the amount of hitpoint’s the player has (See Figure 2)
Another important thing I added was to set the depth of the UI display to a high number, this is so that the UI can be drawn above most of the objects in the scene – this prevents anything from obscuring it such as enemies and projectiles.
The depth is also known as the ‘z-index’ in some environments, and allows you to change the rendering order of Game Objects, without actually moving their position in the display list.
The default depth is zero. A Game Object with a higher depth value will always render in front of one with a lower value.
Phaser 3 API Documentation, 2021
User interfaces are known to be specially important within games as they can display vital information to the player such as health, ammo or any general hud element that player has to keep track of.
This is typically why user interfaces are always on front, as obscuring them may prove to be unfair and frustrate the player from keeping track.
I’ve also made sure that the health user interface updates within the player’s bullet collision function as shown in Figure 3.
This is fairly simple as it is similar to our other line from before, however instead of adding text we are just setting the text in our variable to update the player’s health by setting it to their current damage variables.
The Player’s ‘damageMax’ is set to 20, this means the max amount of damage they can take is 20 hit points, when they take a hit their ‘damageCount’ goes up by one.
As shown by Figure 4, this is the player’s health as normal when unaffected. So the sum in the text we set is essentially 20 subtracted by 0, which displays full health.
What Figure 5 is essentially showing is that any variable that appears from the ‘PickupHealth’ class from this file will inherit the following functions.
Amount, which is the number of health given back.
An enabled physics body as to make sure collisions can work with each object inheriting from the class.
For the pickups, I plan for them to randomly drop from defeated enemies, Which is where the variables for them will come in.
As shown in Figure 6 within the main scene’s code, I added a new variable called ‘randNumber’, what this does is that it currently has a number set to 0 at the start of the code.
However each time an enemy tank is defeated, within their ‘IsImmobilizeed’ function the ‘randNumber’ variable is called upon and is changed into a random number from 0 to 4 using the ‘Math.Floor’ and ‘Math.random’ features.
If the variable’s number matches the if statement’s conditions, then a new variable is created within the function using our recently created ‘PickupHealth’ class.
Once the player collides with the pickip, the function calls for ‘burgerHitPlayer’. This function essentially takes away one point of the player’s damage count using the pickup’s ‘amount’/
It is also noted that the text of the user interface from earlier is updated too.
Figure 8 shows a before and after of the player picking up health, the top image shows the pickup’s being spawned into the level via enemy drops.
Once the player collides with these, they disappear and the player’s health interface increases.
Although this is most of what I’d done this week, if I were to of had more time to expand upon this game then I would include possibly more pickup types with different functions for the player to experiment with.
However I am pleased with how far I managed to get and feel as if I have a better understanding of how to implement features such as these.
The bit I enjoyed doing the most was trying to make it so my pickups and health interface worked together, this was because it was quite satisfying to implement two features that both came hand in hand – picking up health would directly involve the user interface to change and to keep track of the player’s hit points.
One of the hardest parts for me to figure out was trying to make it so the pickup drops would be randomly dropped from enemies, the issue was that I wanted to implement the random chance as its own function rather than including it in an already existing function – as this was hard to figure out due to many issues trying to get its values to carry over to the enemy’s function. I thought it would be simpler to implement them both into the same function instead, however this is something I could possibly look into doing more efficiently.
photonstorm.com, P., 2021. Phaser – Examples – Ui Scene. [online] Phaser.io. Available at: https://phaser.io/examples/v3/view/scenes/ui-scene [Accessed 20 January 2021].
Photonstorm.github.io. 2021. Phaser 3 API Documentation – Namespace: Depth. [online] Available at: https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Components.Depth.html [Accessed 20 January 2021].