Tài liệu 2D Artwork and 3D Modeling for Game Artists- P14 pptx

Because RGB color properties are additive, an image cancomposite the three channels to form one 3×8 or 24-bit image, where each result-ing pixel in the image can have one of 224, or 16,7

RGB Color ChannelsOne solution to the problem of having an overwhelmingly large color look-up table

was to separate the red, green, and blue components into eight-bit channels When

an image is separated into these channels, each color can contain 28, or 256, ent brightness levels Because RGB color properties are additive, an image cancomposite the three channels to form one 3×8 or 24-bit image, where each result-ing pixel in the image can have one of 224, or 16,777,216, different colors — morethan enough to display the true color of an image (see Figure B.8)

differ-The highest available color depth in Windows is the ultra-true color mode, or bit — nearly 4.2-billion colors The extra eight-bit portion of the pixel that’s added

32-to the 24-bit sequence is typically used as an alpha channel This channel

repre-sents the transparency of a pixel; as an example, in video games, you might have

seen an object break into pieces all over the floor, then slowly vanish The mers use this channel to diminish the colors of the pixels in the images until theyare completely transparent — then remove the image entirely from the video card

program-to save on memory

Figure B.8 The

RGB color channel composite.

RGB channel composite

Video MemoryModern video cards, particularly those designed for playing video games, have

three main components: a GPU (graphics processing unit), which takes care of things like world and model transformations, lighting, clipping, and rendering; buffers,

which are special memory areas that contain either the actual image you see on

your screen (the primary buffer) or images waiting to be flipped to the primary buffer; and VRAM (Video Random Access Memory).

Your concern is more with the VRAM, which is the area where games store all thewonderful textures and video sequences that you create For example, when youwalk around in a 3D video game, all the textures, models, and animations thataren’t visible but are required for the level in which you are located are stored tem-porarily in VRAM As you progress to other levels, you may see the game hesitate,

or receive a message that it is “loading.” In this case, the game engine is queuing

up the next batch of textures, sequences, and whatnot for display in VRAM

What all this means to you is that when you create textures, models, and tions, you need to consider optimizing each for memory After all, it’ll be a whilebefore you have video cards with 10GB! Table B.1 covers the video memory alloca-tion needed for various image and monitor resolutions and bit color depths

anima-Table B.1 Video Memory Allocations

Image Resolution Bit Color Depth VRAM Requirement

16x16 16, 24, 32 512 bytes, 768 bytes, 1KB32x32 16, 24, 32 2KB, 3KB, 4KB

64x64 16, 24, 32 8.2KB, 12.3KB, 16.4KB128x128 16, 24, 32 32.8KB, 49.2KB, 65.5KB256x256 16, 24, 32 131.1KB, 196.6KB, 266.2KB512x512 16, 24, 32 524.3KB, 786.4KB, 1.1MB1024x1024 16, 24, 32 2.1MB, 3.9MB, 5.2MB

Monitor Resolution Bit Color Depth VRAM Requirement

640x480 16, 24, 32 614.4KB, 921.6KB, 1.2MB800x600 16, 24, 32 960KB, 1.4MB, 1.9MB1024x768 16, 24, 32 1.6MB, 2.4MB, 3.1MB

625

A Few Graphics Concepts

As you can see, the higher the pixel’s bit depth and the larger the dimensions ofyour image, the more memory it eats up in the video card Later on you’ll createyour images and then optimize them to take up minimal space in memory.

You may also notice that the first seven entries in Table 2.1 are equal multiples of

16 As a game artist, you’ll typically need to create textures with image sizes ble by 16 Can you guess why? As I discussed before, computers are based on thebinary system, and video resolutions and color depths are based on this as well.Game programmers design their game

divisi-engines around this system, so making your

images in this fashion will allow them to

eas-ily fit within the game engines’ parameters

A great example of these texture size

restric-tions is Half-Life (of course!) The developers

of Half-Life put a ceiling on their textures so

that the maximum dimensions of any image

were 25×256 pixels with an eight-bit

(256-color) palette The texture is usually created

at something like 512×512 at 24-bit color,

