Howardism: Building a Game

Building a Game

In this chapter, we will build a complete game from scratch… in Scratch. I will skimp a little bit and assume I have the graphic images, but other than that…

First step, is to download my Scratch Game which has the background and main character already loaded. This is just to get the graphics started, as you'll notice there aren't any code blocks.

Next, you'll notice Shaymin, a little hedgehog-looking creature from the overly bizarre world of Pokemon. The kids seem to like it (still?), so we'll use it. However, just about any sprite with two-stage animation will work (like the Scratch Cat).

We'll create an animation sequence with with move the hedgehog in an animated way:

Double-clicking on that stack will show our sprite walking towards the right. We want to tie that stack to a keystroke, like the right arrow key:

Not bad, but if you hit the arrow key once, the sprite may stop mid-step, so let's have it so that when we hit the right arrow key, we get a full step, by repeating the animation twice:

Let's make it so we can work this both ways with a left and right arrow key:

Of course, we have a problem. When we hit the left arrow, the hedgehog walks backwards… doing the moon walk. It would be better if it actually turned around. Let's use the point in direction block to turn ourself about:

Try it out and you'll notice that it isn't quite what we wanted (although it always gives the kids in class a little chuckle). This is what we call a bug. The computer is doing exactly what we told it to do, it just isn't what we want it to do.

When we have the sprite turn in the opposite direction, we want it to flip the costume to the left. You'll notice at the top of the screen in the Sprint Information section, there is a picture of the sprite in its current costume with a thin blue line. If you click and hold the mouse on that line, you can move the sprite around.

On the left side of that image are three buttons. Click the middle button to lock the sprite so that it only points either "left" or "right", as in the following screenshot:

Test it out by pressing the left and right arrow keys and notice that the sprite walks the way we expect.

Well, it does was we expect until we walk off the edge of the mountain. This creature isn't suppose to fly, but it looks that way.

What we want it to do is fall down to the ground. In other words:

If the sprite is not touching the ground,
move down

Under the Sensing block section, is a touching color block which tests to see if a sprite is touching a particular color. Our ground is a nice solid brown color, so drag that block out, and then click on the colored box to turn the mouse pointer into an eye dropper tool. Next, click on the brown ground.

Now combine that block with these blocks in order to render our logic that we stated above:

Picking up the sprite and putting him in the air makes him slowly fall to the ground. It is much better, as he will follow the ground down a hill. However, he doesn't go up a hill, and instead tunnels right through:

Again, not exactly what we want. We need a way to make the sprite stay on top of the ground, but not up in the air. In other words:

If the sprite's face is in the ground,
move up

Scratch has the ability to not just test whether the sprite is touching a color, but whether a particular color on the sprite is touching another color, and this is just what we need. In this particular sprite, it has a white face, so our test can be:

If the sprite's white color is touching ground's brown,
move up

You'll find this new color is touching color block in the Sensing section:

Now our sprite tracks the ground pretty good. It will go up and down the hills. Sure it isn't quite perfect, but it is good enough for the moment, and we could come back to it to make it a little better.

What should we do when the sprite reaches the edge of the screen?

Let's first wrap it, so that moving off the edge of one side of the screen places him on the other side.

Under the Sensing block section, is a another touching block. It has a pull-down arrow allowing us to test whether our sprite is touching the edge of the screen. Granted, it doesn't tell us whether we are touching the left or right edge (or top or bottom for that matter), but we can assume that if we are pressing the left arrow key when we touch an edge, we are probably touching the left edge.

So add the following condition to the end of each of our arrow key blocks:

That works pretty good. But what would make the game a little more exciting is when she walks off the screen to have him reappear in a new location in our world. In other words, when she walks off the edge, we will change the background.

Now this sprite can't actually change the background, but she can send out a message for the stage to pick up, so that the stage can change its background.

So add the following broadcast messages to our condition:

