In my previous posts, I summarized some key points when following Griffpatch’s online tutorial to design a scrolling platformer game. However, the Player in video clips is still of a rectangle shape, without any costume change. In many games, Player is a figure which has different poses of running, jumping or falling.

How to add costumes to Player has been mentioned in another Scratch tutorial project of Griffpatch. If you are interest in the full project, you could visit this address: https://scratch.mit.edu/projects/67727504/

The following images are extracted from that project and based on that, I will emphasize some key concepts of costume design.

Concept 1: Hitbox Costume

Hitbox costume is easy to be understood. It is of a shape of rectangle, just like the costume used in Griffpatch’s tutorial project. When “Tick” block adjusts the position of Player, using Hitbox costume is more accurate, otherwise, the minor protrusion of the figure might judge touching condition wrongly.

In order to have a better visual effect, the hitbox size should be similar to that of figure.

Concept 2: Animation

The Player’s major activities include standing still, walking, jumping up and falling down. Each pose should contain several costumes. For example, it is not rare to have 6 or more costumes for walking pose. Depending on the features of the project, you might also need to prepare costumes for climbing, fighting, turning somersault, etc.

You could design costume by yourself, or import them from other resources.

Label the costume clearly so both you and others could know the meaning of each costume. Putting costumes of same category together is also important. Later when we analyze costume related code of a sample project, you would see that the costumes of same category will iterate in a loop to generate continuous moving effect.

Concept: Frame rate

Frame rate decides the costume changing speed. Computer runs very fast, so “Tick” block (used in Griffpatch’s sample project) runs one iteration with just a fraction of a second. If the program makes Player switch costume after each iteration, it is switching too fast to look real. Frame rate is designed to slow down the costume switching speed. It is implemented by changing “frame” variable a fraction (change frame by “1/ Change Costume Every”) each time. As shown in the below image.

Concept: Costume Number for One Pose

The following is the costume list of a sample project. The first one is hitbox costume. It is followed by 4 climbing costumes, 4 jumping costumes, 1 standing still costume and 7 walking costumes.

When the Player is walking, its pose will iterate among the 7 walking costumes. How to specify the costume starting index and ending index? a simple method is to use this formula: “starting index + frame mod (costume number)”. For example, the walking pose’s starting index = 11, through calling “switch costume to (11 + frame mod 7)” block, the costume will switch between costume 11 and costume 17, the 7 costumes corresponding to walking pose.

Sample Project

This sample project is an extension to Griffpatch’s online tutorial project. If you follow his 10 video clips to finish a scrolling platformer game, you are ready to add costumes to your Player.

In the following section, I will just list those code segments which are affected by this new feature. If you have interest to see the full project, please visit this address: https://scratch.mit.edu/projects/487534917/

Note: all the following code occurs in Player sprite of the scrolling platformer game.

“when I receive play game” Code Segment

This code segment wraps the key steps of the scrolling platformer game. In order to add costume feature, the program switches costume to “hitbox” at the beginning of each iteration. After running “tick’ block, it calls “SetCostume” block to set a proper costume.

if your project includes extra features, such as climbing the ladder or dangling on the rope, those blocks also need to make changes for their code. I will introduce them in the following section.

“tick” Block

In the “tick” block, the program adds “set frame to 0” when Player switches from one pose to the other. When absolute value of x is bigger than 1, we could say that the Player is walking. The program will change frame by a fraction (change frame by round (abs of sx / 8)). Here the frame changing rate is related to “sx”. The bigger sx is, the quicker the frame increases.

When Up arrow key is pressed and “in air” variable is smaller than 4, we could say that Player is going to jump. The program will set frame to 0, indicating the start of a new pose.

“climb the ladder” Block

If Player is climbing a ladder, the program will set “frame” to 0, indicating the starting of a new pose. At the end of each iteration of “repeat until” loop, it will call “SetCostume” block to set a proper costume.

“dangle on the rope” Block

Similar to “climb the ladder” block, this block should also call “SetCostume” at the end of each iteration within “repeat until” loop. However, since we only use one costume for this pose, we do not need to set “frame” to 0.

“SetCostume” Block

Finally, we are going to introduce “SetCostume” block, which wraps all the different conditions of the Player and sets a real costume. When EXIT variable is “ladder”, we could say that Player is climbing the ladder. The program switches costume between costume 2 and costume 5. When EXIT variable is “rope”, it will use a single costume “jump 3”. When “in air” variable is smaller than 3, we are sure that Player is on the ground. The program further checks the value of “frame”. If frame is equal to 0, indicating the Player is standing still, it will set costume to “walk 1”, otherwise, switch costume between costume 11 and 17.

The same logic applies to jumping pose. When sy > 0, indicating the Player is jumping up, it will use costume “jump 1” or “jump 2”. When sy <=0, indicating Player is falling down, it will use costume “jump 3” or “jump 4”.

That is all the code to add costumes to your Player. Now the scrolling platformer game is more vivid and complete. If you are keen on learning more programming tips on platformer game, stay tuned and I will introduce how to add ladder, rope and other gadgets to the game. 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.