then reduced to this range As technology increases, however, and better videocards and computers become available, game developers will allow higher and

higher quality images In fact, games like Unreal Tournament allow up to 1024×1024

texture resolutions, but are typically scaled down dynamically during game play to256×256 due to video hardware restrictions

Other Color Modes

You’ve been focusing primarily on the RGB color model, which is the most versatilefor game graphics, but there are a few other modes:

■ CMYK

■ Grayscale

■ LAB

CMYK

Often you’ll see the CMYK mode (cyan, magenta, yellow, and black) If you look

back to the RGB color plate in Figure B.6, you’ll see that the intersections of thesecolors additively create the CMY colors Printers usually use the CMYK colors due

TIP

To quickly figure out the size of your image, multiply the width, height, and depth (in bytes) Remember, there are eight bits

in a byte, so a 1024 ×768, 24-bit

image would be 1024 ×768×3

bytes, or 2,400KB (2.4MB).

to their subtractive properties — unlike the RGB colors, which are based on light

waves, CMY ink colors blend to subtractively make other colors When all three arebrought together, they make black (see Figure B.9)

It was found, however, that when bringing equal amounts of cyan, magenta, andyellow together, the resulting mix didn’t really produce true black That’s why anadditional black component (K) is tagged along with the other three colors when-ever black is required If you have a color printer, you can see this in action —open the lid and take a look at the ink cartridges Your printer will probably have

a CMY unit and a black unit And when printing white? Well, just don’t print thing at all!

any-Grayscale

Grayscale is simply an eight-bit color mode that contains 256 different shades ofgray, from white to black (see Figure B.10) The uniqueness of a grayscale image isthat it’s not indexed like an eight-bit color image; rather, it has only one colorchannel of black, and the pixels in the image channel are based on 256 differentintensities of black

627

A Few Graphics Concepts

Figure B.9 The

subtractive nature of the CMYK color model.

LAB images have three channels like RGB, but the first is a lightness channel andthe other two are chromacity (color information) channels, A and B The advan-tage of the LAB format is more for medium transportation purposes — if you view aLAB image on-screen, technically no color information will change when it goes tothe print shop Also, Photoshop uses LAB as an intermediary when convertingfrom, say, RGB to CMYK, to suppress color loss You don’t need to be concernedabout this; it’s just good to know

File Formats

I’m going to wrap up this appendix with some of the primary image formats you’ll

be using when saving your work Each file format offers different techniques of ing image information, content, and compression Your file-format options are

The default image format in Photoshop is PSD When creating an image, all thecomponents of the image such as layers, styles, channels, paths, and so on are

stored in the PSD file Always save your original work in this format first, then save

to another format If you don’t save your image as a PSD, but need to go back tomake a modification, you’ll simply open a flattened image without the originalcomponents

BMP

This is the Windows Bitmap file, based on an eight-bit (256) color palette Mostimages you create for games in Photoshop will be saved in this format Typically,you’ll create an image in 24-bit color mode; when you save it as a BMP file, the col-ors in the image are palletized to eight-bit Basically, in a game, having a 24-bitimage is overkill, so having your images converted to eight-bit will display enoughcolors for the player not to notice — at least for now The Half-Life engine makesuse of this format

JPEG

This is the Joint Photographic Experts Group file format, invented primarily foroptimizing file sizes for things like the World Wide Web The JPEG format is usu-ally the least desirable nowadays, because it offers variable compression settingsthat will seriously degrade the quality of an image (see Figure B.11) Use this for-mat only when you need to send pictures over the Internet

degra-Uncompressed Hi-res JPEG Med-res JPEG Low-res JPEG

This popular format was developed by ZSOFT as a proprietary format for their PCPaintbrush program back in the good ’ol DOS days PCX has a better compressionratio than BMP while retaining the same image quality The Unreal and UnrealTournament engines use this format

PNG

The Portable Network Graphics format is one of the best ways to preserve imagedata and have compresson at the same time I’m not sure why PNGs aren’t usedmore often; this graphics format has lossless, high compression with the capability

of storing alpha (transparency) information This format was designed to replacethe popular GIF format and be seamlessly portable between computer systems.GarageGames’ Torque engine makes use of the PNG format

