In my previous post, I explained the sample code of a static platformer game. Now, let’s challenge ourselves for a scrolling platformer game. For this type of game, platform and other objects would move, while the main Player sprite would remain at a fixed position on the stage, as shown in this sample project.

You could access the sample project at this address: https://scratch.mit.edu/projects/447596590

In this demo video, the Player sprite could move left or right and jump up. When it moves to the right, other sprites such as backdrop and enemies will move to the left. Although the Player sprite stays in the horizontal middle point of the stage, the visual effect is that the Player sprite is moving right. Vice versa, when user presses Left arrow key, other sprites would move to right, giving the impression that the Player sprite is moving to the left.

Please note that backdrop scrolling will not happen at the beginning of the game. As shown in this video, the initial position of the Player sprite is close to the left edge of the stage. The backdrop will not scroll until the Player walks to the horizontal central point on the stage. This beginning condition will also be considered when we design the code.

In this post, I will only analyze Player sprite since it is not only the most complicated one, but also the core of the game.

The Main Code Segment

Just like the static platformer game, scrolling platformer game also has a main code segment, which encapsulates all the main functionalities. It initiates variable values and starts executing “Tick” block. “Tick” block is just what its name says, to update the position of Player as consecutively and frequently as a clock ticks.

I will not explain too much for this main code segment. If you are confused about the meaning of “Finish” variable, and about the purpose of “forever” and “repeat until” blocks, a brief explanation here is that the game allows for multiple lives. When Finish is not blank value, Player sprite loses one “life”. The “tick” process pauses and Player flickers several times. After that, Player sprite will return to the latest checkpoint and the game continues from that point.

What I will focus on is the explanation of “Tick” block. It is responsible for all the behaviors of Player sprite.

“Game Initiate” Block

As its name says, this block is responsible for initiating the variables. It sets the x and y value to the latest “Checkpoint x” and “Checkpoint y”. It sets the initial value of “sx” and “sy” to 0. These two variables represent the movement speed at x and y direction, respectively. “in air” variable indicates whether the Player sprite is in the air, which will affect if the Player sprite could jump.

“Finish” variable indicates the game status. If Finish is blank value, game goes on. If Finish is “Die”, the Player sprite just loses one life and should return to the latest checkpoint to continue the game. If Finish variable is “Yes”, you just win the game.

“Scroll x” and “Scroll y” represent the accumulative displacement in x and y direction, respectively. They form the basis to synchronize all the movement of the sprites in the game. Both of their initial values are 0.

“Tick” Block

Tick block is responsible for adjusting x and y position and speed of Player sprite in a frequency of clock’s tick. Since computer runs very fast, each iteration of “Tick” block might finish just within a fraction of a second.

The program first checks if the Left or Right arrow key is pressed or not. Depending on which key is pressed, it change “sx” by a positive value or negative value. The program then calls block “Change Player x by” to adjust Player’s horizontal position and speed.

In the next step, the program checks if the Up arrow key is pressed and then adjusts “sy” value. It calls block “Change Player y by” to adjust Player’s vertical position and speed.

At the end, the program block adjusts Scroll x and Scroll y and then calls Position block to update the position of the Player sprite. Scroll x and Scroll y are used by all the sprites in the game to synchronize their positions with the Player sprite.

Till now, a complete cycle of “Tick” block has been done. It looks simple but wait! We have not analyzed the two blocks “Change Player x by” and “Change Player y by” called by “Tick”.

“Change Player x by” Block

This block is called by “Tick” block to adjust horizonal speed and position of Player sprite. It actually contains complicated logic than “Tick” block, so I will have a detailed explanation here.

At first, it changes x by “sx”, meaning to change Player’s x position by a displacement of “sx”. After that, the program checks if the Player sprite touches the Platform. This could happen when the Player sprite moves to the position of a higher platform, as shown in the below image.

When the Player touches the platform wall, its y position will increase by 1 each time to check if it is still touching Platform. If the Player does not touch Platform any more, it means the Platform wall is not tall enough. The Player sprite could stumble onto it successfully, and the block execution is done. However, if after changing y by 12 steps and the Player sprite still touches the Platform, the platform wall must be high enough to block it from moving up.

So what will the program do? It will decrease y by 12 to set Player sprite to its initial vertical position, and then check if Up arrow key is pressed. If Up arrow key is pressed at this moment, it will set “sx” to a value which is opposite to its sign. What does it mean? In the following slow-motion video, we could see that the Platform edge is standing out a bit. When the Player sprite jumps at the platform wall, it might be blocked by the protrudent edge and fail to jump up to the higher platform.

Therefore, the program sets “sx” to a value, which represents 15 units movement in opposite direction. In this way, Player sprite could dogdge the edge and jump onto a higher platform successfully.

Please note that “sx” and “sy” variables are set in this tick iteration, but position change would be done in the next iteration of “tick”. The last step in this block is to adjust x position to make the Player sprite only stay one unit away from the platform wall.

“Change Player y by” Block

This block is responsible for moving sy steps in y direction and checking if the Player sprite touches the platform. Please note that the platform here could be either ground or overhead platform.

Through analyzing the blocks “Change Player x by” and “Change Player y by”, we could see that there are more scenarios to be considered when moving in x direction than in y direction. It is due to the arrangement of the platform. Player sprite moves and interacts with Platform and other objects mainly alone x direction. While in y direction, it is just jumping and falling behavior. If the platform game is arranged to run in vertical direction, the algorithm definitely will become different and the scenarios on y direction could become much more complicated.

“when I receive Tick” Code Segment

As I mentioned earlier, the main code segment will repeat running two code blocks. One is “Tick” block to adjust position and speed of Player sprite, the other is “broadcast message Tick”. So why should the main code segment broadcast so many “Tick” messages?

When any sprite receives “Tick” message, it will adjust its position to keep aligned with the change of Scroll x and Scroll y. Only through broadcasting and receiving messages frequently, all the sprites could move in a consistent direction to keep the game run smoothly.

Although the code in “when I receive Tick” is the same for each sprite, please note that all the “x” and “y” are local variables. Each sprite defines their own variables “x” and “y”. Their values are different. However, “Scroll x” and “Scroll y” are global variables, whose values are shared by all the sprites in the game.

If you review the sample project, you might notice there are other code segments for Player sprite. However, all the key code segments have been mentioned above. Once you understand the mechanism behind the sample code, you could design your own platformer game based on that and make adaptations. Don’t forget to enjoy the coding and have fun!

Note: All the analysis articles are copyright products of http://www.thecodingfun.com. Anyone re-posting them should credit author and original source. Anyone using them for commercial purposes or translating them into other languages should notify TheCodingFun and get confirmation first. All Rights Reserved.