- ep.1 Player Movement ( Here Now )
- ep.2 Scrolling
- ep.3 Building ( Publishing on 11/16 )
Welcome, young game creator! Ever wanted to make your own version of Fortnite? This simple tutorial will show you how to make a fun 2D game using Scratch. You'll control Scratch Cat, navigating through the game by building and shooting, all while dodging enemy bullets. Don't worry about complex controls; this game keeps things straightforward and easy to manage, perfect for beginners. Dive into the basics of game design and coding with us and create your own exciting shooter game!
The finished project will look like this.
Goal
This time, the goal is to enable the player to walk and jump. We'll also work on implementing some basic animations.
The short video below shows the goal we aim to create in episode 1.
Remix
This tutorial includes a starter project, so remix it. It contains all the necessary costumes.
Sprite 'Hitbox'
This time, we'll use two sprites, Player and Hitbox, to create player movements. First, we'll implement Hitbox to establish the base for the actions.
Open 'Hitbox'.
When the green flag is clicked, set X to -180 and Y to 180 to adjust the initial position.
Set the direction to face right and limit the rotation style to left-right only.
Set size to 60%.
Set 'ghost' effect to 0 temporally. Set the value to 100 later to make the Hitbox invisible, but for now, keep it visible.
Go to front layer and show.
Variable 'SPEED Y'
Create a variable named SPEED Y. In this tutorial, most variables will be set to 'For all sprites'.
Set 'SPEED Y' to 0.
Place the forever block.
Block Definitions: 'Move X', 'Gravity' and 'Jump'
Place these blocks inside the loop.
Block Definition 'Move X'
Movement to the right
Place a conditional block that says, "When the right arrow key is pressed."
Point in direction 90 and move 5 steps.
Set it up so that the player stops when touching walls or stairs.
Place another conditional block which has an 'OR' block.
Set 'touching Wall?' to the left and 'touching Stairs?' to the right.
In that case, move -10 steps, meaning backwards.
Movement to the left
Duplicate all blocks in the 'Move X'.
Paste it right below.
Make two changes as shown in the screenshot below.
Block Defintion 'Gravity'
Implement gravity to make the Player fall downwards. Make sure the player stops at the ground to prevent falling off the screen edge.
Change y by 'SPEED Y'.
Place an if block to check if it touches a specified color.
Use the eyedropper tool to select the ground's outline color and set it accordingly.
Since the outline is pure black, you can quickly set it directly with color 0, saturation 0, brightness 0 instead of using the eyedropper tool.
Change y by '0 - SPEED Y'. Moving in the opposite direction of SPEED Y means to make it bounce off the ground.
Set 'SPEED Y' to 0.
Outside the loop, decrease SPEED Y by -1.
Preview
When the green flag is clicked, the Hitbox falls, lands on the ground, and then can move left and right. Cool!
Block Definition 'Jump'
Let’s set up a jumping action!
At first, I thought using the space key would be cool, but now I think the up arrow key feels more natural. Even though the screenshot shows the space key, go ahead and switch it to the up arrow key for jumping—it’ll be easier to use!
Set 'SPEED Y' to 20.
Variable 'JUMPING?'
Create a new variable named 'JUMPING?' for all sprites.
Set 'JUMPING?' to 1, which means player is jumping!
Surround these blocks with a conditional block.
Let's check if the value of 'JUMPING?' is zero.
Gravity
Set 'JUMPING?' to 0 when the player touches the ground.
Preview
Woohoo! You're jumping really high! If you want to adjust the jump height, just change the SPEED Y value we set to 20 earlier. Try playing around with different numbers to see what works best for you!
Sprite 'Player'
Now, let's synchronize the Hitbox and Player to move them as one character.
Open 'Player'
First, let's set the rotation style to left-right only.
Set it to display on the front layer and scale it down to 60% size.
Place a forever block.
Go to Hitbox inside.
Set it to face the same direction as the Hitbox.
Preview
Great, the two sprites are now synchronized and moving together. There are still some quirks to fix, so let's address them one by one.
Bug fix
Even though everything seems fine in the short video, if you keep hitting the green flag, you might notice the Hitbox popping in front of the Player.
Let's sort that out quickly!
Open 'Hitbox'.
Set ghost effect to 100.
That fixed it!
Sprite 'Player'
Alright, let’s dive into some simple animations next. We'll keep it basic for now, and I'll show you how to do more complex animations another time.
Open 'Player'.
Let's place a "when green flag clicked" block and add a forever loop to it.
Place a conditional block to check if the right arrow key is pressed.
Block Definition 'Move X'
Place this block inside the 'if' block.
And Duplicate the 'if' block.
Place it right below and change "right" to "left."
In 'Move X', switch costume to 'run-01' and wait for 0.1 seconds.
Repeat this set of the blocks like below.
Preview
Awesome! Scratch Cat is smoothly walking and jumping now—we've got the basics of movement down. Great job! Next time, we'll make sure that when Scratch Cat jumps off the screen, it disappears properly, and we'll make the stage scroll too. Let's keep developing the game. Scratch on!
- ep.1 Player Movement ( Here Now )
- ep.2 Scrolling
- ep.3 Building ( Publishing on 11/16 )