TGA

The Targa format, developed originally for the Truevision video board, is usedoften when saving animation frames in 3D programs due to the high-quality imagecontent–to-compression ratio TGAs also store layers and transparency channels,and are used within the Quake engine for images requiring transparency informa-tion

TIFF

The Tagged Image File Format is another high quality image format that allows forthe storage of layers and transparency, just as with PSD files The down side is itscompression; TIF files, although containing very high quality, usually have huge filesizes

APPENDIX C

Photoshop 6

Keyboard Shortcuts

The following tables represent many, but not all, of Photoshop’s keyboard cuts Unless you’re weirdly obsessed with Photoshop, I wouldn’t recommendtrying to memorize them all — in fact, the first table contains the bulk of the short-cuts that I use most often I recommend at least being proficient with these tomake your work go quicker.

short-My Most Frequently Used

Action Shortcut

Fill with Foreground Color Alt+Backspace

Hand Tool Spacebar, with most other tools

Merge Layer Down Ctrl+E

Move Tool Ctrl, with most other tools

Select Layer Opacity Ctrl+Click on Layer

Step Backward Ctrl+Alt+Z

Step Forward Ctrl+Shift+Z

Toggle Cursor Shape Caps Lock

Toggle Grid Ctrl+Alt+’

Toggle Snap Ctrl+;

Toggle Guides Ctrl+’

Toggle Lock Guides Ctrl+Alt+;

Toggle Menu Bar Shift+FToggle Rulers Ctrl+RToggle Screen Mode FToggle Snap Ctrl+;

View Actual Pixels Ctrl+Alt+0

Ctrl+-633

Keyboard Shortcuts

Keyboard Shortcuts

Selection Modification

Action Shortcut

Reselect Ctrl+Shift+D

Delete Selection Backspace, Del

Move Selection One Pixel Ctrl+↑, ↓, ←, →

Move Selection 10 Pixels Shift+↑, ↓, ←, →

Toggle Toolbox and Palettes Tab

Layer Modification

Action Shortcut

New Layer Ctrl+Shift+NLayer Via Copy Ctrl+JLayer Via Cut Ctrl+Shift+J

Go Up a Layer Alt+]

Go Down a Layer Alt+[

Move Layer to Top Ctrl+Shift+]

Move Layer Up Ctrl+]

