CHAPTER 5

Detailed Development of Visuals

Now that you've looked at methods for previsualization and concept work, let's examine a bit more closely how you can further develop the look of the characters, props, environments, and interfaces for your game. A great many games today use 3D graphics; however, 2D is also still used in developing and producing games.

We'll examine different methods for creating graphics and look at how animation is created for cinematics and in-game play.

Topics in this chapter include:

  • Overview of designing graphics
  • 3D models
  • Color, texture, and lighting
  • Animation

Overview of Designing Graphics

Designing graphics for any game is a juggling match. The designer must make decisions taking all these concerns into account: making the game-play work, using the graphics to add to the appeal (eye candy), and helping players to—especially in immersive games—identify with their onscreen persona. Designing a game that achieves all these things is a challenge for the designer, albeit a fun one.

The first digital games were text based, like the Colossal Cave Adventure, which used written descriptions to create the characters, props, and environments. These games used just 16 colors and 255 symbols (IBM-extended ASCII character set) and were extremely simple in appearance by today's standards for visual complexity, but they provided gripping gameplay.

While playing text-based games, players used their imaginations to invent what the characters and environments looked like. In creating games for today's market, game makers assume that task.

One of the first things a designer needs to consider is who the intended audience for the game is. This is known as the demographic, and research regarding what exactly a demographic may want in a game tends to be an ongoing compilation of data from game sales, interviews, Q&A testing, and observing focus groups.

Who Is Your Audience?

You have a great idea for a game and are ready to jump right in and begin designing. Before you even write out the short synopsis, you need to identify the genre, or gameplay style, and the demographic. In other words, who is your audience?

Demographic Traits

Designers identify demographics for games by studying some of the following traits:

  • Age of the player
  • Gender
  • Amount of time spent playing games
  • Gameplay styles preferred

This information is gathered through phone interviews, analysis of market surveys, and trade journals. According to the 2011 Sales, Demographic and Usage Data compiled by Entertainment Software Association (ESA), 72% of American Households play digital games. ESA also found that the average age of the game player is 37, but the average age of the most frequent game purchaser is 41.

The ESA provides good information about the distribution of the age of players, as seen in Figure 5.1.

ESA also identified the distribution of players by gender, as seen in Figure 5.2.

images

FIGURE 5.1 According to the ESA, most players are 18–49 years old.

images

FIGURE 5.2 According to the ESA, slightly more than half of all players are male.

Women age 18 or older represent a significantly greater portion of the game-playing population (33%) than boys age 17 or younger (20%).

—ESA 2010 demographic survey

Researching Game Sales

Figure 5.3 shows sales grouped according to their ESRB ratings. Although there are plenty of slasher, killer games with lots of killing and gore, sales figures indicate that the market for those types of games is smaller than the market for products designed for the whole family. The data was collected and analyzed by the NPD Group (an independent global corporation that gathers consumer and retail information).

images

FIGURE 5.3 According to the NPD Group, a large percentage of all games sold are designed for the entire family.

The number of gamers has increased substantially over the past few decades, and the demographics indicate that more adults, including women, are enjoying them. Whole families play together, and according to the ESA compilation, these are the top four reasons they play:

  1. It's fun for the entire family (87%).
  2. Because they're asked to (83%).
  3. It's a good opportunity to socialize with the child (75%).
  4. It's a good opportunity to monitor game content (60%).

Mary Ulicsak, Martha Wright, and Sue Cranmer, in a Futurelab report, came to similar conclusions: “Video gaming as a family has the potential to bring generations together, provide experience of digital technologies to all ages, and develop social skills such as turn-taking—all in activity described as ‘fun.’”

The statistics presented here should give you a clear indication that games aren't just for kids, nor does your demographic have to be extremely narrow.

That said, the demographic is an extremely important aspect to understand when designing the graphics for a game. If you're designing a game for little girls, say, 5–8 years old, then working with somber earth tones and using just stone and rusty metal textures would not be the best way to go. But how do you know what will work for a particular demographic?

Unfortunately, too many game makers rely on their own personal experiences and likes and dislikes when designing games. One way to work past this dilemma is to incorporate a thorough research/design phase for any game being constructed. Do the legwork to learn about your demographic, even if you're working on a game in a niche you enjoy and you believe you know everything there is to know about that niche.

Be sure you research as much as you can about your demographic to understand their likes, dislikes and the types of games they like to play.

Learn everything you can about your demographic, such as the following:

  • What are the most popular games for your demographic?
  • What are the least popular games for your demographic?
  • What do players have to say about games geared toward your demographic?
  • What colors, styles, and interface designs are popular in existing games for your demographic?

To get this information, you can consult several sources:

  • Market surveys
  • Reviews of existing games
  • The games themselves
  • People in your demographic
  • Review services from games portals

Conduct, purchase, or locate online market surveys for the demographic you're focusing on. According to Nielsen, gaming has grown 10% over the past year (2011) and now accounts for 10% of all U.S. time spent online; and consumers, in 2010, spent $25.1 billion on game content, hardware, and accessories (ESA).

