Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Photoshop

  • Print
  • + Share This
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

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

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.

  1. Open a new file, 15 inches wide by 5 inches high at 300 dpi.
  2. 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

    FIGURE 4.5 A diametric perspective grid.

  3. 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

    FIGURE 4.6 Use volume boxes to help draw shapes.

  4. 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

    FIGURE 4.7 Erase any lines that would not show on a solid object.

    FIGURE 4.8

    FIGURE 4.8 The robot feet.

  5. 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

    FIGURE 4.9 Create the torso base using an oval shape for the hip disk.

  6. 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

    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.

  7. Using the Shape or Brush tool, create a center bolt.
  8. 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

    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

FIGURE 4.12 Volume box for the robot torso.

  1. 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.
  2. 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

    FIGURE 4.13 Begin sketching the torso.

  3. 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.
  4. Now create the head in a skull shape (FIGURE 4.14).

    FIGURE 4.14

    FIGURE 4.14 Position the skull within the main shape of the torso.

  5. 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

    FIGURE 4.15 Create the volume box for the arm.

  6. 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

    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

    FIGURE 4.17 Create a background shape to control opacity.

  7. 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.
  8. 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.

  9. 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

    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).

  10. 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.
  11. 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

    FIGURE 4.19 Begin creating the second robot.

To create a second robot, continue your robot assembly line by designing a new model to establish some visual contrast.

  1. 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.

  2. 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.
  3. 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.
  4. 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

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.

  • + Share This
  • 🔖 Save To Your Account

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020