CAP 161 - Digital Imaging for Animation

Lesson 1 - Basic Game Art and Graphic Technology

Objectives:

This lesson discusses information from chapters 1 and 2 of 3D Game Textures. Objectives important to this lesson:

1. Introduction to art concepts
2. Shape and form
3. Light and shadow
4. Texture
5. Color theory and systems
6. Perspective
7. Introduction to graphic technology
8. File types and formats
9. Power of 2 grid
10. Intro to UV mapping

Concepts:

Chapter 1 begins with a discussion about things that help an artist be a better game artist. The study of game art begins with the study of art itself. The author's list of subjects to study or practice (on pages 4 and 5) is a good one, not just a wish list for things he would like to see in the next artist he hires.

You should take a few minutes and think about the list.

1. What do you already know? What do you know nothing about?
2. What skills can you improve readily and easily?

The good news is that the text will discuss several of these subjects and you will have opportunity to learn more about what it does not discuss.

Mr. Ahearn introduces the first of many operational definitions on page 5. He defines shape as a two-dimensional image of an object. He defines form as a three-dimensional representation of an object.

Take a look at the images on page 6 to get an idea of what he means by shape. In each example on the page, he shows us a recognizable real or created image, then shows us a basic shape that appears in the image. You should take a moment several times this week to look at the world around you and note the basic two-dimensional shapes you can see. A stop sign's shape is an octagon. A book's shape is a rectangle. We covered this idea in CAP 101, looking at basic shapes in characters. We can say that shapes are represented by combinations of primitive constructs: squares, circles, rectangles, triangles, ellipses, etc.

Form, by the definition in this chapter, takes us into three-dimensional representation. Sculpting is always three-dimensional, but drawing needs help to seem three-dimensional. Look at the four figures at the top of page 7. Basic shapes, that have been transformed in the line below them to three-dimensional versions of those shapes. We see three-dimensions because we have been taught to see objects drawn in perspective that way. Note the interesting fact in the caption on that page. We make a square, a rectangle, and a triangle into a cube, a box, and a pyramid by adding a perspective view of more faces. We make a circle into a sphere by adding a light source and shading. The other three figures would look more realistic with light and shadow as well.

On page 9, the text begins discussing light, shadow, and darkness. Consider the illustrations on page 10. The author shows us an image of a door that seems to have depth. He explains that the illusion is caused by the shadows added to the texture of the door. He also shows us that the illusion is ruined when the door is turned away from the viewer. Why? The illusion breaks when the shadows no longer make sense from the viewer/player's current perspective. This will be a key element in a decision he mentions on this page. Should light and shadow be created in the image by texture (light and shadow in an image) , geometry (surface detail on a model), or technology (programs called shaders that run when the game is played)? We will consider each option in turn. As the author explains, the choice that looks best may be discarded in favor of the choice that runs best in the game. Any design choice that causes your game to slow down, to hang, or to crash is a bad choice.

To illustrate a bad texture, the author shows us two textures for a crate on page 12, alone and as used in a scene. If you look quickly at these images you may miss the problems that exist in the bad texture. If you do not see that the shadows and highlights in the scene on the left are wrong, read the author's discussion on page 11 and look again. If you still do not see it, you need to look at light and shadow in the real world for a few minutes, then try again.

Another example of a bad texture is shown on page 13. The author hopes that the image will feel wrong to you even if you do not see the problems immediately. His point, from page 11, is that an artist must be able to see such problems, discuss and describe them in reasonable language, and correct them when they occur.

The author moves on to confuse us with the words texture and textures on page 13. He begins to clarify what he means on page 16. First, the English word "texture" can mean something tactile: how a material feels when you touch it. Have you ever noticed that you can usually tell immediately whether a drinking glass is made of glass or plastic, just by touching it? To most people, the textures of these two materials are quite different. If a touch is not enough, run your fingers across the surface. (These are web notes. Take a minute. Go try it out, then come back.)

Now, recall that we are building toward game art in this text. You have no way to convey the feel of a material to a player by their sense of touch. (Someday, when we have holodecks...) For now, we must convey the look of a texture visually. Highlights and shadows, as we have already discussed, are the main tools to use. The author mulls this over for a couple of pages. We will move on to the next point.

The first color model the author discusses is the HSB model: Hue, Saturation, and Brightness. The author gives us some working definitions of these terms:

