 |
From Hello Scratch! by Melissa Ford, Sadie Ford, and Gabriel Ford
This article explores creating your own sprites in Scratch using the Art Editor. |
Save 37% on Hello Scratch! Just enter code fccford into the discount code box at checkout at manning.com.
While Scratch comes with sprites preloaded in the sprite library, this article will teach you how to draw your own sprites using the Art Editor. To open the Art Editor, navigate to the Sprite Zone and click the paintbrush icon at the top of the section. The Art Editor will open in the Script Area on the right side of the screen.
You can enlarge the Art Editor and draw your sprites pixel by pixel. Let’s make a cat like the one in figure 1.
Figure 1 The pixelated cat is outlined with dots and then filled using the Paint Bucket tool.
You can use the grey and white boxes on the Sprite Art Editor as a guide. You can also think of each of those tiny boxes as a building block and begin constructing your image, one tiny square at a time. You only need to make the canvas a little bigger.
To enlarge the canvas:
- Navigate to the Color Toolbar and choose a darker orange (in the second column of the paint sample squares) for the outline of the cat.
- Notice the two magnifying glass icons underneath the canvas, on the right side of the screen. The one on the right allows you to zoom in on the image, and the one on the left allows you to zoom out.
- Zoom in by clicking the magnifying glass with a plus sign (seen in figure 2) three times to make the canvas 800% its normal size.
Figure 2 The two magnifying glasses at the bottom of the Art Editor are your friends when you’re getting ready to make pixelated art.
- Click the Paintbrush tool on the Side Toolbar.
Now you’re ready to begin building your cat, pixel by pixel.
Answer This: Should You Worry About Sprite Size?
Question: Does it matter how big you make your sprite?
Answer: No. 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 has been made. You’ll see your sprite growing on the Stage as you add each pixel, and you’ll be able to judge whether you’re getting close to the size you want. Don’t start over if, in the middle of making your cat, you realize it’s too big or too small.
You’ll use this darker shade of orange that we’ve chosen 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:
- Make sure you’ve selected the Paintbrush tool on the Side Toolbar.
- Navigate to the Line Width tool, in figure 3, on the left side of the Color Toolbar.
Figure 3 The Line Width tool in the Color Toolbar controls the thickness of the line.
- Increase the line size until one click of the Paintbrush tool leaves a dot instead of a square. To test the size of the brush, make a single dot on the canvas. Why a dot instead of a square? It gives the cat a rough edge, almost like a cat’s fur. Plus, it’ll make it easier to see where to place the next dot by following the edges of the dots on the canvas.
- Move the mouse to the canvas and start making a square out of dark orange dots. Make your square with 6 dots on each side.
- Make two dots, side by side, directly over the top corners of the square.
- Crown these two dots with another single dot in the center, as seen in figure 4. If you see any empty pixels at the top of the triangle, gently shift the mouse and click again to fill them.
Figure 4 This square head is made of dots topped by two pixelated dot ears.
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:
- Navigate to the two center dots at the bottom of the square.
- Draw two dots underneath those dots, side by side.
- Build out the body by attaching a line of four dots across to the neck. Build down from the edges of the line with two dots down on either side, as in figure 5.
Figure 5 Strategically-placed dots start forming the top half of the cat’s body.
The body keeps getting wider as you move towards 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:
- Draw a dot to either side of the descending lines and then make the new edge two dots down.
- Do this a second time, drawing a single dot to the side and then one dot down.
- Finish the bottom of the cat by drawing eight dots across to close off the tiered cat body.
- Begin to the left or right side of the bottom tier and draw an unconnected line extending outward for the cat’s tail.
Look in figure 6 and you can see the outline of the cat.
Figure 6 The cat’s outline is made up of dark orange dots.
You can now use the Paint Bucket tool to fill the body with lighter orange pixels.
To fill the cat’s body:
- Choose a shade of orange slightly lighter than the shade you used for the outline.
- Switch to the Paint Bucket tool.
- Click inside the empty spaces to fill them with the lighter orange color. Make sure the paint bucket icon is always over the grey-and-white canvas inside the outline and not on the outline itself.
Your cat is now completely orange, with the darker outline giving your cat a little depth as seen in figure 7.
Figure 7 The orange pixelated cat still needs a face.
Fix It: You Accidentally Changed the Outline Color
Sometimes 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’ll 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:
- Switch to the black paint sample square in the Color Toolbar.
- Make two dots in the center of the head for the two eyes.
- Navigate down to the Line Width tool on the left side of the Color Toolbar.
- Move the slider to the left to make the line thinner.
- Switch to the Line tool.
- Draw a line going down between the two eyes and make a small line across at the bottom, like an upside down “T”.
- Draw six lines radiating out of the cat’s face for whiskers.
You‘ve a finished your pixelated cat like the one in figure 8 on your Stage. What do you think?
Figure 8 Your sprite is now complete.
Now that you know how to make sprites, you need to learn how to make the backdrops you’ll use for your game. The two processes are similar, and the two Art Editors look a lot alike.
For more, check out the book on liveBook here and see this Slideshare presentation.