How to draw Sprites in Scratch for Liam’s racing car game
This post builds on the sprites we created in Part 1 of the Racing Car Game. Learning how to draw sprites in Scratch is immensely useful for everything you’ll go on to create, and once you know how to make one, you’ll be able to apply the same skills to heaps more!
There are quite a lot of steps to making the racing car sprite, but it becomes easy if you break it down. That’s what we’ve done here for you. If you get stuck on any of the steps, make sure to hop down to the comments and let us know, or get in touch directly on our contact form.
Follow along with the steps below:
The racing car for the game is mostly made from rectangles, so it’s easier than it looks. Have a look through the steps in the slides above, and follow the step-by-step instructions to make your own.
Step 1 – open a blank canvas
To get started, you need a new blank canvas. In Scratch, open the Sprite menu in the bottom right hand corner of the screen and select the Paint option. It will generate a new sprite, but there won’t be anything really to see at this stage. When the sprite is generated, it will open on the coding tab, which will be blank at the moment.
Step 2 – draw sprites in the costumes tab
In the top left hand corner of your screen, you’ll have three tabs – Code, Costumes & Sounds. Click on the Costumes tab. In the middle of your screen, you’ll have a canvas of grey & white squares, ready to start building your sprite.
Step 3 – your toolbox
The left-hand side of the canvas shows all the tools you have available to draw your sprite with. Select the Rectangle tool from the menu, and choose the colour you want your car to be. The colour option is in the top-left corner of the canvas, and clicking on the colour will open up options.
Step 4 – draw a rectangle to start your sprite
Now that you have the Rectangle tool, use it to draw a rectangle of approximately car proportions. It doesn’t need to be exact. From the left-hand menu, choose the mouse arrow at the top of the list and drag your rectangle to the centre of the canvas. In the middle of the canvas is a small x to mark it. Try to centre your rectangle over the x. Later on, when you’re creating the additional costumes that make the car turn diagonally, this small step will prove important.
Step 5 – transform the rectangle
Now that you have a rectangle, go back to the menu and choose the Reshape tool. It’s next to the mouse arrow option, and shows an arrow clicking on a little dot. This is a very clever tool that lets you manipulate existing shapes.
Step 6 – form the bonnet and boot of the car
With the Reshape tool, click and drag the lines of the rectangle to round out the front and back of the car to form the bonnet and boot. Start by clicking in the middle of each line, to make it symmetrical, and then add some extra rounding between the centre and corner if you need to. Where the arrows appear to be sticking out each side of the dot, you can click on these to twist the line around the dot. Give it a try to see if you like the effect.
On each side of the car, drag the lines slightly inwards to give a streamlined effect. Keep clicking and dragging until the corners are rounded and you’ve got smooth lines that you’re happy with.
Step 7 – layer up two more rectangles
The rectangle you’ve worked on above will be the body of the car. Now, layer up two more rectangles to make the windows and the roof. The second rectangle, for the windows, will be black or dark grey, and the third rectangle could either match the main colour of your car or stand out with a contrasting colour. Try to place the rectangles in a centred position over the car body.
Step 8 – keep shaping
Use the Reshape tool again on both of the new rectangles to round them out. The front and back should be rounded out to approximately follow the shape of the bonnet and boot, but the sides can stay straight.
Step 9 – add some bright detail to your sprite
Now we’re starting to move into the detailing phase of the sprite. Select the Line tool from the menu, and choose a different colour that will stand out against the colour of your car. Liam chose bright yellow lines for his red car. Draw the lines diagonally outwards like in the slides above, on both the bonnet and the boot.
Step 10 – even more rectangles
The sprite needs a spoiler to really complete the racing car look. Using the Rectangle tool again, draw a black rectangle at the back of the car. Aim for it to be about as long as the gap between the diagonal lines. You can make yours shorter or longer to suit. When it is the right size, use the mouse pointer if you need to drag it to be centred at the rear of the car.
Step 11 – changing the order of the components
There is another menu available for drawing sprites that we haven’t looked at yet. This is the icons directly above the canvas, and has options like group, ungroup, forward, back etc. While the rectangle is selected, click the Back button in the top right corner of that menu. It’s shown in the slides above with a green arrow in Step 11, to make it easy to find. Clicking Back will move the rectangle below the other elements of the car, so that you keep those curved lines on top.
Now you know how to draw sprites in Scratch!
And there you have it – a streamlined racing car ready to hit the road!
If you want more tricks for how to draw sprites in Scratch, check back in the next few days. We’re putting together a post right now about how to modify existing sprites from the Scratch library to make them uniquely yours.
When you’ve got your racing car ready to go, head over to Part 2 of the racing car game to learn how to code your sprite!
3 Comments