Because of the massive sales that gaming now enjoys, many third-party researchers, like ESA, conduct demographic surveys and offer their information to help designers further target the groups for which they're creating their games. The International Game Developers Association (IGDA) also conducts surveys to gather demographic information. Some third-party groups, like NPD, do market research and offer highly detailed sales and demographic information for a fee. If you're about to seek millions of dollars to launch a new game or gaming company, having detailed information about sales is an important facet of your business plan.

In addition to survey data, look for and read reviews posted about games geared toward your demographic. For example, Big Fish Games allows players to freely post their thoughts about games for sale on the company's site. Comments about games are fairly numerous. Take note of both positives and negatives. You can learn a great deal from mistakes and avoid making similar ones yourself.

Websites like Gamasutra.com offer post-mortems on how games were made. Review best sellers to see what works. Study the flops to identify mistakes to avoid.

As you compile your information, save images from the games and reviews you're studying to understand more clearly how not only the gameplay, but also the graphics are talked about.

Look at—and play—similar projects that have been produced for your demographic. The Internet makes it easy to view games for the audience you're designing for. You may want to look at sites like these:

You can also check findings released by the Entertainment Software Association (ESA): www.theesa.com.

What Do They Have in Common?

As you view projects that were designed for a demographic similar to the one your game is targeting, notice things they have in common, such as the genre, the color palette, the style of artwork, and how the interface looks.

For example, a review of games designed for young girls at sites like PopCap Games and Big Fish Games found many games that had girls raise baby animals, play dress-up, sing and dance, or do veterinarian role playing. Other games were highly colorful shooters like Peggle or social games like Farmville and Animal Crossing. All of these were designed as casual games, with big, easy-to-read text and brightly colored graphics. Figure 5.4 shows images from Animal Crossing and Peggle.

In addition to compiling research, make a point of playing the games yourself. Look for free demos to download and play (try to review at least 20–30 similar games). You don't need to play too long to get a good sense of whether the graphics that were designed work with the gameplay and seem suitable for the demographic.

Big Fish Games allows players to download and play for free for an hour—plenty of time to form an opinion about the success or failure of graphics and gameplay.

images

FIGURE 5.4 These games were designed for a demographic of young girls: the graphics are brightly colored, and the objects the player interacts with the most are painted to look more 3D and invite the young player to touch them.

After you've conducted your research and work begins on creating the graphics, you may want to show the work to people in your demographic. If you're able to, at an early phase in design and production, expose the work to your audience. Locate family and friends who fit your demographic, or reach out to your potential players through a website where you post art or small, playable sections of the game, and ask for feedback. This will allow the project to become more player-centered.

Player-centered means you involve players in the design and production process whenever feasible.

Quite a few of the larger gaming companies like Electronic Arts (EA) and Blizzard allow their players access to beta versions of upcoming releases to get feedback before the game goes to market. This is known as user-centered design and gathers useful information through beta testing and focus groups.

Some portals, like Big Fish Games, offer a service that lets you submit your game to them, in progress, and they will provide a review. This is a good service to take advantage of, particularly if your goal is to market your game through a portal (see Chapter 10, “Distribution and Marketing”). Portals that offer reviews base their comments on knowledge they acquire about how your demographic has responded to similar games. The portals tend to be honest about their assessment because they make their money by marketing these games and establishing good relations with the indy game companies.

In short, when you consider the design for your game and look to the demographic to be targeted, doing research on your own is essential. Look at games that were designed for the same gamers you want to design for. Third-party researchers like ESA and the IDGA will provide you with critical information on how to find games to study and how large the demographic is.

How games look these days has become an important aspect of game design. Playback systems are much faster, allowing for more complex imagery, highly elaborate animation, and using the camera to help make the experience more immersive.

Camera Angles

Earlier forms of games were all 2D. The camera tended to be locked down, allowing the player to maneuver through a playing field that usually had obstacles to get past. Some of these games that kept the locked-down camera were Donkey Kong, Mario Bros., Duck Hunt, Sonic, Resident Evil, and Devil May Cry.

A locked-down camera keeps one camera angle throughout the game.

Although the camera is locked down, plenty of games still use 2D, such as solitaire, mahjong, and chess. This format is also a huge favorite for designers of casual games, as evidenced by such favorites as Tetris, Angry Birds, Classic Doom, Sinistar and Zombies Ate My Neighbors.

With the introduction of 3D graphics, greater complexity was incorporated into games, and allowed the designer to place the camera in different locations to create a significantly different gameplay experience. Shooters are an example of how this ability to move the camera around during play significantly changed the experience. The flexible camera angle allows the player to turn and see who is shooting at them.

One of the drawbacks with 3D is tiny spaces in the game environment. The camera may need to raise up rather high in order to see the character and the environment, so using this type of camera can be tricky in confined spaces.