• Hue - the author takes a simple approach, and tells us that Hue is the base color from which our particular color is created. You could say, as he does, that there are many specific colors that are all based on red, such as pink, magenta, scarlet, and burgundy. Red would be the Hue for each of them. It may be helpful to see an illustration, as the author suggests. On the right, there is an image from the Visibone web site. Click to jump to that site and experiment with combinations of color.
  
  In this case, red is the base hue in the image at 2 o'clock, on the outer rim of the palette. You can see that there are colors based on orange, yellow, green, blue, and purple in this image as well.


• Saturation - the author explains that Saturation is the amount of white in a color vs. the amount of its base Hue in it. More white means the color is less saturated with the base Hue. In this sense, a fully saturated color is closer to the pure base Hue, which explains the author's statement that Saturation is a measure of a color's purity. In the Visibone diagram, colors near the center are less Saturated, because they are more white, more diluted than colors at the outside of the ring. Do you disagree? Well, there are some exceptions, which we get to next.
  
• Brightness - the author explains that Brightness is the amount of black in a color vs. the amount of its base Hue. This explains the various dark spots in the Visibone ring. In some references and some color mixers, Brightness is called Luminance.

The author turns to more color systems, which take us to a combination of art and physics. There are two systems we can discuss, but they are known by several names:

• subtractive - also called the absorptive or the reflective system of creating color
  Light that is reflected from a red apple is red because the apple, in this case, absorbs most of the other wavelengths of light that hit it, and it reflects mostly red light. This is the color system that is used when you paint something. The paint absorbs the colors it does not reflect. In this system, the primary colors are red, yellow, and blue. When all three are mixed, you get black (no reflection), the absence of color. You can't mix anything in this system to get white: paint usually starts out white and the manufacturer or retailer adds pigment to get a color.
• additive - also called the generative system of creating color
  Light that is generated from a computer monitor or a TV set creates color from a different set of three primaries: red, green, and blue. When you add 100% of these three colors together, you get white light. When you add various amounts of each color, you get any other color the system is capable of generating. You get black by adding no color, which is the opposite of the subtractive system. This system is where we get the RGB color model that is used in computer games, movies, TV, and other electronic media.

You learned about the subtractive color system in Kindergarten. You should know about the additive color system now. Most color mixing gadgets you see will either use the RGB model or will let you choose between the RGB and HSB models.

