Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon

Beating Back the Horde

Save for later
  • 9 min read
  • 18 Feb 2014

article-image

(For more resources related to this topic, see here.)

What kind of game will we be making? We are going to make one of the classics, a Tower Defense game. (http://old.casualcollective.com/#games/FETD2.) Our game won't be as polished as the example, but it gives you a solid base to work with and develop further.

article-beating-back-the-horde-img-0

Mission briefing

We will use the cloning tools again to create hordes of enemies to fight. We will also use these tools to create cannons and cannonballs. It's easy to re-use assets from other projects in Scratch 2.0. The new Backpack feature allows you to easily exchange assets between projects. How this works will be demonstrated in this article.

article-beating-back-the-horde-img-1

Why is it awesome?

This example is a lot more involved than the previous one. The final result will be a much more finished game which still leaves plenty of room to adapt and continue building on. While making this game, you will learn how to draw a background and how to make and use different costumes for a single sprite.

We will make full use of the cloning technique to create many copies of similar objects. We will also use more variables and another type of variable called List to keep track of all the things going on in the game.

You will also learn about a simple way to create movement patterns for computer-controlled objects.

Your Hotshot objectives

We will divide the articlein to the following tasks based primarily on the game sprites and their behavior:

  • Creating a background
  • Creating enemies
  • Creating cannons
  • Fighting back

Mission checklist

Click on the Create button to start a new project. Remove the Scratch cat by right-clicking on it and selecting delete.

Creating a background

Because the placement and the route to walk is important in this kind of game, we will start with the creation of the background. To the left of the Sprites window, you will see a separate picture. Underneath is the word Stage and another word, the name of the picture that's being shown. This picture is white when you start a new project because nothing is drawn on it yet. The following is an example with our background image already drawn in:

 

article-beating-back-the-horde-img-2

Engage thrusters

We will draw a grassy field with a winding road running through it when looked at from the top, by going through the following steps:

  1. Click on the white image.
  2. Next click on the Backdrops tab to get to the drawing tool. This is similar to the Costumes tab for sprites, but the size of the drawing canvas is clearly limited to the size of the stage.

    article-beating-back-the-horde-img-3

  3. Choose a green color and draw a rectangle from the top-left to the bottom-right of the canvas.
  4. Then click on the Fill tool and fill the rectangle with the same color to create a grassy background.
  5. On top of the field, we will draw a path which the enemies will use to walk on.
  6. Switch the Fill tool to a brown color.
  7. Draw rectangles to form a curving path as shown in the following screenshot. The background is now done. Let's save our work before moving on.

    article-beating-back-the-horde-img-4

Objective complete – mini debriefing

The background is just a pretty picture with no direct functionality in the game. It tells the player what to expect in the game. It will be logical that enemies are going to follow the road that was drawn. We will also use this road as a guideline when scripting the movement path of the enemies. The open spaces between the path make it obvious where the player could place the cannons.

Creating enemies

We will quickly create an enemy sprite to make use of the background we just drew. These enemies will follow the path drawn in the background. Because the background image is fixed, we can determine exactly where the turns are. We will use a simple movement script that sends the enemies along the path from one end of the stage to the other. Like with the targets in the previous project, we will use a base object that creates clones of itself that will actually show up on stage.

Prepare for lift off

We will first draw an enemy sprite. Let's keep this simple for now. We can always add to the visual design later. The steps to draw it are as follows:

Unlock access to the largest independent learning library in Tech for FREE!
Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
Renews at $19.99/month. Cancel anytime
  1. Click on the paintbrush icon to create a new sprite.
  2. Choose a red color and draw a circle. Make sure the circle is of proper size compared to the path in the background.
  3. Fill the circle with the same color.
  4. We name the new sprite enemy1.

That's all for now! We will add more to the appearance of the enemy sprite later. The enemy sprite appears as a red circle large enough to fit the path.

 

article-beating-back-the-horde-img-5

Engage thrusters

Let's make it functional first with a script. We will place the base enemy sprite at the start of the path and have it create clones. Then we will program the clones to follow the path as shown in the following steps:

  1. The script will start when the when <green flag> clicked block is clicked.
  2. Place the sprite at the start of the path with a go to x: -240 y: 0 block.
  3. Wait for three seconds by using the wait ... secs block to allow the player to get ready for the game.
  4. Add a repeat … block.
  5. Fill in 5 to create five clones per wave.
  6. Insert a create clone of <myself> block.
  7. Then wait for two seconds by using the wait ... secs block so the enemy clones won't be spawned too quickly.

Before we start moving the clones, we have to determine what path they will follow. The key information here are the points where the path bends in a new direction. We can move the enemies from one bend to another in an orderly manner.

Be warned that it may take some time to complete this step. You will probably need to test and change the numbers you are going to use to move the sprites correctly. If you don't have the time to figure it all out, you can check and copy the image with the script blocks at the end of this step to get a quick result.

Do you remember how the xy-coordinate system of the stage worked from the last project? Get a piece of paper (or you can use the text editor on your computer) and get ready to take some notes. Examine the background you drew on the stage, and write down all the xy-coordinates that the path follows in order. These points will serve as waypoints.

Look at the screenshot to see the coordinates that I came up with. But remember that the numbers for your game could be different if you drew the path differently.

To move the enemy sprites, we will use the glide … secs to x: … y: ... blocks. With this block, a sprite will move fluidly to the given point in the given amount of time as shown in the following steps:

  1. Start the clone script with a when I start as a clone block.
  2. Beyond the starting point, there will be seven points to move to. So stack together seven glide … blocks.
  3. In the coordinate slots, fill in the coordinates you just wrote down in the correct order. Double-check this since filling in a wrong number will cause the enemies to leave the path.

    Deciding how long a sprite should take to complete a segment depends on the length of that segment. This requires a bit of guesswork since we didn't use an exact drawing method. Your most accurate information is the differences between the coordinates you used from point to point.

  4. Between the starting point (-240,0) and the first waypoint (-190,0), the enemy sprite will have moved 50 pixels. Let's say we want to move 10 pixels per second. That means the sprite should move to it's new position in 5 seconds.
  5. The difference between the first (-190,0) and the second (-190,125) waypoint is 125. So according to the same formula, the sprite should move along this segment of the path in 12.5 seconds.
  6. Continue calculating the glide speeds like this for the other blocks. These are the numbers I came up with : 5, 12.5, 17, 26.5, 15.5, 14, and 10.5, but remember that yours may be different

    You can use the formula new position – old position / 10 = result to figure out the numbers you need to use.

  7. To finish off, delete the clone when it reaches the end of the path.

Test your script and see the enemies moving along the path. You might notice they are very slow and bunched together because they don't travel enough distances between spawns. Let's fix that by adding a variable speed multiplier. Not only can we easily tweak the speed of the sprites but we can also use this later to have other enemy sprites move at different speeds, as shown in the following steps:

  1. Create a variable and make sure it is for this sprite only.
  2. Name it multiplier_R. The R stands for red, the color of this enemy.
  3. Place set <multiplier_R> to … at the start of the <green flag> script.
  4. Fill in 0.3 as a number for the basic enemy.
  5. Take the speed numbers you filled in previously and multiply them with the multiplier.
  6. Use a ...*... operator block.
  7. Place the multiplier_R variable in one slot.
  8. Type the correct number in the other slot.
  9. Place the calculation in the glide block instead of the fixed number.The completed scripts for enemy movement will look as follows:

    article-beating-back-the-horde-img-6

Objective complete – mini debriefing

Test the game again and see how the enemies move much faster, about three times as fast if you have used 0.3 for the multiplier. You can play with the variable number a bit to see the effect. If you decrease the multiplier, the enemies will move even faster. If you increase the number, the enemies will become slower.