Point of view (POV) affects the camera angle. You can design games to be played from a first- or third-person point of view (TPS POV). As with so many elements, the designer must choose which POV to use so that gameplay isn't sacrificed.

Many game makers enjoy designing for the first-person POV (FPS POV) camera because it can let the player really get into what their character is feeling and doing. It also adds more realism because players watch the game unfold through the character's eyes. For example, if you hear something coming up behind you or see a shadow cross your path, but you can't see yet what is casting it, this adds realism; the level of suspense soars because essentially you're seeing and experiencing what the character is.

A good example of the type of immersion experienced using FPS POV is in the game Half Life from Valve. The gamer assumes the role of the lead character Gordon Freeman, and through the game interacts with other characters who come right up to him (the player) to have conversations. The player sees Gordon's hands appear in front of them as if they were extensions of their own hands when he tries to open doors, use weapons (such as his trademark crowbar), or touch other items in the game.

With shooters, though, the weapon your character carries can sometimes obscure much of the image. The FPS POV also creates a limited field of vision because you're only seeing the scene through the eyes of the character you're playing.

Quite a few gamers seem to enjoy the TPS POV more than the FPS POV because they feel in greater control of their character. The TPS POV provides a broader view of what is going on during play, which can be helpful in fast-paced combat games. This method of design also allows the gamer to see their onscreen persona all the time, and that is helpful in role-playing games.

One of the most popular games utilizing the TPS POV is Max Payne, developed by the Finnish company Remedy Entertainment, produced by 3D Realms, and published by Gathering of Developers for Windows. Later versions of the game were ported to the Xbox, PlayStation 2, and Game Boy Advance by Rockstar Games. The game is a noir tour-de-force and pits the hero, Max Payne, against enemies terrorizing New York City. One of the fun features of this game is that, instead of cutscenes placed between levels, the story progresses through a series of comic-book-style graphics.

During gameplay, if Max gets into a firefight, the speed of play changes from a normal pace to one showing bullet time, or slow motion, so the player can savor all the action.

Figure 5.5 lets you compare first- and TPS POV. On the left is an image from the game Max Payne, where the gamer can see Max and the extensive environment and other characters to interact with. Contrast that with the image on the right, showing the POV of the player who has assumed the role of Gordon Freeman in Half Life, where you see that he (the gamer) is fighting with a crossbow.

images

FIGURE 5.5 Compare the TPS POV on the left with the FPS POV on the right.

Whether to use first person or third person is a choice the designer needs to think through carefully. If you want to give the gamer more control during gameplay, then third person is likely the way to go. If you as the designer want to control the experience more as the gamer plays through your game, then first person is probably what you want.

Also, as you design a game, take into consideration how much realism you wish to provide the player. For a more realistic experience (what you as the character hears and sees), a FPS POV may be more desirable. However, if you have incredible environments to see and explore and hazards to negotiate, the TPS POV might be the way to go so the gamer can move the camera to watch their character and see more of the world they inhabit.

An interesting combination of the two POVs can be found in the game Ratchet & Clank, developed by Insomniac Games and published by SCEA for the PlayStation. The gamer can choose to switch between FPS and TPS POVs. This is an unusual approach to design and allows the gamer to choose how they wish to see the game. Blizzard's World of Warcraft, through the use of the mousewheel, allows players to zoom in so close that they see the game as a first-person POV as well. This option gives the gamer some variation in how they play the game, but doesn't really affect gameplay. Most players tend to jump into the FPS POV for short spurts, just to up the adrenaline a bit; however, most prefer to drop back to the TPS POV.

In addition to choosing a point of view, you must decide where to place the camera. Options for the camera position include bird's-eye view (overhead or helicopter), projection, side-scrolling, and faux 3D. We'll look at these four options next.

Bird's-Eye View

The bird's-eye view has the gamer looking down onto the playing field. A classic example of a game that uses bird's-eye view is Frogger. This view lends itself to games that involve exploration. In addition, games that require strategy often use this approach because you can coordinate a map. Games that use the bird's-eye view are often known as board games.

Bird's-eye view is also known as top down, overhead, or helicopter view.

Figure 5.6 shows a screenshot from the game Weird Helmet, made by Star Mountain Studios. The goal of the game is to turn tiles on the game field so that the avatar can race across from one portal to the next in outer space before he runs out of the air he carries in his “weird helmet.” An overhead view is ideal for gameplay of this type because of how quickly the player must be able to anticipate which tiles to turn in order to make a pathway from start to finish for the racing hero.

images

