Development Activity
During the 8th of December, we did some more work using Phaser and creating another platformer prototype to experiment with. For this session, we focused more on creating using parallax tiles as well as some UI elements such as game start and over screens included.
One of the elements we created for this prototype was to create a parallax background using the program “Tiled”.
This is a program made to make level design much more faster and easier, it uses spritesheets which have a structure consisting of square tiles, it also can do different types of tiles as well.
Tiled supports editing tile maps in various projections (orthogonal, isometric, hexagonal) and also supports building levels with freely positioned, rotated or scaled images or annotating them with objects of various shapes.
(Thorbjørn Lindeijer, 2020)
I figure this might be easy for me to get the hand of, as I’ve also had some experience in creating tiled spritesheets before in the past, as shown on Figure 1. Included in the diagram I have an empty tile which I’ve labelled its size, each tile in the image is around 32×32 pixels.
For our game, we’ll have 3 separate layers to our tiles; the decoration layer which will have decorative tiles that the player can walk through, the collision layer representing platforms that the player will be able to move on, and the midground layer which will be the layer that scrolls with the parallax background – thus emitting a 3D-like effect (See Figure 2).
How this works in the code is that when we load our tiles, we set a “ScrollFactor” to the midground layer.
What this does is control the influence of the movement of a camera upon a certain game object. For example, when a camera scrolls it will change the position at which this game object is rendered on screen, it doesn’t change the game object’s actual position values however.
“A value of 1 means it will move exactly in sync with a camera. A value of 0 means it will not move at all, even if the camera moves. Other values control the degree to which the camera movement is mapped to this Game Object.”
(photonstorm, 2020)
For our code, we may want to set this layer to have a scroll factor of 0.5 as our background may have a different and much higher one. This’ll also enhance the effect even more making it look like multiple objects are moving in the background at different distances (See Figure 3).
Figure 4 shows how this works in-game, as I move the character to the right notice how the hearts on the gameplay layer move independently from the trees and bushes (Which is our midground layer).
What we also did for our game was learn to create some simple UI screens which would enable the player to start and reset the game if they had died (See Figure 5).
We created several functions that would trigger once the game started and ended, these being “startGame()” and “showEndScreen()” (See Figure 6).
What happens in startGame() is that once the player inputs a mouse click then the program targets the introscreen’s object and sets its alpha (This controls the transparancy of the object) to 0, the duration also determines how fast it goes from 1 to 0.
This essentially hides the start screen once the player clicks to start, this is pretty much some very basic UI.
The opposite happens with showEndScreen(), in which the value is set from 0 to 1, making the image non-transparent. There is also an extra part of the function which restarts the game.
Although this is some fairly basic UI, I reckon that I might be able to create some simple menus if I were to expand upon doing these. This could possibly be down with multiple different inputs aside from the mouse click in-which we could give the player the option to restart or exit the game.
I can use the UI in my game to help convenience the player better, it will also make explaining the game much less vague to them.
Bibliography
Editor, T., 2020. Tiled Map Editor By Thorbjørn. [online] itch.io. Available at: <https://thorbjorn.itch.io/tiled> [Accessed 19 December 2020].
Photonstorm.github.io. 2020. Phaser 3 API Documentation – Namespace: Scrollfactor. [online] Available at: <https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Components.ScrollFactor.html> [Accessed 20 December 2020].