- Is That a Game on My Phone?
- The Pipeline for Making Mobile Games
- Exercise 7: Creating Assets for a Mobile Robot Shooter
- Creating Levels
- Making Props, Pickups, and Other Stuff Lying Around
- Exercise 8: Creating Prop Designs and Textures
- Creating a Crate Texture Map
- Creating FX for the Mobile Space
- Exercise 9: Creating a 2D Sprite-Based Effect
- Chapter 4 Wrap-Up
This chapter is from the book
This chapter is from the book
This chapter is from the book
Exercise 9: Creating a 2D Sprite-Based Effect
You’re going to create a 2D explosion effect to show your robot’s gunfire hitting an enemy. It will be a 16-frame sequence ready to bring into Adobe After Effects, Flash, or straight into the game engine.
A sprite sheet is a single image containing multiple frames of an animation sequence that a game uses to display as an effect. It usually has a lower memory cost and is a bit old school but is still very commonly used.
Setting Up Your Page
Setting up a page for a sprite sheet is easiest if you know ahead of time how many frames you would like to make your animation. Because the images are read by an engine, registration is very important. If you are even a few pixels off with some effects, you can get a jitter. So, if you know you need 16 frames of animation, that should also tell you to create a file with a size divisible by 16. It really doesn’t have to be of that, but it makes the entire process much easier for you.
- Create a new file in Photoshop, and make it 8 inches x 8 inches at 72 dpi.
- Turn on the rulers. Select the Line tool with a black color, and mark off every 2 inches vertically and horizontally. This will produce a grid with perfect 2x2 boxes.
Select the little blue guides and position them on the 1-inch marks, both vertically and horizontally (FIGURE 4.98). This identifies the exact centers of those boxes.
FIGURE 4.98 Mark off every 2 inches vertically and horizontally.
Using the Magic Wand tool, select the first box. Create a layer, and using the Fill tool, add a radial gradation. Make sure it is white in the middle and black on the outside edges (FIGURE 4.99). Do not let the white area travel outside the square area.
FIGURE 4.99 Make sure radial gradation is white in the middle and black on the outside edges.
- In the grid layer, use the Magic Wand to select the square just below the one you were just in. Create a new layer, and use the same technique to create a radial gradation, but make it a bit smaller.
Repeat this technique for the other two vertical grid spaces (FIGURE 4.100). You should have a small radial gradation (fuzzy circle) at the bottom and three more, each a bit larger going up the line.
FIGURE 4.100 Repeat this technique for the other two vertical grid spaces.
Now duplicate all four layers, and move the new layers 1 grid space over. Repeat this two more times until the grid is filled (FIGURE 4.101).
FIGURE 4.101 Duplicate the layers and move them 1 grid space over.
This will be your animation sequence. As you can see, every four frames the explosion gets smaller. You will also help it along in a second, but first let’s add a little cloud texture and some color (FIGURE 4.102).
FIGURE 4.102 Add a little cloud texture.
- Choose Filter > Render > Cloud to add a smoky texture in the box. This looks great, but it is gray and square, which will not read well in the game. Choose Image > Adjust > Levels and increase the contrast a little.
- Call this layer cloud, and change the layer style from Normal to Multiply.
- At the bottom of the layer window, click the “Create new fill or adjustment layer” button, a little circle icon that is half white and half black. From the popup menu, choose Gradient Map. Move the layer to the top of the stack. Change the layer style from Normal to Color.
Click the gradient bar. Change the first stop to black and the stop on the other side to a pale yellow. Slide the pale yellow stop to the midway point on the line. Click just under the bar to add a new stop between the black and the pale yellow stops. Change the new stop to a bright red and slide it a little toward the black stop (FIGURE 4.103). Feel free to experiment with the color until you have something you like.
FIGURE 4.103 Add color to the cloud texture.
Create a new layer at the top of the stack. Choose a brush tool with a scatter brush. Select a black color and paint out some of the explosion in the far-left frames (FIGURE 4.104). You do this because the explosion should dissipate as it is being read by the engine from left to right. You can also use this layer to add more color, or lightning, or whatever else you might need.
FIGURE 4.104 The final sprite sheet.
Save your file.
You have numbered the frames so that you can see the sequence they will play in. Most sprite sheets are read left to right, top to bottom. On a game production, this sheet would be given to the engineer, who would apply code to it to play the frames at a determined rate, or backwards, or however you wanted them to play.
)
)
)
){kind=link}
){kind=link}
){kind=link}
){kind=link}
As you can see, a 2D effect may lack a bit of the 3D finesse, but for something that is on the screen for only 16 frames, or 0.5 seconds, it will look pretty good and be far less greedy with the memory.