You may think that game making is all about writing code, but think again. You’ve probably heard the acronym STEAM in school—it stands for science, technology, engineering, art, and math. These subjects all share similar thinking skills, which means learning how to draw can make you better at science and math.
Drawing is about angles and ratios and fractions. It’s about creative problem solving and figuring out how to take an idea from your mind and get it onto the screen. Thinking like an artist means understanding which colors go together, how to break down objects into smaller parts, and how to create depth with shading. These are all things you’ll learn with this book.
Pixel art is a lot more forgiving than paint and canvas; remember, you’re not creating Picassos, you’re creating Pac-Mans. Take a deep breath if you’re worried that you don’t have the talent to design your own sprites. I promise, you do.
You’ll practice recreating shapes using the shortcuts Scratch provides in its art workspace, such as the Line tool, Square tool, and Circle tool. This will get you comfortable with drawing on the screen with your mouse, which is different from drawing on paper. You’ll also learn how to build sprites pixel by pixel to give your images a retro feel like Dig Dug or Super Mario Bros.
Like the last chapter, this chapter is a tour, which means you’ll get to try out every tool in the Art Editor so you can get a feel for drawing your own sprites. In this chapter, you will learn
Let’s get started trying your hand at making art.
There are two separate but similar-looking Art Editors in Scratch: one for sprites and one for backdrops. You’ll use these to create your own, unique pixel art for your retro-style games.
To start making a new sprite
You should see the workspace that’s in figure 2.2 open on the right side of the screen where the Script Area used to be.
The grey and white checked canvas is surrounded by three tool spaces: the Top Toolbar, the Side Toolbar, and the Color Toolbar. Before you dive into trying out all the tools in the Art Editor, it helps to understand the base measurement unit of arcade art: the pixel.
What if you’re not looking at a grey and white pixelated canvas? Navigate to the Block Menu and make sure the Costumes tab is chosen.
A pixel is a unit of measurement. One pixel equals a single dot or miniature square of light on the screen. As your body is constructed out of billions of tiny cells, digital images are constructed out of tiny picture cells, or pixels. Those mini squares combine together to form an image on the computer screen. The smaller the squares and the more there are on the screen, the smoother the picture will appear.
To give you a sense of a pixel’s size, an iPhone screen has about 326 pixels per inch. Take a ruler and draw a square measuring one inch on each side. Now divide up that square into 326 smaller squares, if you even can—your pencil line is probably thicker than a pixel on the screen!
What if there were only 25 pixels per inch? Take your ruler and divide up the square again. The individual squares are still tiny, but you can see each individual one. The fewer pixels per inch, the larger those squares will appear on the screen.
Old video games have a low number of pixels per inch, and that’s why the graphics look a little boxy, or pixelated. Take, for instance, the Scratch cat in its default form and the Scratch cat in a pixelated form, shown in figure 2.3. The image on the right is the look you’re ultimately working toward in this book.
Let’s take a tour of the Side Toolbar so you can try out the tools and draw your first sprite.
Let’s make the first of two sprites. You can use the grey and white pixelated background as a guide for creating your sprite’s shape, almost like a ruler. In honor of Scratch’s default cat, you’re going to make your own, unique cat as your first sprite, like the one shown in figure 2.4.
You’ll start by choosing a color from the Color Toolbar and then use every tool on the Side Toolbar in order, moving from top (the icon that looks like a paintbrush) to bottom (the icon that looks like a stamp). This will not only help you create a cat, but you’ll get to try out all of the tools along the way.
Let’s begin by choosing a color for your cat. I went with a simple orange, but you can choose any color you like from the Color Toolbar.
This book contains color instructions whenever you’re making a sprite in order to help you focus on the skill you’re learning rather than worrying about picking a color. I’ll let you in on a little secret: you can always choose a different color if you want. Even when a color is used as part of the code, such as telling a sprite to stop moving when it touches something red, you can set those instructions to the colors you used on your sprites. When I tell you to choose a dark blue, don’t worry about whether I mean this blue or that blue. Just pick the one you like best.
To choose a new color using the paint sample squares
Scratch gives you the 56 little color swatches seen in figure 2.5 to choose from, with the lightest shades at the top and darker shades at the bottom.
You can also change the color using the rainbow box:
You can use either method to choose a color for your cat.
Begin by giving your cat a head by drawing a square with the Paintbrush tool, as in figure 2.7, the top icon on the Side Toolbar.
By default, the Art Editor always begins with the Paintbrush tool ready to go. Use the Paintbrush tool to draw images, using the mouse as you would a pen or pencil. You need to have a steady hand to use this tool to make a straight line.
To use the Paintbrush tool
As you can see, it’s hard to draw an even square with this tool.
it’s hard to free draw with a mouse—is there something you can do to make it easier?
how about drawing your shape larger than you want and then using the Shrink tool on the Grey Toolbar to bring it down to the right size? Try drawing the cat’s head a second time. Does it look better? Sometimes drawing something large is a little easier than drawing something small.
There’s a second way you can draw a square for the cat’s head. Erase your wobbly square by clicking the Undo tool, the counterclockwise curved arrow above the canvas. Now get ready to try the Line tool.
Don’t worry if you draw a line and don’t like it. Two buttons directly above the canvas on the Top Toolbar are super helpful in erasing (or putting back) your last action. The counterclockwise curved arrow on the left (the Undo tool) removes the last line you made on the canvas. The clockwise curved arrow on the right (the Redo tool) brings back the last action, returning the last thing you removed from the canvas.
Use the Line tool to make straight lines. They can be vertical lines, horizontal lines, or diagonal lines, and they can be long or short. You can connect lines to form any shape—for instance a square, like the one in figure 2.8.
To draw your own square with the Line tool
This time your square is a little neater than the one made using the Paintbrush tool. But wait! There’s a third way you can draw a square in Scratch, and this is the one you’re going to use for the cat’s head. Erase the square you made by clicking undo several times until your workspace is clear, or use the Clear button from the Top Toolbar, which will get rid of all lines in the Art Editor in one fell swoop.
The third option from the top is the Square tool. You can use it to draw perfect rectangles and squares, like the one in figure 2.9.
To make the cat’s head with the Square tool
This tool helps you form a quick and perfect square. The Line tool is great for other shapes, such as triangles, but the Square tool is what you use when you need four even sides.
do you want to use a single color for the cat’s head, or outline the head in a slightly darker shade and then fill in the face in a lighter orange?
the choice is up to you because the Square tool and Circle tool both come with outline or solid options. In the previous example, you set your square to be one solid color, but you can experiment and try making an outline that you’ll fill later in this exercise. Set whether the square (or circle) is an outline or solid shape by clicking the correct box on the left side of the Color Toolbar. Which look do you like better: solid, continuous color or a darker outline with a lighter center?
If you thought squares were hard, try your hand at drawing tiny circle eyes for your cat with the Paintbrush. Mine looked like shriveled up raisins. Which brings us to the next tool down the Side Toolbar (fourth from the top): the Circle tool. This is used to draw easy ovals or circles, like the eye on the cat in figure 2.11.
To make the cat’s eyes with the Circle tool
Your cat currently has a single eye. You’ll create the second, matching one in a moment using a different tool. But before you finish building your cat, let’s make it say something.
What if you want your cat to be saying “Meow,” like the cat in figure 2.12?
You can add words to any image by using the Text tool. This will allow you to make a Game Over icon to flash on the screen at the end of a game or write a name across a sprite’s shirt.
To make your cat say, “Meow”
The word Meow is technically attached to the sprite, and if you move the sprite on the Stage, the word will travel with it.
Sometimes you don’t feel like coloring in your shape pixel by pixel. If you want every inch of your shape to be the exact same shade, use the Paint Bucket tool to fill the space with virtual paint. This is exactly how the cat’s ears were drawn in figure 2.14.
Return to your cat and use the Line tool to draw two sets of diagonal lines on the top of the cat’s head for the ears, as shown in figure 2.15.
Now it’s time to fill in those ears with paint. Choose the same (or a similar) shade of orange you used for the cat’s body:
The ears are now solidly filled orange.
What if you click inside the ear and the paint fills the entire screen, blotting out the cat? Don’t panic—just use the Undo button to remove the paint and start over. Usually, the paint stays inside the boundaries of the shape. But if even one pixel is open, the paint will spill out of the shape and into the rest of the canvas. Close off the shape using the Paintbrush or Line tool, and then switch back to the Paint Bucket tool to try again.
If you make a mistake, you can immediately erase it with the Undo button in the Top Toolbar. But if you later change your mind about something you added to your picture and don’t want to rewind all the work that has occurred since the mistake, you can use the Eraser tool. For example, if you decide you don’t want the word Meow attached to your cat anymore, you can use the Eraser tool to remove it, which is what is happening in figure 2.16.
To remove an element of your drawing
The word Meow is now removed from your picture. In the future, you can use this tool either to remove sections of your sprite or shave a few pixels off an edge.
the eraser is pretty small. Can you make it bigger?
sometimes you will want a small eraser for doing tiny detail work. Other times you want your eraser much larger to make the job faster. Look around the Art Editor; can you guess how to make the eraser bigger? Navigate down to the slider at the bottom of the screen in the Color Toolbar and move the slider toward the right in order to make the eraser bigger. Sliding it to the left makes the eraser smaller.
The Select tool allows you to move a segment of your drawing. It will draw a box around the chunk of the image that you want to move, and then you can drag with your mouse to move that segment wherever you need it on the screen, which is how the body got under the head in figure 2.17.
Try out this tool by drawing the cat’s body somewhere else on the screen. The body is going to be a simple triangle made with the Line tool and then filled with the Paint Bucket tool, as seen in figure 2.18.
Now you need to move that triangle body into place under the head:
Your sprite is beginning to look more and more like a cat.
As you move the triangle close to the head, notice whether or not the triangle slips underneath the square head or slides on top of the head, blotting out the face. What you’re noticing are layers, and all image programs use them in order to add each element to the picture. The square is clearly the bottom layer. The eye is the next layer.
And the triangle body is the third layer. New elements to your sprite will always go on top of the last layer, so plan accordingly when building a sprite. It helps to draw out a sprite on paper and figure out the order you want to draw it on the screen. For instance, it makes sense to draw the face first and then the eyes, and not the other way around. If you draw the eyes first, they’ll be covered up when you go to draw the larger head.
Skip the next tool (you’ll return to the Remove Background tool at the end of this chapter) so you can give the cat a second eye with the final tool on the Side Toolbar.
It’s time to give your poor cat a second eye. You could have drawn a second circle, but those two circles may not have been the same size. The way you can ensure that the circles are the same size, as they are in figure 2.19, is to use the Duplicate tool.
To make a second eye using the first eye
Now your cat has two eyes.
You are almost done with your cat. Begin with the tail, which you’ll make in the same way that you made the two ears. Do you remember which tool you used to make those triangles? Make a triangle again, this time coming off the cat’s body, as shown in figure 2.20.
Switch to the Line tool to make the tail:
Your cat now has an orange tail.
Next, navigate up to the face so you can make the mouth and whiskers, or nose and whiskers. It’s up to you how you want to view this cartoonish dot on the finished cat’s face, shown in figure 2.21.
To finish the cat’s face
Congratulations, you made your first sprite! Now that you know how to use each of the tools on the left sidebar, feel free to play around and make other sprites. When you’re ready, keep reading, because there is a second way to build sprites, getting even closer to the look of those old Atari games.
You can also enlarge the Art Editor and draw your sprites pixel by pixel. Let’s make a cat like the one in figure 2.22.
Start by making the canvas a little bigger. You can either clear the canvas and start fresh or draw this sprite next to your other sprite. To enlarge the canvas
does it matter how big you make your sprite?
not really. You can always use the Grow tool in the Grey Toolbar (or, if your sprite is too large for your game, the Shrink tool) after the sprite is made. You learned how to use these tools back in chapter 1. You’ll see your sprite growing on the Stage as you add each pixel, so you’ll be able to judge whether you’re getting close to the size you want. But don’t start over if you realize in the middle of making your cat that it’s too big or too small.
You’ll use the darker shade of orange to make the outline for the cat and then fill in the body and face of the cat in a lighter shade of orange.
Start again by making a square for the head, only this time you’ll make it out of dots:
Next, move below the square to draw the cat’s body and tail. Keep using the same shade of dark orange.
To draw the neck and top of the body
The body keeps getting wider as you move toward the bottom of the sitting cat. You’ll extend the body by making dots to the side followed by dots going downward.
To draw the rest of the body
In figure 2.27 you can see the outline of the cat.
You can now use the Paint Bucket tool to fill the body with lighter orange pixels.
To fill the cat’s body
Your cat is now completely orange, with the darker outline giving your cat a little depth, as shown in figure 2.28.
Every once in a while, you’ll click the outline instead of the space inside the outline. When you do this, the outline will change to the same color as the inner pixels. Don’t panic. Use the undo arrow in the Top Toolbar of the Art Editor, and it will rewind the project to before the last paint spill. Check where the paint bucket icon is positioned and try clicking again to fill the space.
Lastly, you need to make the face, and you’ll do this using two line width sizes that you’ll set with the Line Width tool.
To make the eyes, mouth, and whiskers
You now have a finished pixelated cat like the one in figure 2.29 on your Stage. Which cat do you like better?
Now that you know how to make sprites, you need to learn how to make the backdrops you’ll use for your games. The two processes are similar, and the two Art Editors look a lot alike.
The Backdrop Art Editor looks almost exactly like the Sprite Art Editor, so you don’t need a second introduction to the Top Toolbar, Side Toolbar, and Color Toolbar. All tools will work exactly as they do in the Sprite Art Editor.
The only difference is the canvas. When you were working with the Sprite Art Editor, the canvas was pixelated with grey and white boxes. The Backdrop Art Editor’s canvas is solidly white. If you’re ever in doubt about whether you’re making a sprite or a backdrop, check the canvas.
To get into the Backdrop Art Editor
The backdrops in retro-style games tend to be simple in order to keep the attention on the sprites. You don’t want players to focus on tiny details you’ve put in the background; you want them to watch the sprite in the foreground. Let’s make a field with a blue sky and green grass, as in figure 2.31.
To begin, you’ll need to set the horizon line and then fill the large areas above and below the line with the Paint Bucket tool. This horizon line gives the player a three-dimensional understanding of a two-dimensional space.
To make the horizon line
If your line doesn’t extend across the whole Stage, use the slider at the bottom of the canvas (not the slider for the Line Width tool) to extend the straight line. Scroll left and right (or up and down using the side slider) to continue drawing the line. You won’t see the slider if your Art Editor is set to 100%. You’ll only see it if you haven’t zoomed out.
Now you need to fill the space above and below the horizon line with color to simulate a field and sky.
To fill the ground and sky
You now have the simple backdrop shown in figure 2.33 to use in a game.
Backdrops will always be the same size as the Stage, and the Stage is where your game will ultimately play. Therefore, each backdrop stretches over the whole background, much like a set on a theater stage.
You now know your way around the Scratch workspace and the Art Editor. Once again, if you ever get lost drawing your sprites, return to this chapter to remember where all the tools are located.
During the tour, I skipped a tool on the Side Toolbar. Between the Select tool and the Duplicate tool, there is a tool that you won’t need for this book but that is still fun to try out. The Remove Background tool allows you to erase the background out of a photo and turn the subject of the image into a sprite.
Can you turn yourself or your pet into a sprite? Upload a photo to Scratch by using the open folder icon next to the words New Sprite in the Sprite Zone, click the Remove Background tool, and start outlining the part of the photo you want to keep. By clicking and holding the mouse button down, you can drag the green dot around the section of the photograph that will become the sprite. After you release the mouse button, you may see a dotted line appear. Outline the section again and then click anywhere else on the screen. The background will disappear, and you will be left with the picture inside the outline.
We covered many topics on our tour of the Art Editor. Let’s review before you move on to new information. If you see something unfamiliar on the list, back up and reread chapter 2.
Pause for a moment and think about everything you learned in this chapter:
Before you make your first game, Gabriel wants to introduce you to a few popular blocks and coding concepts that you’ll be using a lot in each of the games you make in this book. I know you’re excited to dive into making the games, and I promise that this is the final chapter in part 1. In chapter 3, you’ll build tiny scripts to see how they work, and this will help you to dive into creating future games. Turn the page and get started.
3.145.45.5