FIGURE 5.6 This overhead (or bird's-eye) view of the game board for Weird Helmet lets the gamer see all the tiles they can chose from to make a path for the avatar (seen at upper left in this image), who moves very quickly across the field.

These top-down and side-view games often use what is known as an orthographic projection. This type of projection lacks perspective: objects don't recede, or get smaller, as they get closer to the horizon. Oblique projections are occasionally used, although they aren't as popular because images can appear severely distorted. However, for some games like Pac-Mania, Ultima VII, and EarthBound, the distorted look matches the gameplay quite well.

A variation of side-view games is the side-scroller, where instead of the avatar moving across a static field, the environment actually scrolls side to side or up and down to create the illusion of the character moving.

Side-Scrolling

In parallax scrolling, foreground elements move faster than those in the background to add to the illusion of depth.

Side-scrolling games are viewed from the side, and players can pan back and forth. A good example is Angry Birds. This type of game occasionally adds parallax scrolling to give a greater sense of depth. A few games, such as Fly Hard and Shmusicup, use this same design approach but scroll vertically instead of horizontally.

Scrollers can support games that call for exploration but also allow for rapid action. These types of games are often referred to as platform games.

Scroller games are popular, as you can see in racing games like Mario Kart, beat'em up games like The Simpsons, and platformers like Super Mario Bros.

Faux 3D Backgrounds

Designers are able to combine the top-down and side views into a faux 3D type of environment using a projection. These aren't true 3D worlds. Instead, they use 2D graphics (sprites and tileable pieces) to give the impression of a more dimensional world, but the computer doesn't have to scale the 2D sprites or tiled elements used to create the backgrounds.

This approach was excellent in earlier games (DOOM, Duke Nukem 3D) because the machines that ran the games didn't have the computing power of most systems available today. In those early games, the engine used to run the game created the world on a two-dimensional grid using closed 2D shapes called sectors and then added structures as flat, simple objects that were the sprites.

A sprite is a graphic object with its own z plane, which allows it to appear in front of or behind other objects. It can move, but it doesn't have to.

Today's systems can run true 3D and allow the gamer to move throughout a more realistic world; however, faux 3D (or 2.5D) backgrounds are still used in some games. For the purpose of discussing faux 3D backgrounds in this chapter, the topic is being limited to creating the graphics for the environments.

2.5 D refers to either

  • Pseudo (fake) 3D used for games like Baldur's Gate
  • 3D games that are played entirely in 2D, such as Pandemonium and Clockwork Knight

Let's take a step back and review what we know about creating the illusion of depth. Perspective is used in a drawing or painting to create a believable environment (depth). This sense of depth is accomplished by having a horizon line and vanishing points. Figure 5.7 shows how two points fixed on a horizon line can be used to draw shapes with correct perspective.

In an axonometric projection, there are no discernible vanishing points, and the scale for all objects remains the same whether they're in the foreground or the distance.

Projections are a bit different. A sense of depth is created, but there are no discernible vanishing points. With parallel projection (also known as axonometric projection), unlike top-down or side views, the graphics are rotated slightly to reveal other facets, thereby creating a faux 3D image.

images

FIGURE 5.7 Two-point perspective shows a facing corner of an object, such as the rectangles in this image.

Axonometric views can be isometric, diametric, or trimetric. The most common type of axonometric projection, know as isometric views, projects three-dimensional space onto a two-dimensional picture plane, as do diametric and trimetric; however, the face sizes are equal. This projection again allows for infinite scrolling over the background. Isometric is also known as 3/4 perspective. All three faces are drawn on the same scale, as shown in Figure 5.8, and the axes are oriented at the same angle to the projection.

In isometric projections, all three faces are the same size. In diametric projections, only two of the three are equal size, making this projection asymmetrical.

images

FIGURE 5.8 In this example, the box on the left has been drawn using an isometric method, while the box on the right was drawn in perspective.

SKYDOMES

Skydomes or skyboxes are a method for creating backgrounds where objects far in the distance in-game are painted on the cube enclosing the entire level.

The unique aspect of using isometric projection is that regardless of the position of the axes, the angle between the projections is always 120 degrees. Figure 5.9 is a perfect example of this from the game Baldur's Gate, from Black Isle Studios, Interplay Entertainment: the buildings don't appear to scale, but they do appear to be facing in different directions.

images

FIGURE 5.9 The game Baldur's Gate uses axonometric projection for the backgrounds. Notice how the buildings in the distance are the same size as those in the foreground.

2.5D backgrounds can be created in 3D, but the camera is locked down so the projection is isometric. 2.5D can also be created using a 2D digital program like Photoshop. Again, the images are rendered with an isometric view showing at least two faces of any building and some of the top.

SCROLLING AND AXONOMETRIC VIEW

Using faux 3D environments allows for infinite scrolling over backgrounds, and generally the viewer can see two sides and the top plane of any object in the background. A great example of this, from its historical origins, can be found in Chinese scroll paintings like the one shown here.

images

These types of paintings were designed as a form of narrative. The viewer can fix on any area of the painting and understand the story being told there, regardless of how wide the scroll is and without any optical distortions created by vanishing points or strong light sources. The projection the Chinese invented to create this unusual perspective is known as axonometric, or dengjiao toushi in Chinese, meaning “equal-angle see-through.” The term axonometry means “measurable from the axes.”

Regardless of the approach to creating the faux background, the result is the creation of a bigger world in which players can move up and down and side to side without straining the capabilities of the computers running them. This approach is still used, especially with games that are playable online.

3D Models

Whether your game is designed to play in a world where you can move 360 degrees or is a flat 2D game, characters, props, vehicles, and environments can be designed and built using a variety of 3D programs. These are some of the commonly used software packages:

Open source also has a 3D package called Blender that you may want to take a look at. Blender is a free program that can be downloaded here: www.blender.org.

WHICH 3D PROGRAM?

Maya is an excellent program that, like CINEMA 4D, 3ds Max, and Blender, can be used to create 3D models, animate, and do compositing, match moving, and other visual effects. Maya tends to be the preferred program to use because of its versatility for creating organic models and the robust nature of the entire package—it has everything you need for modeling and animation. 3ds Max tends to be preferred for more architectural work. Both Maya and 3ds Max are owned by Autodesk.

CINEMA 4D is preferred by graphic designers because of its ease of use and excellent integration with Photoshop and After Effects.

Blender is a very good program, and it's free, but it doesn't have support or much documentation. You can find some help here: www.blender.org/education-help/tutorials.

Of all the programs cited, Maya tends to be the most prevalent one used by gaming studios. So, if you're going about learning how to use a 3D program with the intention of pursuing a career in this industry, this is the one to learn.

Some designers prefer to sketch characters out using pencil and paper or roughly blocking in the image using a graphics tablet and their computer. Others prefer to start with a simple shape in a sculpting program like ZBrush or Mudbox, and carve away, using the 3D capabilities to sculpt the forms they're looking for to create a character or prop. In some cases, you may be adapting an existing 2D character into a 3D package for a project that is being upgraded to a more immersive environment and complex gameplay. Regardless of where your project starts, there are a few important things to keep in mind when working with 3D models.

3D models, even the most organic-looking ones, are created from a series of flat polygons linked together. The more polygons, the smoother and more organic a model may appear; however, getting a complex, high-polygon figure to animate is a different story. Simply stated, the more polygons used to create your model, the “heavier” the model is, and the more computer resources are required to get the model to animate.

Polygons are used to create the 3D models. A low-poly model, or mesh, has fewer polygons, appears a bit blocky, and is used for slower engines and playback systems.

If a model needs to animate for an intro or trailer, then a higher-poly figure usually will work fine, because the frames are rendered out and played back as an existing, complete, pre-rendered movie.

If the figure needs to move in-game, then the computer must animate that figure live, in real-time, which can take up an enormous amount of a computer's resources. To keep the figure from slowing down the frame rate, you'll generally use a lower polygon mesh with more detailed textures. Ideally, you'll use normal maps to increase the topological detail of the object without adding extra polygons, but you should use at least high-quality diffuse maps with a greater amount of detail painted in. More information about these maps is outlined in the “Painting 3D Images” section of this chapter.

The frame rate for 3D games is generally 30–60 frames per second (fps), which is the same as video (30 fps).

As examples, a game like Gears of War might create a very high-resolution model in a program like ZBrush and then export normal maps to be used on a lower-resolution version of the model. World of Warcraft uses a much lower polygon mesh and paints the details into the diffuse map. Gears of War also uses diffuse maps in conjunction with the normal maps to allow the greatest amount of detail while keeping the poly count manageable. Most modern games use the normal/diffuse map combination.

Diffuse maps are sometimes referred to as skins.

Texture-map size is often determined more by the power of the graphics hardware; it isn't as much a consideration for a low frame rate (although it does have an impact). The number of polygons moving around, and any special effects going off, are the first targets of poor frame rate.

Main characters in games tend to have about 3000–4000 polys; however, depending on the platform the game is designed to run on, that number can vary a great deal. Figure 5.10 shows a completed character model from Artery Studios (www.artery-studios.com) with a low-poly mesh.

images

FIGURE 5.10 Artery Studios specializes in creating models for all types of projects. This model, an example of a character for a game, was created using a low poly count. The polygons are visible in the figure at far left. The skin was painted with greater detail to make the figure appear more realistic.

When your sketch is completed and you're ready to begin modeling, you may want to start with a basic, or primitive shape, like a cube, which has six faces. By using the tools in the program—extrude (pulls new faces from existing faces); tessellate (also known as tiling: repeats a shape covering a plane without gaps or overlapping); and bevel (cuts off the corner where two shapes meet, creating a new face and giving a slightly rounded appearance along the corners of a model)—the modeler expands the faces of the cube, pushing and pulling to add more polygons and flesh out the form. This process is referred to as box-modeling, but there are also other methods you can use.

Some artists prefer to work with existing basic human forms or import their drawing into the program on image planes to see front and side views and then model from that.

Rigging

Finished characters, props, and vehicles that need to move in-game or be animated for introductions and trailers require a rig for the animators to use to make the form move. The concept is similar to moving a puppet, except the mechanics are buried inside the model. You can shop at a variety of websites for completed models that are rigged and ready to animate, including www.turbosquid.com; or you can find free ones at www.blendswap.com. Rigs can be added to models after they have been sculpted in a 3D program if you're creating your own, unique figure.

Cel Shading

Also known as toon shading (short for cartoon shading), cel shading allows the designer to create a character or prop in a 3D program but render it like a 2D graphic. Toon shading is a stylistic choice that takes advantage of being able to animate directly out of the software or place the camera to meet the needs of how a figure needs to be posed or moving.

An excellent example of this technique can be found in the game Gravity, from Vita, as shown in Figure 5.11. The look is reminiscent of comic books or graphic novels. For games that originate from or emulate those sources, this approach is ideal.

In order to create a toon-shaded object, you essentially turn off the lighting for the model, thereby creating a flat look for the art. Figure 5.12 shows primitives rendered out of 3ds Max.

Primitive is a commonly accepted term for a simple geometric shape generated in a 3D program.

images

FIGURE 5.11 Toon shading, or cel shading, is a method for rendering 3D models to look like comics while allowing for animation.

images

FIGURE 5.12 The images on the left are rendered with the lighting turned on, creating the highlights and shadows necessary to make them look dimensional. The image on the right has been toon-shaded.

Different programs have different steps to making the model appear toon-shaded. The manuals specifically written for the programs have sections devoted to lighting models and how to toon-shade them. Numerous sites like MangaHelpers (www.mangahelpers.com) and Second Picture (www.secondpicture.com) have online tutorials as well.

Both of these sites also have extensive tutorials for numerous aspects of working with the creation and animation of 3D models along with loads of useful tips for working with Photoshop. Photoshop is the preferred program for painting the skins for models.

In addition, you may want to review the tutorials offered by Digital-Tutors (www.digitaltutors.com).

The black lines often seen on toon-shaded objects are created in a secondary step, also in the 3D program.

Color, Texture, and Lighting

2D images can be painted a variety of ways, using Photoshop, Illustrator, Flash, or any of the many methods for traditional paint—like acrylic, watercolor, and so on. 3D pieces are handled a bit differently, especially if the object being modeled needs to be animated as a 3D element.

Painting 2D Images

For decades, game designers have used 2D graphics—and they continue to do so. Flash-based games use them, and there are a variety of programs you can use to render images including backgrounds, characters, props, and vehicles.

Photoshop is still the workhorse of the industry. It's used for everything from creating storyboards to animatics and previs, painting in-game assets, and even drawing the art for the box. This versatile program can create vectors along with raster images, so it can be used to cel-shade individual frames of animation and do photorealistic work for environments. Whatever the visual task, this program can handle it.

Raster images are made of pixels. The more pixels used, the more detailed the image; however, file sizes start to get large as more pixels are used.

Most studios work with Photoshop, so you should learn the interface for this program. Information about Photoshop, created by Adobe Software, can be found on Adobe's website: www.adobe.com/products/photoshop.html.

Numerous other sites offer online tutorials for learning how to manipulate this program. Here are a few of them:

Vector images are created using a mathematical equation in 2D or 3D space. They scale well and have smaller file sizes than raster images, but they can't display as much detail.

Many of the websites you may stumble across with Photoshop tutorials offer step-by-step lessons on how to create a specific special effect with text, or how to make and use your own brushes. Those are fun to play around with and help get you used to finding and using the tools on the program's interface.

As an example of what Photoshop can do, look at Figure 5.13 from a game called Frobish, created by Star Mountain Studios. The image on the left was created in Photoshop using multiple photographs, textures, and digital paint. The image on the right was also created using Photoshop, in this case using all digital paint. The point of doing the two versions was to come up with two different looks for the game so the designers could choose which approach to use when making the game.

Keep in mind that you can create 2D graphics digitally using programs like Photoshop, Flash, Illustrator, and GIMP, to name a few. Indy designers with fewer resources at hand may want to consider GIMP for creating graphics. Like Blender, which we looked at in the “3D Models” section of this chapter, GIMP is a free online graphics program. Information about GIMP and the features it offers can be found at www.gimp.org. You can also use traditional methods like pencil or paint on paper or illustration board and then scan the images into your computer to work from.

images

FIGURE 5.13 Photoshop was used to paint both images, providing a remarkably different look for the same layout.

Painting 3D Images

At this point in the process of creating your art, you've designed your character (or prop), scanned it into your computer, imported this into the 3D program of your choice, and built your model. The goal now is to add color, texture, and details onto the surface of the model.

Some programs, like CINEMA 4D, allow the artist to paint textures directly onto the model. Other types of 3D programs, like Maya and 3ds Max, require the artist to map a skin onto the finished model. The skin is called a UV map (UV refers to the x and y coordinates of the model), also called a diffuse map. Other maps can be layered on the UV or diffuse map to add additional dimensional texture (bump maps and normal maps) and specular values, thus creating skins that are lifelike and realistic.

A program called BodyPaint 3D can be used to create skins for characters, props, and backgrounds with CINEMA 4D, Maya, and 3ds Max.

Figure 5.14 shows a model of a goblin character named Goblinko, created by artist Richard Sternberg. After sketching the figure, including front and side views, he imported those drawings as image plane into 3ds Max. The image on the left, an exploded view of the goblin, shows what that map looks like before it's attached to the mesh. Sternberg then used the program to generate the finished model on the right.

images

FIGURE 5.14 When creating a texture map for a 3D model, a program like Photoshop allows you to paint all kinds of details that are then applied as the skin.

As a quick review, the mesh is another word for your 3D model; the terms are used interchangeably. There are different methods to apply a skin of texture and color to that mesh (model):

Normal map This method for painting the map for the model uses a fake lighting technique of bumps and dents that add more detail to the figure without increasing the number of polygons.

Bump map This is a form of normal mapping, where wrinkles or bumps are made to appear on the skin you're painting for the 3D model by adjusting the lighting without having to change the polygons of the model. This a grayscale version of the color map.

Specular map Specularity refers to how bright or shiny the surface of the model appears.

Animation

Animation for games falls under two major headings:

  • Animating for non-interactive elements
  • Animating for in-game or interactive elements

Non-interactive elements, such as trailers or the introduction to the game, are fairly straightforward. The animation is done using 2D or 3D techniques and approached in the same way you would create animation for a TV show or movie. The animator usually works from a script and/or storyboards and animates in a linear fashion, from the beginning to the end of a scene or scenes.

In-game animation is a bit different because it isn't a pre-rendered movie, like a trailer. It's animation that happens in real time.

Cutscenes used to be rendered out as movies; however, most games now run them in real time directly from the engine, thus avoiding huge rendered movie files.

Animation for gameplay doesn't address certain things an animator might normally work on, such as creating facial deformations to match lip synch. Most playback systems just don't have the speed and capability to render the frames in real time with that much complexity, so most animations for games are limited to cycles that can repeat. The majority of characters or props that will be animated in game are simplified to limit the strain on the system.

You'll want to plan for a variety of elements to be animated. The most obvious animated elements are the characters—you want to see them move and have some sense of realism to add to the fun of the gameplay. Props and vehicles (including horses or other mounts that might be used) are treated much the same as characters and animated in repeatable loops so their animation can be rendered in real time as the game is played. Other elements that are animated in games can include weather, which is usually particle-based animation. Although the designer of a game generally doesn't create the actual animation (that falls to the production crew), it's useful to understand how the process works so the designer will be able to plan for the different cycles required to create the game.

Particle animation, or system animation, is a technique for animating soft or diffused things like smoke, clouds, fog and dust in a 3D program using an emitter.

Characters, Props, and Vehicles

We discussed camera angles earlier and revisit them now in relation to animation. The animator needs to understand clearly how and where the camera will be used in game. If the game uses a FPS POV, then the camera will be locked just behind the player and look through their eyes. In other words, the player sees what the character sees.

The approach is quite simple to create and program; however, it limits the amount of animation for the character because you primarily see just their hand or hands. Using the TPS POV, multiple elements in the scene may need to be animated, including the lead character/s, secondary characters, non-player characters (NPCs), vehicles, animals, foliage moving, and so on. Again, how immersive the designer wants the game to be will dictate how much animation needs to be created.

Most animations for games tend to be generated in short cycles that can, if necessary, be strung together to show complex movement. For example, a character can be animated to kick, and then there may be other movements like jumping or punching; if you play them back to back, the final result is a seamless transition from one cycle to the next.

When you begin to plan animation for your game, create a list of things you want that character (or prop) to do. The more animations you plan for, the more work is required, and the bigger the strain on the playback system, so make sure these are the movements needed for the game. These movements tend to be used over and over again, so it's good to plan for a variety or variations of the same types of movements.

These are the basic moves used for in-game animations:

  • Idle
  • Running
  • Walking
  • Reactions, such as cringing in horror or shaking from fear
  • Falling down
  • Getting up
  • Specialties (the figure may need to fly or make other specific movements, such as casting a spell.)

Characters that aren't moved by the gamer tend to move slightly, such as shifting their weight or looking around, to give the impression that they're alive.

Depending on the type of game you're making, you'll want more or less of any of those types of animations. A fighting game may need more animations that can be strung together for kicking, punching, jumping, and so on. Sports games will need a variety of movements for throwing a ball, catching a ball, hitting a ball, and so on.

As you develop a game, an asset list is generated based on the script and flowchart and gameplay desired, so the animators will have a good idea of how many cycles of animation they're building. Keep in mind, the more cycles you have, the larger your game gets, and the more work the engine has to do. If you're building a casual, downloadable, “try before you buy” kind of game, anything greater than 100–200 MB will put off any potential buyer; so, make sure you need the animation before including it in the game.

Asset lists include all elements that need to be created for a game—graphics, animations, effects, and sounds—to help keep track of the numerous tasks involved.

The actual mechanics behind the creation of animation can come from a variety of sources. Objects (characters, props, and vehicles) can be animated using keyframes or motion capture.

Keyframes are starting and ending points for any transition and generally show dramatic changes such as weight shifts or movement of the character. This work is done by hand, by the animator, who positions the character (whether it's a 3D model moved by its rig or a 2D image that is drawn) to show these major movements. An animating program then draws the inbetween, to smooth out the transitions.

Motion capture, which is becoming more prevalent, is used for 3D animated movies, special effects in film and TV where 3D graphics are created, and games. Detailed information about this form of animation can be found in Chapter 2, “Gameplay Styles.”

Clickable Items

Some items in games, such as navigation buttons and items to be found or interacted with in the environment, require some animation. These tend to be simple, repeatable animations like showing a wiggle, a color, or a value change if the player mouses over something that needs to be clicked.

In Apparitions: The Haunting of the Red Reef Inn, created by Star Mountain Studios, players can record and review evidence of a possible haunting in the hotel. The player can mouse over the entire surface, and clickable items shift color. In this case, the images become lighter by 50%, as shown in Figure 5.15 where the cursor is positioned over the Peter Wren Agency icon.

Mousing over an object means literally moving your mouse (or other controller) until the cursor is positioned over the clickable object.

images

FIGURE 5.15 Designers create a rollover state for clickable items so that when your cursor moves over the object, it will wiggle or change color to let you know it can be clicked.

Any item that shows a value change can be clicked; and when clicked, a simple animation shows the button appear to depress and then rise again. This type of animation has a resting state (as shown for all the buttons in Figure 5.15), a rollover state (the value change shown by the Peter Wren Agency button), and a click state. The click state is created by duplicating the button in Photoshop, offsetting it to the right and then down a few pixels, and reversing the lighting in layer-style effects (bevel and emboss).

Reward animations also tend to be repeating types. On the plus side, using repeating animations allows the game to use assets over and over, thus reducing the strain on the system and giving the designer the possibility of investing more animation in the main characters. The downside is that some rewards, which are meant to be fun and a big “wow” factor in games, can get boring when seen repeatedly. Designers often try to solve this dilemma by creating a few variations of reward animations (fireworks, explosions, star bursts, fairy dust, and so on).

The designer needs to figure out where they will get the most bang for their buck when it comes to investing the assets of the game with animations. A game that doesn't have any animation these days tends to be ignored by players. So how much animation should you use? Start by understanding how much animation the player is used to seeing.

Play games that are similar to the one you're designing. Note how much animation is used, and what is being animated. Are you seeing only a character or prop animate, or do other things like buttons wiggling or background animation such as birds flying in the sky or fish swimming in water give the game a more realistic, immersive feeling?

Once you have a sense of how much animation is expected, develop an asset list to plan for what types of animation you'll need.

THE ESSENTIALS AND BEYOND

In this chapter, we took a look at how some of the graphics are designed and created for games. Many traditional methods are still widely used, such as 2D graphics; however, 3D introduced a new wrinkle in the design process, including new ways to create 2D imagery.

The look and feel of games can be dramatically affected by the placement of the camera, and that decision alone can make or break a game's success.

Now that you have had a chance to review some of these important design essentials, look for them in games you play, and try some of them with your own projects to see what results you get. Do your choices in your own projects, or choices you see in existing games, enhance or hurt the gameplay?

Improved animation, more immersive play, and sequel upon sequel designed and built for successful games keep products moving. In addition, new improvements in technology for faster animation and improved graphics, more fascinating storylines, and updated versions from classic games ensure a steady stream available to avid game players.

ADDITIONAL EXERCISES

  • Play one of your favorite games, and write down how many repeatable animation cycles you see, including the idle.
  • Play one or more games, and take note of the kinds of animation you see. In other words, look at the characters, backgrounds, and other elements, and see what is animated and what kinds of movements you see. Then, review any trailers you find for the game, and note the difference in quality between the animation and art. Is there a difference? If so, how would you describe it? Some trailers draw their material directly from screen captures during gameplay, while others invest a great deal of time and effort into making original mini-movies. See if you can spot the differences.
  • Play a few games, and determine what the intended demographic was. Then compare your notes with what the manufacturer says the demographic is. If they differ, why do you think that is?
  • Examine and play 3–5 games. See if you can figure out which type of camera angle the designer chose.

REVIEW QUESTIONS

  1. Which type of axonometric projection is most commonly used in games?
    1. Diametric
    2. Trimetric
    3. Isometric
    4. Skybox
  2. True or false. The demographic for a game is based on who the designers are.
  3. True or false. The majority of games that are played are violent.
  4. Which two types of POV are used in games that have characters in them?
    1. Second person and third person
    2. First person and third person
    3. First person and second person
    4. Second person and fourth person
  5. True or false. An advantage of faux 3D backgrounds is that objects do not change size as the player scrolls the playing field.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.22.61.218