Move Layer Down Ctrl+[

Merge Visible Ctrl+Shift+EGroup with Previous Ctrl+GChange Layer Opacity 1 through 9, 0Preserve Transparency /

Channel Modification

Action Shortcut

Load Mask as Selection Ctrl+Alt+~

Select Channel Ctrl+1 through 9Select Layer Mask in Channel Ctrl+\

Toggle Channel View ~

Color Modification

Auto Contrast Ctrl+Alt+Shift+LAuto Levels Ctrl+Shift+LColor Balance Ctrl+B

Desaturate Ctrl+Shift+UGamut Warning Ctrl+Shift+YHue/Saturation Ctrl+U

637

Keyboard Shortcuts

Soft Light Alt+Shift+F

Hard Light Alt+Shift+H

Color Dodge Alt+Shift+D

Color Burn Alt+Shift+B

APPENDIX D

Glossary

of 2D- and 3D-Related Terminology

16-bit color.Also called high color A color mode in which each pixel in an image is

typically defined by five bits of red, six bits of green, and five bits of blue

2D Short for two dimensional An object or image defined in two dimensions exists in a

flat plane having two coordinate axes, x and y

32-bit color Also called ultra true color A color mode where each pixel in an image is

defined by eight bits each of red, green, and blue, with an extra eight-bit channel usedfor transparency

3D.Short for three dimensional An object or image defined in three dimensions has

three coordinate axes, x, y, and z, where the z axis provides depth

3DR.A real-time rendering mode from Intel that uses the Windows GDI to renderobjects dynamically Use this mode if your video card does not support 3D acceleration

3DS.Discreet’s 3D Studio Max file format Stores object information such as vertexcoordinates, textures, and colors

A

Aaaauuugh!The loud vocal sound emitted when your computer freezes and you forgot

to regularly save your complex 3D model in progress

Accelerated Graphics Port.See AGP.

Acuity.Refers to the ability to differentiate the details of an image, especially at adistance

Adaptive.A sampling mode used when anti-aliasing an image in high quality

Adjustment layer.A modifiable layer in Photoshop used to correct colors and tones in

an image

AGP.Short for Accelerated Graphics Port A video card specification designed explicitly

for 3D graphics and used in conjunction with motherboards having an AGP slot

Alpha blend.To combine textures and/or materials with an alpha (transparency)channel to produce see-through materials and special effects

Alpha channel.An extra color channel, typically eight bits long, to define an image’stransparency

Ambience.Light that an object can self-emit.

American National Standards Institute.See ANSI.

American Standard Code for Information Interchange.See ASCII.

Anchor point.A control point on a spline curve that can be moved or adjusted tochange the shape of the curve

Anisotropic.The simulation of the way light reflects off of world materials A world example would be brushed metal — the surface has micro-grooves aligned incertain directions that reflect light in a characteristic texture

real-ANSI.Short for American National Standards Institute An organization that developed an

international file standard so that files can be read and understood across multipleplatforms

Anti-alias.To remove the stair-casing or “jaggies” effect at the edge of an image byinterpolating and blending the colors between edge pixels

Artifact An undesirable pixel or group of pixels that sometimes occurs when an object

or image is viewed up close

ASCII Short for American Standard Code for Information Interchange A text file format

developed by the American National Standards Institute to define simple text that can

be read across multiple platforms

Asset.Any file, such as a texture image, model, animation, or sound clip, that ismanaged and organized for a video game

Audio-Video Interleave.See AVI.

AVI.Short for Audio-Video Interleave A video format typically read by most

computer-based media players, such as Windows Media Player Most animated textures in videogames are saved in this format

Axis.A Cartesian plane defining the dimensional coordinates of an object or world

B

Backface culling See culling.

Bevel.To raise and angle a face of an object to make it appear chiseled

Bézier curve.Created by French mathematician Pierre Bézier, a curve that is defined

by two anchor points and one or several control points between them

641

Glossary of 2D- and 3D-Related Terminology

Bilinear.A filtering method used to correct the appearance of textures on objects as

they come closer to the user’s point of view Individual texels, or texture elements, are

interpolated to generate a new texel so the texture appears sharp

Binary.The mathematical system based on the power of two In computers, bits arerepresented in this system by being either 0 (off) or 1 (on)

Binary space partitioning See BSP.

Bit.The smallest memory element in a computer that has a binary state of either 0(off) or 1 (on)

Bitmap.A 2D image that is represented using a palette of colors Typically, gametextures are stored as bitmaps and rendered by the game’s engine

Bone.An object that is used to define a skeletal structure in a 3D graphics program.The mesh surrounding the skeleton is deformed as the skeleton is animated or moved

Boolean A logical operation used to subtract, intersect, or unite two objects in agraphics program

Bounding box.An invisible box that surrounds an object in a game or graphics

program This box is typically used for collision detection in games

Brush.A 3D object created in a game’s level using a level editor, typically constitutingthe geometry of the environment (for example, walls, floors, and ceilings) and usuallypart of a BSP tree In Photoshop, a brush is a 2D image map used in conjunction with

a painting tool to paint in the pattern of the map

BSP Short for binary space partitioning An algorithm used to break up a 3D map into a

tree hierarchy to determine the depth of objects from the camera view during

rendering This technique is performed so the renderer knows which object in themap is farthest from the camera, and can thus render successively closer objects in

sequence; otherwise, the scenes wouldn’t be displayed properly Quake map files are

compiled into a BSP format

Buffer.A physical memory location used to temporarily cache chunks of data duringprogram operation

Bump map.A grayscale displacement map used to simulate raised surfaces on a 3Dobject The highest bumps on a surface are indicated by white on the map, while thelowest are indicated by black

Burn.To darken areas of a 2D image, similar to darkening photographs in a darkroom

Canvas.The blank workspace file used to create or place images in Photoshop

Central processing unit See CPU.

Chamfer.To smooth out the edges of a 3D object

Clipping.In games, any part of the 3D environment not visible is clipped by a clippingplane In Photoshop, a layer can be used to clip or mask another layer for constrainedediting operations

CMYK.Short for cyan, magenta, yellow, black The subtractive primary color group used

for printing

Codec.Short for coding/decoding Any program used to compress or decompress video

clips

Color channel.An inclusive range of a primary color, dictated by a brightness value

The additive primary colors red, green, and blue are separated into eight-bit channels,each channel having 256 different brightness values

Contrast.The sharpness of an image determined by the color difference ofneighboring pixels

Coordinate.The Cartesian x-, y-, and z-axis location of a vertex in a 3D program

CPU Short for central processing unit The core processor of a computer that carries out

instructions issued by programs

Crop.To select a portion of a 2D image and eliminate the rest

Culling.The way in which a graphics program or engine does not attempt to draw or

render polygons on an object that can’t be seen by the viewer Also called backface

culling.

Curves.A function in Photoshop that lets you re-map the brightness values of pixels in

an image to new values Used for making precise tonal adjustments

D

DDR Memory.Short for Double Data Rate RAM, a memory chip that has twice the

bandwidth of standard SDRAM modules This memory will adversely affect the speed

of graphics programs on your computer

Decal.A texture map that is applied on top of the existing materials of a 3D object orbrush

643

Glossary of 2D- and 3D-Related Terminology

Decimation.Reducing the number of polygons a 3D object contains Also, reducing animage’s file size by reducing the resolution Neighboring pixels in the image areaveraged and combined, while others are altogether stripped.

Deformation The transformation of vertices in a 3D mesh object to conform to a set ofrules or another object

DIMM.Short for Dual Inline Memory Module This is a single memory chip that

contributes to the overall amount of RAM a computer system contains

Direct3D.Part of DirectX, a software interface that translates graphics commands from

a program or game directly to the video card in a computer system

DirectX.An application programming interface from Microsoft that allowsprogrammers to easily create graphics programs and games that are video-hardwareindependent DirectX is the standard PC game-development platform and is typicallyneeded to run most video games or graphics programs

Displacement map.See bump map.

Dissolve In Photoshop, a mode that randomly scatters pixels along the edges of abrush stroke Similar to the splattering of spray paint

Dithering The approximation of an unavailable color by selecting a mix of other colorsfrom a reduced color palette

Dodge.The opposite of burn In Photoshop, to lighten areas of an image.

Dot pitch.In a computer monitor, the distance between the masking holes that themonitor’s light rays shoot though The smaller the dot pitch, the sharper the image Atypical monitor has a dot pitch of 0.28 millimeters

Drawing Exchange Format See DXF.

DXF.Short for Drawing Exchange Format The proprietary file format of AutoCAD, a

sophisticated 3D architectural and engineering design program

E

Edge The line that connects two vertices in a 3D mesh object

Embossing.A graphics technique that adds highlights and shadows to the featurededges of a 2D image, making it appear 3D

Engine.The main body of a game program that handles all graphics, artificialintelligence, actions, sequences, and player input

Entity.An element or combination of elements that constitutes an item in a game’slevel A simple example of an entity is a light object placed inside a lamp model tothrow off light.

Environment map.An image used for creating rendering illusions to simulate anobject’s reflective surroundings

Extrude.To pull a polygon or the face of an object out or along a defined path

F

Face.An area of a 3D mesh object that is bounded by at least three vertices and threeedges

Faceting.The act of adding faces to a mesh object to enhance detail

Falloff.The rate at which light decays as it moves away from its source

Feathering.The fading of pixel brightness from the edges of an image

Feature edge.The edges of a 3D object that make up the object’s basic shape

Field of view.See FOV.

Fill rate.The speed, in terms of pixels per second, at which a video card can draw

on a screen

Fillet.To smooth the corner of a shape

Filter.A plug-in for Photoshop that performs a predetermined graphics action on animage

FOV.Short for field of view How much of a scene can be viewed from the user’s or

camera’s perspective

FPS.Short for frames per second The rate at which a game, animation, or video takes

place Typically, games are set between 24 to 30 frames per second

Fractal pattern.A mathematically defined graphics pattern that contains infiniteiterations Typically used to simulate organic objects

Frag To kill

Frames per second.See FPS.

Function curve.In animation, a spline curve that represents the rate of animationbetween keyframes

645

Glossary of 2D- and 3D-Related Terminology

Gamma.The brightness value of a scene or game environment

Gamut.A range of colors used in an image Gamut Warning is used in the graphicsindustry to prevent unprintable colors from being used in an image

Gourad.A shading technique that produces color gradients over a mesh object, giving

an illusion of smoothness and depth

GPU.Short for graphics processing unit The core processor of a video card that handles

the instructions sent by the computer to display images on the screen

Gradient.The blending of one color or shade to another

Granularity.The ability to perceive detail of an object at a distance

Graphics processing unit.See GPU.

Grayscale.An image whose pixels consist of only 256 different shades of black andwhite

H

Hierarchy.A structured relationship of glued or attached objects in a parent-child orchild-child tree-like arrangement

High color.See 16-bit color.

Hue.Any color at its purest

on the second, known as interlacing lines.

Inverse kinematics.A kinetic hierarchy used to simulate the way linked objects behave

in the real world For instance, in a 3D program, if a character’s hand is linked to hisarm, and the arm is linked to the upper body, pulling on the hand in an inversekinematical link will cause the arm to straighten first, followed by the upper body

J

Joint.A 3D pivot location where two bones meet

JPEG.Short for Joint Photographic Experts Group A compressible file format meant for

the World Wide Web

K

Kerning.The spacing between characters in text If the spacing were equal in all text,the words would contain letters that are equally spaced, making them appear veryblocky

Keyframes.The starting and ending positions of an object or objects in an animation.Keyframes are placed at every significant point where an object should change

direction and/or speed The computer fills in the rest of the frames in between the

keyframes, a process known as tweening.

L

LAB.A color mode that consists of a Lightness channel and two chromacity channels,

A and B Typically used for color conversions between other modes or for porting work to a print shop

Lasso.A tool used in 2D and 3D programs to make freehand pixel or polygon selections

Lathing.The process of sweeping a polygonal shape or object around an axis toproduce a 3D object that is symmetrical

Layer.An independent sub-image that is part of an overall image in Photoshop Animage can contain many different layers, all of which constitute the final image

Leading.The spacing between lines of text In the old days, typesetters would place

strips of lead between the lines to space them out properly See kerning.

647

Glossary of 2D- and 3D-Related Terminology

Level of detail.The varying polygon count that makes up the geometrical detail of anobject in relation to the distance of the eye view of the player Game objects usuallyhave multiple levels of detail, so that up close the high polygon count object is

displayed, while from afar it is replaced by the low polygon count object, thus speeding

up the game play

Level.A map or segment in a video game that contains rooms, objects, characters,traps, triggers, functions, and the like A typical video game contains dozens of levels,each connected to the others in a game sequence

Levels.In Photoshop, the levels are a combination of the adjustable highlights,

midtones, and shadows the pixels of an image contain These levels can be adjusted tochange the overall contrast in an image

Light Wave Object.See LWO

Linear interpolation.The way a graphics program calculates the images in betweenkeyframes of an animation By analyzing the vertex positions of the beginning andending keyframes, it assumes a linear path that the vertices must follow in the frames inbetween

LOD.See level of detail.

Loft.To sweep a polygon or face along a path to create a 3D object

LWO.Short for Light Wave Object This is Newtek’s proprietary object file format.

M

Map.See level.

Marching ants See marquee.

Marquee.A boundary in Photoshop that defines a selection The selection is displayed

as a moving pattern called marching ants.

Mask A graphics operation that creates a temporary overlay on an image with a

specified pattern in order to isolate a particular work area

Material.Synonymous with texture An image, pattern, color, or combination of such

in conjunction with displacements and transparencies to be painted onto an object

MD3 id Software’s Quake III character model file format.

MDL Valve’s (and Quake’s) character model file format.