Although our kart can move freely about the stage, it isn't in any way restricted to the road. This doesn't make for much of a game. We need a way to check where the kart is driving, and if it hits the sandbox or a wall, we should see some effect on the kart.
This means that we should start checking collision events. What do we check against? The background image describes the shape of the racetrack, but it's a single object filling the stage, so we can't check against the background by name. The kart drives on top of it, so it always hits the background.
We could check for color, but the background is a detailed image. This means that we would have to check for many different colors that would produce the same effect. It's hard to determine if similar-looking colors are, in fact, equal. Computers are very precise about this.
So what we will do is create a simplified map to check the collision. We will draw all of the important shapes, but leave out the details. Collision checks will be a lot less confusing this way. This collision mask will be hidden from view, but the scripts will work with it. In this way, it relates to the background in a way similar to how the control sprite relates to the kart sprite.
For this step, it will be really useful to have an external image editor. That would make it much easier to work with complicated shapes, such as the curves in the road. You can draw the collision mask in the Scratch editor too, but it will probably be less precise.
We will draw the collision mask in the Scratch Costumes editor. Let's see how to do so:
The following screenshot shows the road in the process of being shaped with the Reshape tool:
Once all of the shapes are in the proper place to be a simplified copy of the background image, our collision mask is complete.
We will add a small script to the mask to properly place it and make it invisible. The scripts that we add soon will still respond to the collision mask, but the players will see the much better-looking Backdrop image:
0
for both the empty slots. If the placement looks off center after running the script, also check whether the center point of the sprite is placed at the absolute center of the image.100
. We use a high number to make sure that the collision mask is moved to the bottom.100
to make the mask invisible.The finished script will look like the following screenshot:
This step is simply in preparation for the next scripting step. We just drew a simplified copy of the background by hand, using whichever drawing skills and tools we had available.
It can be a bit tricky, depending on how accustomed you are with digital drawing tools. However, it is very worthwhile to spend some time on it. With each effort you will improve your drawing skills, and these skills will be very useful for all kinds of digital creations, from games to animation. You might even learn a bit about how to edit your holiday pictures.
18.226.185.196