How to build 3 types of character controls using Scratch

How to build 3 types of character controls using Scratch

Categorized under: technology tutorials

One of the key skills necessary when building projects is using the right type of controls for the character. There are times when you want the character to be controlled by the keyboard, other times you want the character’s movement to be automatic and other times you want a character to be based on how the mouse moves.

In this tutorial, we will go through how to create the different character controls in Scratch.

This is a great opportunity for both parents and beginners to learn how to build with a visual based programming language without getting tripped up on syntax and grammar that are typical challenges of text based languages.

To get started, we need to select a character that we would like to have move. In Scratch, these are referred to as Sprites. You can either draw your own character using the paint tool or select from the library of available characters. For this tutorial, I’m going to select Scratchy the Cat for my 1st character.

Once you have your character selected, you need to switch to the Code tab in Scratch. It is the far left selection at the top of the screen right next to Costumes.

1. Keyboard inputs

To build controls based on key inputs, we are going to use loops, conditional statements and sense whether or not, the keyboard button we have intended for movement is being pressed.

Moving Forward
Let’s start with moving our character forward using the Up Arrow key. To build this control, we will begin with a ‘When Green Flag Clicked’ block from Events. Next, we will add a ‘Forever’ block from Control. Inside the ‘Forever’ block, we will add a ‘If Then’ conditional statement from Control. Inside the diamond on the ‘If Then’ conditional statement, we will place a ‘When Key Pressed’ block from Sensing.  Instead of ‘Key Pressed’, we will change that to a ‘Up Arrow’.In the area of the conditional statement that doesn’t have a code block, we will add a ‘Move 10 steps’ from Motion.

Now if we press the green flag that’s above our project screen (right next to the red stop sign), our code for the character control we just built will start to run.

However, we can’t stop there. All we’ve done by pressing the Green Flag is readied our project for the keyboard input. Now, if you press the Up Arrow, you should see your character move 10 steps.

Congratulations, you’ve built your first character control.

However, when we build projects, we want our characters to have the ability to move in multiple directions. It would be great if we could have our character move forward, backward, turn left, and turn right.

Since we’ve just finished building our forward control, how do you think we should build the control to make our character move backward?

Moving Backward
Moving backward is going to be similar to how we made the controls for moving our character forward with 2 key differences. To build this control, we will begin with a ‘When Green Flag Clicked’ block from Events. Next, we will add a ‘Forever’ block from Control. Inside the ‘Forever’ block, we will add a ‘If Then’ conditional statement from Control. Inside the diamond on the ‘If Then’ conditional statement, we will place a ‘When Key Pressed’ block from Sensing.   Instead of ‘Key Pressed’, we will change that to a ‘Down Arrow’. In the area of the conditional statement that doesn’t have a code block, we will add a ‘Move -10 steps’ from Motion.

To recap, the key differences between moving our character forward and moving backward are: the keyboard input (Down Arrow vs. Up Arrow) and (Move -10 steps vs. Move 10 steps).

Now if you press the Green Flag again, you should see both blocks of code outlined in gold (that means they are running). And if you press the Up Arrow and Down Arrow, your character should move forward and backward.

We have 2 more controls that we need for this character, turn right and turn left. Based on what we did to move the character forward and backward, do you think you can build the code for turning left and turning right?

Turn Left 
To build this control, we will begin with a ‘When Green Flag Clicked’ block from Events. Next, we will add a ‘Forever’ block from Control. Inside the ‘Forever’ block, we will add a ‘If Then’ conditional statement from Control. Inside the diamond on the ‘If Then’ conditional statement, we will place a ‘When Key Pressed’ block from Sensing.   Instead of ‘Key Pressed’, we will change that to a ‘Left Arrow’. In the area of the conditional statement that doesn’t have a code block, we will add a ‘Turn 15 Degrees Counterclockwise’ from Motion. To make the turn more gradual, we can make the 15 smaller. For this, I would suggest 5 degrees.

Turn Right
To build this control, we will begin with a ‘When Green Flag Clicked’ block from Events. Next, we will add a ‘Forever’ block from Control. Inside the ‘Forever’ block, we will add a ‘If Then’ conditional statement from Control. Inside the diamond on the ‘If Then’ conditional statement, we will place a ‘When Key Pressed’ block from Sensing.   Instead of ‘Key Pressed’, we will change that to a ‘Right Arrow’. In the area of the conditional statement that doesn’t have a code block, we will add a ‘Turn 15 Degrees Clockwise’ from Motion. To make the turn more gradual, we can make the 15 smaller. For this, I would suggest 5 degrees.

Now if you press the Green Flag again, you should see all 4 blocks of code outlined in gold (that means they are running). And if you press the Up Arrow, Down Arrow, Left Arrow and Right arrow, your character should move in all directions.

2. Computer controlled

There are times when we aren’t going to want precise controls in our projects. For example, if one character is controlled by keyboard inputs then we want another character to utilize computer controls for their movement. By having the computer automatically control movement, then we can engage with our project more actively.To begin, select a second character. You can either draw the character or select one from the Scratch library. For this example, I’ve selected a butterfly. Once you have a character selected, click on the Code tab that is right next to Costumes.To build this control, we will begin with a ‘When Green Flag Clicked’ block from Events. Next, we will add a ‘Forever’ block from Control. Inside the ‘Forever’ block, we will place a ‘Glide (1) secs to X (5), Y(10) from Motion. Your X,Y numbers will be different based upon where your character is currently positioned. For now, those numbers don’t matter. Next, we will go to Operators and select 2 ‘Pick Random (1) to (10)’ blocks.We will place the first ‘Pick Random (1) to (10) block inside of the X coordinate in ‘Glide (1) sec to X(5), Y(10) and the other ‘Pick Random (1) to (10) inside of the Y coordinate.Now, we will need to change the range of the X and Y coordinates. In Scratch, the X coordinates range from -240 to 240 and Y goes from -180 to 180. So, we will change our X: Pick Random (-240) to (240) and Y: Pick Random (-180) to (180).Finally, if we click the Green Flag, we should see our character move across the screen to a random position every 1 second.If we want our character to move faster, we can make the 1 second a number smaller than 1 (0.1-0.9). If we want our character to move faster, we can make the 1 second a number greater than 1 (2-5).

3. Mouse inputs

There are times when instead of using keyboard inputs, we want to simply control our character based on the position of the mouse.To begin, select a third character. You can either draw the character or select one from the Scratch library. For this tutorial, I’ve selected a bat. Once you have a character selected, click on the Code tab that is right next to Costumes.To build this control, we will begin with a ‘When Green Flag Clicked’ block from Events. Next, we will add a ‘Forever’ block from Control. Inside the ‘Forever’ block, we will place a ‘Glide (1) secs to X (5), Y(10) from Motion. Your X,Y numbers will be different based upon where your character is currently positioned. For now, those numbers don’t matter. Next, we will go to Sensing and select ‘Mouse X’ and ‘Mouse Y’. We will replace X (5) with ‘Mouse X’ and Y(10) with ‘Mouse Y’.What we will notice if we run the block of code now is that the delay is too long as 1 seconds. When using mouse controls, we want our character to move as fast as possible to where our mouse is. So, we will reduce the 1 seconds to a number smaller than 1 (0-0.9).  For this exercise, I would recommend either 0 or 0.1.Now, if we we click the Green Flag, you should see the character move to exactly where the mouse is.

Conclusion

There are many different ways to control characters in Scratch. The ability to program character movement using controls is a foundational skill for building a wide variety of projects using this programming language.

About the Author: Omowale Casselle is the Co-Founder & CEO of Digital Adventures.