The text briefly mentions using color for emphasis. The human eye is drawn to things that are unusual in a scene, and a unique color works that way. In the example on page 28, the author has made one change from the first illustration to the second: a crate is now red. This is not the most subtle effect, but sometimes there is a reason to do it. Think of the little girl in the red coat in the movie Schindler's List. When you are watching a black and white movie, and there is one color on the screen, you can't miss it. (The point is easy to understand even if you haven't seen the movie, and impossible to miss if you have.) When the palette for a scene is mostly earth tones, and one object is another color, it stands out. For example, do you know the usual color of the case of an airplane's black box flight recorder? Hints: they want to find it quickly at a crash site, and it isn't black.

On page 29, the author discusses perspective, which he defines rather well: "the illusion that something far away from us is smaller". You should review his material on the subject which completes the chapter.

• vanishing point - illustrated on several pages
• one-point perspective - a subject recedes toward the background in one direction, illustrated on page 34
• two-point perspective - a subject recedes toward the background in two directions, illustrated on page 35
• three-point perspective - a subject recedes toward the background in three directions, illustrated on page 36

Chapter 2 discusses technology used in computer graphics. In this lesson, we'll look at the material on file formats, the grid, and UV mapping.

The author rambles a bit as the chapter begins. He tells us on page 50 that graphic files fall into two types: vector and bitmap. He only defines bitmap which is also called raster.

• raster (bitmap) or vector - follow this link to a discussion of the difference between the formats
• A raster image contains information about every pixel (picture element) that appears on a screen. This kind of image degrades when it is blown up or shrunk too far. This kind of image can also be called a bitmap. Don't confuse this idea with bmp files. In this sense, bmp files are bitmaps, but so are jpg and gif files.
• A vector image contains information about drawing lines and curves from one relative location in an image to another. This makes it possible to change the size of a vector image without losing detail. 3DS Max creates vector images that can be scaled to any size needed.

The author tells us that graphic artists usually work with bitmap (raster) images. He also warns us that whichever type of file we are working with, we should also consider our source file, our output file, and our working file. These should never be the same file. The text only discusses your source file and your output file, but I think it is clearer this way.

• In most cases, you will work with a file that has been saved in the native format of the application you are using. If you are working with Photoshop, your working file should be a .psd file. You may want to save a new version of it each time you make a significant change.
• You may have created the working file from one or more source files, combining them by placing them in layers in the Photoshop file. Modifying these layers will not and should not change your source files.
• Your output file should be saved in a format that works for how it is going to be used. You might save your Photoshop file as a .png, a .tga, a .jpg, or other type of file.

If you change your original source files. you have no way to go back to them when (not if) you need to do so. If you have not saved your working file in your application's format, and you do save it as a compressed or flattened file type, you will lose a significant amount of the ability to go back to the working file and make changes to it. If you do not create a separate output file for your final use, you will lose track of these ideas and run the risk of having to start all over the next time a change is needed.

Regarding what format your three types of files should be saved in, two are practically always out of your control. Source files may be whatever you are compelled to work from. Working files should always be the format preferred by your art program. Only the output file format presents a choice. On page 51, the author presents four rules for choosing an output file format:

• what looks best
• what is required by the technology you are making it for
• what are the limits of the game platform you are making it for
• what did your boss tell you to do

Some file types are smaller than others, typically due to the use of compression when the file is saved. Look at the illustrations on page 53. They show the same working file saved with three different levels of compression. The first thing to note is that all three look remarkably the same when you view them from a distance. When you look closely at the images, however, you can see that the higher the compression, the more data has been lost from the image. Compression formats are often called lossy, because of the data lost when the file is saved. A lossless file format will have the best image, but will be larger due to a lack of compression.

Some file formats have alpha channels, which tell the programs using them how transparent each pixel in the image should be. The illustrations on page 54 show the effectiveness of an alpha channel, allowing the artist to display only what is needed in the scene, avoiding unnecessary occlusion of the background layer.

The author describes a file format from Microsoft, the DirectDraw Surface (DDS) format. This format is recommended by the author as very useful. We will be unable to load the plug-in that makes it possible to use this file format, so we will move on to more information about Photoshop.

On page 60, the author discusses the .psd format which is the native format for Photoshop. The author warns that its virtues are also hazards. Files stored in this format are typically composed of many layers, which can be manipulated to many ends in Photoshop. Since the format is lossless, the files can be very large.

Just because your file has many layers, does not mean you have to keep them all. Once your layers are in the right order and are interacting properly, you may want to save a version of the file in which you have flattened all the layers into one layer. If you do not save this as a new file, you will of course lose all the data that you could otherwise continue to manipulate in the original working file. You can easily flatten such a file by saving a version as a .gif, a .jpg, or any other file type that does not include layers. You can also save the file as a flattened .psd, by simply flattening the layers and saving it without choosing a new file format.

On page 60, the author also introduces the power of 2 grid. The author's point is that we should be working with the same units in all our applications from the start, so we do not have objects that need to be scaled, and art that becomes deformed and unusable when moved from one environment to another. An image works best with the model it will be applied to when both are created on the same scale. The text cautions that you should make sure that the width and height values are the same (square image) and that the values are powers of 2, For those of you unfamiliar with powers of 2:

Another concept, on page 67, is modular design. This is not the same as tiling, but it is related. Many artists learn to tile a material over a surface when they start out making materials, but that technique has limited usefulness. On page 68 and 69, the images make it clear that a scene can look much more realistic if only a few key elements are repeated in a sensible way.

Sometimes there is no simple alternative to making a texture for a model that has a unique shape, or must have a unique appearance. In such cases, you need to use UV mapping. UV mapping is the process of designing a texture that fits a 3D model exactly. The coordinate system for working with a model is the usual XYZ Cartesian system. To make a texture that fits a model exactly, you make an unwrapped model of the surface, on which you use a UVW coordinate system. (U, V, and W are just the letters before X, Y, and Z.)

The text reviews several mapping types found in most 3D design programs. Mapping types are more accurately methods for applying a texture to an object:

• planar - useful for flat objects, like walls, but not good for objects that will be seen in 3 dimensions. Note the smearing effect illustrated on the sides of a head on page 73. The planar mapping loses its appeal on the sides of an object.
• box - box mapping assumes that the object has six regular sides, like a cube. It fails on sides that are uneven or bumpy.
• spherical - as illustrated on page 75, spherical mapping starts with a flat rectangular image that is wrapped around a sphere. There will be a seam on one side where the edges of the rectangle meet, and there may be distortion at the top and bottom of the sphere as well.
• cylindrical - like the spherical mapping above, a cylindrical mapping starts with a rectangular piece of art that is wrapped around a cylinder, making a seam on one side. It does not work perfectly with the ends of the cylinder, either.

You should begin to see why we need a custom map, a skin, for any object that is irregular in shape, or that will be seen closely from any direction.