Switch to the stage, by clicking the Stage icon down in the Sprite Panel. Next, click on the Backgrounds tab (notice it doesn't say Costumes). We have 5 different backgrounds to choose from, and we might as well have him walk in sequence between them, as that will give us some continuity to our game world.

When the right arrow key is pressed, we can use the next background block to increment the background, but what should we do about choosing a previous background?

Each background is numbered, in this case, from 1 to 5. Next, you'll notice a variable block (bucket) called background # which holds the number of the background we are currently displaying.

So all we need to do is subtract 1 from this variable, and use the switch to background block, like this:

Now, our sprite can wander all over our world.

Power Ball

But what will our little sprite do? We'll have little power balls drop from the sky, and he can pick them up.

Download (or draw) the red ball on the right and then click the Sprite Import button to create a new sprite based on this image.

We can use the same code from our first sprite to make the ball fall to the ground. Let's start it up in the air and let it float down:

However, if the ball always drops from the center of the screen, it will get a little predictable, so change the x coordinate to be a random number.

You can choose the pick random block from the Numbers panel:

Next, we should make it so that when it touches our Shaymin sprite, it hides itself. The touching block that we used to detect when we were touching an edge of the screen can be used to detect if one sprite is touching another sprite.

So, we can wait until the Power Ball sprite touches the Shaymin sprite, and the hide and end the stack, as in:

However, it would be nice to have the power ball look… well, powerful. Under the Looks block section is a change block with lots of fun options. I've played with them all, and I like the whirl option as it takes the reflection in the ball and pulses it. However, once we whirl the image, we need to whirl it back.

Let's get rid of the wait until block and use a repeat until block and work our animation inside that block. Experiment until you get the effect you like, however, here is my version:

Now we need something to trigger this block of code to run. Let's assume that we'll get a Ball Appear message to start this off.

But you'll notice that since we don't do a check for touching the Shaymin sprite until the Ball sprite is actually on the ground, there is a slight delay when the ball actually lands on top of the sprite.

No problem, we can move the sprite to the ground and do a touch sprite test in two separate stacks and have them run at the same time by using the same trigger, like this:

Double click the broadcast block, and the power ball acts the way it should. Now we just need to put that broadcast where it will get called regularly.

Also, when the Shaymin sprite gets a power ball, should we keep track of how many balls he has picked up? Perhaps after the hide block, we could have the power ball send a message to the Shaymin sprite. What about a bird that might want to steal the ball before we can pick them up? Or the bird could attack our hero.

Now you have the basics for a standard side scrolling adventure game. Have fun and let me know how your game turns out.

Continue to the next chapter, or return to previous chapter.

Tell others about this article:

Click here to submit this page to Stumble It


	1. Introduction 2. Overview - What is Scratch Good For? 3. Downloading and Installing Scratch 4. Concepts and Overview of Scratch 5. Getting Started with a First Project 10. Making Music 11. Moving Sprites Around 12. Interacting Sprites 13. Passing Messages with Broadcasts Read other entries in Book...	Building a Game In this chapter, we will build a complete game from scratch… in Scratch. I will skimp a little bit and assume I have the graphic images, but other than that… First step, is to download my Scratch Game which has the background and main character already loaded. This is just to get the graphics started, as you'll notice there aren't any code blocks. Next, you'll notice Shaymin, a little hedgehog-looking creature from the overly bizarre world of Pokemon. The kids seem to like it (still?), so we'll use it. However, just about any sprite with two-stage animation will work (like the Scratch Cat). We'll create an animation sequence with with move the hedgehog in an animated way: Double-clicking on that stack will show our sprite walking towards the right. We want to tie that stack to a keystroke, like the right arrow key: Not bad, but if you hit the arrow key once, the sprite may stop mid-step, so let's have it so that when we hit the right arrow key, we get a full step, by repeating the animation twice: Let's make it so we can work this both ways with a left and right arrow key: Of course, we have a problem. When we hit the left arrow, the hedgehog walks backwards… doing the moon walk. It would be better if it actually turned around. Let's use the `point in direction` block to turn ourself about: Try it out and you'll notice that it isn't quite what we wanted (although it always gives the kids in class a little chuckle). This is what we call a bug. The computer is doing exactly what we told it to do, it just isn't what we want it to do. When we have the sprite turn in the opposite direction, we want it to flip the costume to the left. You'll notice at the top of the screen in the Sprint Information section, there is a picture of the sprite in its current costume with a thin blue line. If you click and hold the mouse on that line, you can move the sprite around. On the left side of that image are three buttons. Click the middle button to lock the sprite so that it only points either "left" or "right", as in the following screenshot: Test it out by pressing the left and right arrow keys and notice that the sprite walks the way we expect. Well, it does was we expect until we walk off the edge of the mountain. This creature isn't suppose to fly, but it looks that way. What we want it to do is fall down to the ground. In other words: If the sprite is not touching the ground, move down Under the Sensing block section, is a `touching color` block which tests to see if a sprite is touching a particular color. Our ground is a nice solid brown color, so drag that block out, and then click on the colored box to turn the mouse pointer into an eye dropper tool. Next, click on the brown ground. Now combine that block with these blocks in order to render our logic that we stated above: Picking up the sprite and putting him in the air makes him slowly fall to the ground. It is much better, as he will follow the ground down a hill. However, he doesn't go up a hill, and instead tunnels right through: Again, not exactly what we want. We need a way to make the sprite stay on top of the ground, but not up in the air. In other words: If the sprite's face is in the ground, move up Scratch has the ability to not just test whether the sprite is touching a color, but whether a particular color on the sprite is touching another color, and this is just what we need. In this particular sprite, it has a white face, so our test can be: If the sprite's white color is touching ground's brown, move up You'll find this new `color is touching color` block in the Sensing section: Now our sprite tracks the ground pretty good. It will go up and down the hills. Sure it isn't quite perfect, but it is good enough for the moment, and we could come back to it to make it a little better. What should we do when the sprite reaches the edge of the screen? Let's first wrap it, so that moving off the edge of one side of the screen places him on the other side. Under the Sensing block section, is a another `touching` block. It has a pull-down arrow allowing us to test whether our sprite is touching the edge of the screen. Granted, it doesn't tell us whether we are touching the left or right edge (or top or bottom for that matter), but we can assume that if we are pressing the left arrow key when we touch an edge, we are probably touching the left edge. So add the following condition to the end of each of our arrow key blocks: That works pretty good. But what would make the game a little more exciting is when she walks off the screen to have him reappear in a new location in our world. In other words, when she walks off the edge, we will change the background. Now this sprite can't actually change the background, but she can send out a message for the stage to pick up, so that the stage can change its background. So add the following `broadcast` messages to our condition: Switch to the stage, by clicking the `Stage` icon down in the Sprite Panel. Next, click on the Backgrounds tab (notice it doesn't say Costumes). We have 5 different backgrounds to choose from, and we might as well have him walk in sequence between them, as that will give us some continuity to our game world. When the right arrow key is pressed, we can use the `next background` block to increment the background, but what should we do about choosing a previous background? Each background is numbered, in this case, from 1 to 5. Next, you'll notice a variable block (bucket) called `background #` which holds the number of the background we are currently displaying. So all we need to do is subtract 1 from this variable, and use the `switch to background` block, like this: Now, our sprite can wander all over our world. Power Ball But what will our little sprite do? We'll have little power balls drop from the sky, and he can pick them up. Download (or draw) the red ball on the right and then click the Sprite Import button to create a new sprite based on this image. We can use the same code from our first sprite to make the ball fall to the ground. Let's start it up in the air and let it float down: However, if the ball always drops from the center of the screen, it will get a little predictable, so change the x coordinate to be a random number. You can choose the `pick random` block from the Numbers panel: Next, we should make it so that when it touches our Shaymin sprite, it hides itself. The `touching` block that we used to detect when we were touching an edge of the screen can be used to detect if one sprite is touching another sprite. So, we can `wait until` the Power Ball sprite touches the Shaymin sprite, and the hide and end the stack, as in: However, it would be nice to have the power ball look… well, powerful. Under the Looks block section is a `change` block with lots of fun options. I've played with them all, and I like the whirl option as it takes the reflection in the ball and pulses it. However, once we whirl the image, we need to whirl it back. Let's get rid of the `wait until` block and use a `repeat until` block and work our animation inside that block. Experiment until you get the effect you like, however, here is my version: Now we need something to trigger this block of code to run. Let's assume that we'll get a `Ball Appear` message to start this off. But you'll notice that since we don't do a check for touching the Shaymin sprite until the Ball sprite is actually on the ground, there is a slight delay when the ball actually lands on top of the sprite. No problem, we can move the sprite to the ground and do a `touch` sprite test in two separate stacks and have them run at the same time by using the same trigger, like this: Double click the `broadcast` block, and the power ball acts the way it should. Now we just need to put that broadcast where it will get called regularly. Also, when the Shaymin sprite gets a power ball, should we keep track of how many balls he has picked up? Perhaps after the `hide` block, we could have the power ball send a message to the Shaymin sprite. What about a bird that might want to steal the ball before we can pick them up? Or the bird could attack our hero. Now you have the basics for a standard side scrolling adventure game. Have fun and let me know how your game turns out. Continue to the next chapter, or return to previous chapter. Tell others about this article:
	2009, Howard Abrams Some rights reserved	Originally written on 18 May 2009. Updated on 21 May 2009.