- 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 7: Creating Assets for a Mobile Robot Shooter
With the standard graphic tools you’ve already used, as well as some new ones, you will create assets for a 3D robot shooter game. You will create characters, several level maps, and some asset textures. You will also animate a 2D explosion effect using a sprite sheet.
The Story
Your game this time is called Nebula Pirate Robots. In this game, you don your robot armor, and with two robot friends, land in an alien environment where you fight your way through bloodthirsty aliens who want to steal all the energy pods in the universes. You and your friends are also collecting the pods to power up your super robots and defeat the alien queen, shown in FIGURE 4.3.
)
FIGURE 4.3 Fighting the alien queen.
How to Begin
By now you should be familiar with the art process for starting a game.
- Create a theme or a story
- Collect images in mood boards
- Sketch conceptual drawings
- Initiate product development
- Build the game
- Make loads of money and become famous
For this game, the art director had some mood pieces created by a company that specializes in doing conceptual illustrations (FIGURE 4.4). This is a common industry practice when the art director knows what look he is going for and no one on his team can satisfactorily meet those needs. These images will be used for inspiration instead of mood boards. From these images, you will start work on some character variation sketches.
)
FIGURE 4.4 Conceptual illustrations for a robot game.
Character Variations
You draw character variation sketches when you have a pretty good idea of what your character is going to look like but want to explore subtle variations in its look, or when you need multiple versions of a single character for a team or a squad. For this exercise, you will create a three-robot squad, all about the same size and built using the same material but with different-looking shells.
In a mobile game—where you need to cut any corner you can to save on memory—you should determine in advance the assets you will need for the game and how to most efficiently implement them. Remember, everything you put into a mobile game has a cost, so the more times you can multipurpose the same assets, the better it is.
Creating the lower half of the robots
To save on memory, all three robotic units will have the same legs. This means you only need to make one set of 3D legs, with one set of animations, which only have to be coded once. Multipurpose. You will then create different chassis for the legs and change their color to match each new chassis. Changing the color is the easiest (and techno-cheapest) way to create a visual difference.
- Open a new file, 15 inches wide by 5 inches high at 300 dpi.
Open the diametric perspective grid provided in your Resources folder (FIGURE 4.5). Scale the grid to fit in the window, which should give you the proper perspective depth on the grid.
FIGURE 4.5 A diametric perspective grid.
Begin sketching the lower half of the robot from about the waist down. Use the grid lines as the outline for the shape of the left leg. The guidelines that you used in drawing this foot are highlighted in red (FIGURE 4.6).
FIGURE 4.6 Use volume boxes to help draw shapes.
Duplicate the layer and translate it 1 grid space to the right while remaining on the front line that the toes touch (FIGURE 4.7). Use the corners of the toes as a guide. As you use the grid more, it becomes easier to see the lines that should not be there. Erase any lines that would not show on a solid object (FIGURE 4.8).
FIGURE 4.7 Erase any lines that would not show on a solid object.
FIGURE 4.8 The robot feet.
When the second leg is in place, begin work on the waist disk. This is where the two halves of each robot will connect.
Because a disk is a hard shape to draw in perspective, you will need to create a volume box using the Line tool (shown in FIGURE 4.9 in red). You then create an oval shape using the Shape tool with no fill and a 1-pt. stroke. The oval shape is then fitted into the bottom square of the red volume box by choosing the Edit > Transform > Distort tool.
FIGURE 4.9 Create the torso base using an oval shape for the hip disk.
Duplicate the oval layer and translate it up to the top section of the red volume box. You now have a top and a bottom oval. Connect the two with a line drawn from one to the other at the far edges of the ovals, creating a volume ( FIGURE 4.10). Readjust the height of the hip disk, if necessary, and then erase any lines that may have strayed from the design or bled over.
FIGURE 4.10 Fine-tune the torso base.
Now you will create the leg joints, using the same technique to create a cylinder shape on the left ankle.
- Using the Shape or Brush tool, create a center bolt.
Copy this shape to the right ankle, the right knee, the left knee, and the left hip. Then erase any extra lines that need to be removed to make this look like a solid volume (FIGURE 4.11).
FIGURE 4.11 The completed lower portion of the robot.
)
)
)
)
Collect all the lower-half layers into a group, and name it legs. Scale down the group 30 percent, and move it toward the bottom of the page. Make sure you realign it with the background grid.
Creating a robot torso
Now, let’s move on to the body (FIGURE 4.12).
FIGURE 4.12 Volume box for the robot torso.
- Start as you did when drawing the hip disk. Define a volume of a size appropriate for the torso. Use the Line tool with a red color so it is easy to see. If you’re having trouble, try counting the spaces on the background grid. Start at the hip disk and find the line to the right that is one big square away. Stripe a big line. Now do the same on the left, followed by the front. In the back, go two spaces. Your robot is going to have stuff back there and you need a bit of extra room.
Using the volume (or bounding box, as it is called in 3D), create your robot shape (FIGURE 4.13). You will find that the first line is the hardest. Once it is set, the rest of the shape flows much more easily.
FIGURE 4.13 Begin sketching the torso.
- When your shape is defined, select the red volume and the black outline layers, and collect them into a new layer group, and name it Torso. You can hide the red line for now by turning off its visibility.
Now create the head in a skull shape (FIGURE 4.14).
FIGURE 4.14 Position the skull within the main shape of the torso.
To build a volume box for the left arm, use a red Line tool, and guided by the grid, lay out a rough arm shape off to the side of the robot (FIGURE 4.15). Don’t worry about the detail right now, just make sure it is roughly arm shaped. The appropriate volume is what you are after.
FIGURE 4.15 Create the volume box for the arm.
Once the volume box is completed, start creating your arm (FIGURE 4.16). Keep in mind that this will be pretty small onscreen and a lot of detail might not show up. It is better to try and make the larger shapes work for you. Also, remember that the fewer pieces you have to build in 3D, the better.
FIGURE 4.16 Create the arm.
At this point things will start to get confusing, with lines intersecting all over the place. It is helpful to create a backfill layer for all of the elements. This will give you the option to eliminate the transparency if you need to, and aid in the final render (FIGURE 4.17).
FIGURE 4.17 Create a background shape to control opacity.
- Select and duplicate a layer group such as “legs.” Flatten the new layers, (not the originals) and with the Magic Wand tool, select the flattened shape. From the grid, select the lighter gray color, and choose Edit > Fill. Fill the shape with the foreground color you just selected. Rename this layer backfill, and place it on the bottom of the original stack in the “legs” group. Repeat this process for all the groups.
Move the arm group into place. You will also need to draw the small bit of hand that is showing on the right side. Make sure that layer is below the torso layer.
Now it’s time to decorate. You might have design requests from the designer or feel inspired by a favorite missile launcher, but now it’s time to design some attached weapons.
Create a new layer at the top of the layer stack, and draw some weapons in place (FIGURE 4.18). You might need to erase some of the torso or some of the other sets, and that is fine. Draw your attachments first, and later you can go back into the black line sections and erase all you want.
FIGURE 4.18 Add shadow to enhance the image.
If you find that you are still having a hard time seeing what is going on, you can add tone to the shape (Figure 4.18).
- Select and duplicate all the layers and layer groups. Merge all the duplicate layers, and use the Fill tool to select a darker or lighter gray. Do not add color yet.
Next, duplicate the “legs” group, and name the new layer group M2_legs. Move the volume boxes for the torso and the arm into place, and you are ready to make the next robot in the series (FIGURE 4.19).
FIGURE 4.19 Begin creating the second robot.
)
)
)
)
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
To create a second robot, continue your robot assembly line by designing a new model to establish some visual contrast.
Begin as you did previously by defining the torso above the leg group.
Try to make this design unlike the silhouette of your previous robot to create a solid visual difference between the two. If it helps, you can give them classifications like “water robot” and “air robot.” Knowing what a robot will be used for may help you think about what attributes to use in your design.
- When you’ve finished your torso, and repeated the backfill layer creation and the layer grouping, you can move on to creating the head. As before, when making a new torso, your emphasis should be on designing a very different-looking head. If you created a round head previously, then create a square one this time. When you are happy with the design, create the backfill layer, and collect the layers in a layer group called m2_head.
- You have the torso and the head, now let’s finish the arm. Using the arm volume box again, begin to create the arm. As with the head and the torso, strive to make this arm a bit different from the previous robot’s arms. Sometimes finding an interesting way to bend the elbow or an unusual hand shape will dictate the look of the arm. Those are both great places to start. Think also how this arm will attach to the robot body and what its range of movement might be. When you get something you like, create the backfill layer, and collect the arm and the backfill into a layer group named m3 _leftarm. You will also need to create the right arm and do the whole backfill/layer group thing.
Following the same process, create any weapons or torso details you might want, if you have not done so in the torso layer. You will need to do the whole backfill/layer group procedure here as well.
Everything is good to go. So, collect all of the m2_ layers in a layer group called Robot_02 and move them into the layer stack just above the Robot_01 layer.
Creating robot number 3
Because you’ve already done this twice, you should be able to create the third robot on your own. If you get lost, just refer to the previous sections for help.
When your three robots are finished, you can add color to them. Either add the same color to all three to show the variation on one robot, or make them three different colors to show one robot as three different characters.
The same process you used to make a drawing of a robot could eventually be used to make the 3D version. The legs would be modeled separately from the torso. The arms would get the same treatment. Each would get its own animations to match the timing of the others.
This 3D modeling process can get quite complicated, but in the end, it is the way to go. Why is this the way to go? It will buy you loads of different robots if you want them. In the engine, any arm can be combined with any torso, as long as they are rigged correctly and use the same animations. So with just one set of legs, three torsos, and three arms, you get tons of variations, and more importantly, upgrade items that can be sold to the user (FIGURE 4.20).
)
FIGURE 4.20 Robot variations.
A single arm can be mirrored in the engine along with its animation, so you really only need to make either a left or a right arm.