RGB Color Channels One 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 2 8 , or 256, differ- ent brightness levels. Because RGB color properties are additive, an image can composite the three channels to form one 3×8 or 24-bit image, where each result- ing pixel in the image can have one of 2 24 , or 16,777,216, different colors—more than enough to display the true color of an image (see Figure B.8). The highest available color depth in Windows is the ultra-true color mode, or 32- bit—nearly 4.2-billion colors. The extra eight-bit portion of the pixel that’s added 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 program- mers use this channel to diminish the colors of the pixels in the images until they are completely transparent—then remove the image entirely from the video card to save on memory. 624 B. A 2D Graphics Primer Figure B.8 The RGB color channel composite. RGB channel composite Red channel Green channel Blue channel TEAMFLY Team-Fly ® Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Video Memory Modern 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 the wonderful textures and video sequences that you create. For example, when you walk around in a 3D video game, all the textures, models, and animations that aren’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 anima- tions, you need to consider optimizing each for memory. After all, it’ll be a while before 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. Ta b le B.1 Video Memory Allocations Image Resolution Bit Color Depth VRAM Requirement 16x16 16, 24, 32 512 bytes, 768 bytes, 1KB 32x32 16, 24, 32 2KB, 3KB, 4KB 64x64 16, 24, 32 8.2KB, 12.3KB, 16.4KB 128x128 16, 24, 32 32.8KB, 49.2KB, 65.5KB 256x256 16, 24, 32 131.1KB, 196.6KB, 266.2KB 512x512 16, 24, 32 524.3KB, 786.4KB, 1.1MB 1024x1024 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.2MB 800x600 16, 24, 32 960KB, 1.4MB, 1.9MB 1024x768 16, 24, 32 1.6MB, 2.4MB, 3.1MB 625 A Few Graphics Concepts Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. As you can see, the higher the pixel’s bit depth and the larger the dimensions of your image, the more memory it eats up in the video card. Later on you’ll create your 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 divisi- ble by 16. Can you guess why? As I discussed before, computers are based on the binary system, and video resolutions and color depths are based on this as well. Game programmers design their game 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 video cards 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 to 256×256 due to video hardware restrictions. Other Color Modes You’ve been focusing primarily on the RGB color model, which is the most versatile for 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 these colors additively create the CMY colors. Printers usually use the CMYK colors due 626 B. A 2D Graphics Primer 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). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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 are brought together, they make black (see Figure B.9). It was found, however, that when bringing equal amounts of cyan, magenta, and yellow together, the resulting mix didn’t really produce true black. That’s why an additional 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 any- thing at all! Grayscale Grayscale is simply an eight-bit color mode that contains 256 different shades of gray, from white to black (see Figure B.10). The uniqueness of a grayscale image is that it’s not indexed like an eight-bit color image; rather, it has only one color channel of black, and the pixels in the image channel are based on 256 different intensities of black. 627 A Few Graphics Concepts Figure B.9 The subtractive nature of the CMYK color model. Magenta Cyan Black Yellow Green RedBlue Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. LAB LAB images have three channels like RGB, but the first is a lightness channel and the 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 a LAB image on-screen, technically no color information will change when it goes to the print shop. Also, Photoshop uses LAB as an intermediary when converting from, say, RGB to CMYK, to suppress color loss. You don’t need to be concerned about 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 sav- ing image information, content, and compression. Your file-format options are ■ PSD ■ BMP ■ JPEG ■ PNG ■ TGA ■ TIFF 628 B. A 2D Graphics Primer Figure B.10 A grayscale gradient image. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. PSD The default image format in Photoshop is PSD. When creating an image, all the components 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 to make a modification, you’ll simply open a flattened image without the original components. BMP This is the Windows Bitmap file, based on an eight-bit (256) color palette. Most images 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-bit image is overkill, so having your images converted to eight-bit will display enough colors for the player not to notice—at least for now. The Half-Life engine makes use of this format. JPEG This is the Joint Photographic Experts Group file format, invented primarily for optimizing file sizes for things like the World Wide Web. The JPEG format is usu- ally the least desirable nowadays, because it offers variable compression settings that 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. 629 A Few Graphics Concepts Figure B.11 JPEG image degra- dation as compres- sion increases. Uncompressed Hi-res JPEG Med-res JPEG Low-res JPEG Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. PCX This popular format was developed by ZSOFT as a proprietary format for their PC Paintbrush program back in the good ’ol DOS days. PCX has a better compression ratio than .BMP while retaining the same image quality. The Unreal and Unreal Tournament engines use this format. PNG The Portable Network Graphics format is one of the best ways to preserve image data and have compresson at the same time. I’m not sure why PNGs aren’t used more often; this graphics format has lossless, high compression with the capability of storing alpha (transparency) information. This format was designed to replace the 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 used often when saving animation frames in 3D programs due to the high-quality image content–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 for the storage of layers and transparency, just as with PSD files. The down side is its compression; TIF files, although containing very high quality, usually have huge file sizes. 630 B. A 2D Graphics Primer Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. APPENDIX C Photoshop 6 Keyboard Shortcuts Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. T he following tables represent many, but not all, of Photoshop’s keyboard short- cuts. Unless you’re weirdly obsessed with Photoshop, I wouldn’t recommend trying 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 to make your work go quicker. My Most Frequently Used Action Shortcut Copy Ctrl+C Cut Ctrl+X Deselect Ctrl+D 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 New Canvas Ctrl+N New Canvas with Previous Settings Ctrl+Alt+N Paste Ctrl+V Quick Mask Q Repeat Filter Ctrl+F Select All Ctrl+A 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+; Undo Ctrl+Z 632 C. Photoshop 6 Keyboard Shortcuts Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. File Menu Action Shortcut New Ctrl+N New Document with Previous Settings Ctrl+Alt+N Open Ctrl+O Open As Ctrl+Alt+O Close Ctrl+W Close All Ctrl+Shift+W Save Ctrl+S Save As Ctrl+Shift+S Save As Copy Ctrl+Alt+S Save for Web Ctrl+Alt+Shift+S Print Options Ctrl+Alt+P Page Setup Ctrl+Shift+P Print Ctrl+P Exit Ctrl+Q Color Settings Ctrl+Shift+K Preferences Ctrl+K Views Action Shortcut Apply Zoom Shift+Enter Fit to Screen Ctrl+0 Toggle Extras Ctrl+H Toggle Grid Ctrl+Alt+’ Toggle Guides Ctrl+’ Toggle Lock Guides Ctrl+Alt+; Toggle Menu Bar Shift+F Toggle Rulers Ctrl+R Toggle Screen Mode F Toggle Snap Ctrl+; View Actual Pixels Ctrl+Alt+0 Zoom In Ctrl++ Zoom Out Ctrl+- 633 Keyboard Shortcuts Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... being a game artist it’s well worth the cost Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Models, Textures, and Tutorials 659 3D Fuel http://www.3dfuel.com 3D Fuel is a good site for shaders, objects, tutorials, and scripting for trueSpace 3D Links http://www.3dlinks.com Looking for the ultimate resource for 3D modeling and animation programs? Check out 3D Links for information,... well as loads of utilities, modeling and painting software, and plug-ins for MAX, Photoshop, trueSpace, Lightwave, and SoftImage You’ll also find tutorials for MAX and links to various other 3D graphics sites 3D Cafe http://www.3dcafe.com 3D Cafe is the hangout for 3D artists and animators This site has more collections of high-resolution models, textures, tutorials, plug-ins, and fonts than you can hurl... Short for video random access memory The high-speed memory located on video cards used for storing information that will be written to the screen VRML Short for Virtual Reality Modeling Language A Web-based language, similar to HTML, that allows for browsing Web sites in a 3D, virtual environment W Wireframe The unrendered mesh of a 3D object X X Microsoft’s DirectX file format, used for storing model and. .. 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 is managed and organized for a video game Audio-Video Interleave See AVI AVI Short for Audio-Video Interleave A video format... 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 featured edges of a 2D image, making it appear 3D Engine The main body of a game program that handles all... pyramid) connected and sharing vertices and edges Polyhedron A 3D solid object comprised of at least five polygons (a pyramid) Portable Document Format See PDF POV Short for point of view The user’s perspective view in a 3D world Primitive Any basic polyhedron used in 3D modeling such as a pyramid, cube, or sphere Q Quad divide A process in which a 3D program adds an extra horizontal and vertical edge... D Glossary of 2D- and 3D- Related Terminology Decimation Reducing the number of polygons a 3D object contains Also, reducing an image’s file size by reducing the resolution Neighboring pixels in the image are averaged and combined, while others are altogether stripped Deformation The transformation of vertices in a 3D mesh object to conform to a set of rules or another object DIMM Short for Dual Inline... Knight Productions is a source for purchasable high-quality models and plugins for trueSpace and 3D Studio MAX DigitalFlux Entertainment http://www.digitalflux.com DigitalFlux Entertainment is another good resource for plug-ins and tutorials for trueSpace Eyeball Design http://www.eyeball-design.com This site features top-quality tutorials for creating cool interfaces, textures, and Web graphics with Photoshop... 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 constituting the geometry of the environment (for example, walls, floors, and ceilings) and usually part of a BSP tree In Photoshop, a brush is a 2D image map used in conjunction with a painting... A 2D polygonal shape that has smoothed, adjustable corners that can be manipulated via control handles Spotlight A light source that projects from a source point outwards in a cone-shaped pattern Sprite A 2D image with a transparency channel typically used for game animations to simulate particle systems such as smoke, fire, and steam Sprite images were also used in 2D games to animate characters and . close. ASCII. Short for American Standard Code for Information Interchange. A text file format developed by the American National Standards Institute to. increases, however, and better video cards and computers become available, game developers will allow higher and higher quality images. In fact, games like Unreal