Welcome back! This is the fourth installment in "A Crash Course in Game Design and Production. Like last time, this lesson is in multiple parts. In PART ONE, we'll discuss computer graphics in general, and what we need to know before we can talk about ART. In PART TWO We'll discuss the ART Specification, what it is and what we need to put in it. In PART THREE we will discuss tile-based graphic screens and specifically how we're going to approach maze creation for our course project, as well as how to draw the tiles. In PART FOUR will write the fourth section of the Design Spec for our Course Project, the Art Specification.

  Part 1A - The Basics of Computer Art.

Before we can have any meaningful discussion of computer game art, we need to get some terms defined and some concepts explained. In this section we'll talk briefly about Computer Graphics, Video Modes, Resolution, Aspect Ratio, Pixels, Palettes, Masking, Sprites, Backgrounds, and Anti-aliasing, then briefly about what to look for in a graphics\animation editing program from
a game design standpoint.

Video Modes
The computer is capable of displaying information in many formats: It could be text, a picture, animation, or sound. For our purposes, we are working with images. The Video Mode you use determines what kind of images you can display, how big they can be, and how many colors the image may contain. Video modes can be classified into two groups, Text or Graphics modes.

In Text modes, all you can display are letters and words. Not real useful for most games. Language Wars is an example of a game written in Text mode.

Graphics modes allow you to display images and animations as well as text in 16 or 256 colors. There are multiple Graphics Modes to choose from, each will allow you to display different amounts of data on the screen. Each datum (singular of data, the smallest displayable chunk of information)is shown on your monitor as a PIXEL (Picture Element - part of a Picture, an image displayed on your screen.) A Full-Screen image in different video modes contains more or less Pixels, and may contain more or less colors than in other video modes.

Example:
Video Mode 18 can display an image that is 640 pixels wide and 480 pixels high in up to 16 colors. Video Mode 19 can display an image that is 320 pixels wide and 200 pixels high, but in 256 colors. Video Mode 256 can display an image that is 640 pixels wide and 480 pixels high in 256 colors.

Note: If you draw a Full-Screen picture in Mode 19 and display it in mode 256, say, the image will be about 1/4 the screen size now! Since the Video Mode can display more Pixels, the Pixels themselves are smaller.

Resolution
When we discuss Video Modes, it is useful to refer to them by the number of Pixels they can display Width x Height. Instead of saying "Mode 256" or "Mode 18", we'll say "640x480 mode" with the number of colors implied. This is called RESOLUTION. Similarly, Mode 19 is "320x200" and Mode 260 is "1024x768." See graphics.e for a list of valid video mode for Euphoria.

When we talk about the Resolution of an IMAGE, we are referring to how wide and how tall it is, not necessarily what Video Mode it was created in or should be displayed in. For instance, in our class project, our characters will be 12 pixels wide and 8 pixels high, so we'll call it a "12x8" image.

Aspect Ratio
The Aspect Ratio is the ratio of the Pixel Width to Pixel Height for a particular video mode. In 640x480, 800x600, and 1024x768 modes, the aspect ratio is 1:1 or 1, meaning the pixels are square. In 320x200, the aspect ratio is 1.21:1 or .82, meaning the pixels are higher than they are wide. If you create an image in 320x200 mode and display it in 640x480, it will appear slightly squashed, since the pixels are 21% shorter in this mode relative to their height than in 320x200 mode.

RGB Values
Remember when you were in school and they gave you only 3 crayons and told you could make any color by mixing varying amounts of the 3 "primary" colors, and you tried all day and it didn't look very good? It's true. On paper, if you mix Cyan(blue), Magenta(red), and Yellow(yellow) in varying amounts you can get any color you can see. Determining the right amounts of each is called creating a CYM Color Separation. On your Monitor(and light in general) it works exactly the same way, only with different colors. Every color you can see on your monitor is made up of varying amounts of Red, Green, and Blue "light." In your art program, when you change a color, you do so by changing the RGB (Red, Green, Blue) values for that color. For VGA video modes, you have effectively 64 levels each of Red, Green, and Blue to play with, for a total of 64x64x64= 262,144 possible colors, of which you can choose any 16 or 256, depending on your video mode. EGA modes give you 4x4x4=64 total colors of which you can choose 4 or 16 for your palette, depending on your video mode.

4-bit, 8-bit, 16-bit, 24-bit Color Modes
You hear this phrase thrown around a lot, "I only have an 24-bit video card" or "I'm writing my game in 8-bit video." This just tells you how many colors can be displayed on the screen at one time, i.e. how big the color palette is. 8 bits is 2^8 or 256 colors. 16 bits is 2^16 or 32768 colors, 4 bits is 2^4 or 16 colors.

Pixels and Palettes
A picture on the screen is made up of different colored Pixels. The number of colors available to the image is determined by the current Video Mode. For 256 color Modes, there are 256 colors available. These colors are stored in a table called the Color Palette. These 256 colors are chosen from the VGA Palette of 262,144 colors.

Each Pixel can have a value from 0-255, which tells the video screen which of the 256 colors in the Color Palette to display at that Pixel location. The pixels themselves have NO COLOR INFORMATION, they just tell where to look in the Color Palette to get the color you want. If you change the colors in the Color Palette, any pixels that were assigned to those colors also change. If you load an image created with one Color Palette and display it using a different Color Palette, the colors will be wrong.

All art for your game MUST BE DRAWN USING THE SAME COLOR PALETTE. It's not enough to have the same colors, they MUST be in the same color position in the Color Palette. If you have two images, one with Blue, say in palette position 5 and the other with the EXACT SAME SHADE OF BLUE in color position 18, if you display them together, the second Blue may appear GREEN,ORANGE,or AVOCADO, depending on what is in color position 18 in the current Color Palette.

How Palettes are stored
While VGA only has 64 values each for R,G,B, some image formats, most notably BMP, store them as whole bytes, as if the values were from 0-256. They are stored as 4 times bigger than they really are, consequently, in Euphoria, you have to divide the palette sequence by 4 before you can do a all-palette(). Many art programs also edit the colors as if you have 8 bits or 256 levels of R,G,B to stay consistent with 16 and 24 bit video modes where you have 16.8 million colors to choose from. Just make a mental note that the real values for those colors are 1/4 what you tell the program they are.

Images and Animation Frames
An Image is a rectangular collection of pixels which contains something visually recognizable, like a picture of your mom. An Animation Sequence is a collection of images, which when viewed sequentially expresses an action of the visually recognizable thing, like your mom sticking her tongue out at you for digitizing her. Each individual image in the Animation Sequence is an Animation Frame. When we want to make our Ghosts, say, roll their eyes, or move their feet, we need to draw multiple images of the Ghost, each one making a portion of the whole action. If we want him to roll his eyes in 10 frames, in each frame his eyes roll 1/10 of the way around from the previous frame. Again, all 10 frames MUST use the same Color Palette.

Color Cycling
Sometimes it is very handy to change a few colors in the Palette over the course of an animation. For many of the display messages in my games, I have the letter colors animating from the top to the bottom of the letters then back around. To accomplish this, I made all the moving colors consecutively in the Palette and shifted them to the left for each frame. The last color in the sequence gets shifted to the first color, then moves left on the next frame. This is called Color Cycling, and is a neat effect. Normally this is a programming thing that you do in the game, but you can't do this effectively in Euphoria, so I created an animation of the effect. After I got all the frames with the colors moving, I remapped the palettes to the Game Palette, and went on.

Choosing an Art Program
When choosing an art program to create game images, you need to make absolutely sure that you have control over what colors appear where in the palette. You need to be able to convert images with different palettes to use your "Game Palette" and\or create an "Optimal Palette" by picking the 256 most representative colors out of your list of images and remapping\adjusting the colors of each image to fit it. I use Autodesk Animator Pro(TM) for doing 256 color images and animations for games. It handles color Palettes very well and I can work with as many animation frames as I want in any resolution Euphoria supports. It also can save sequential images in BMP for easy loading.

The graphic and animation editor you use must be able to handle color palettes consistently or give you complete control on the final color palette. This is ABSOLUTELY ESSENTIAL FOR GAME ART. You must be able to load in a standard palette for your game and save all images in that palette.

 Part 1B Masking and Sprite Basics

Computer Game Art falls into one of two categories, Backgrounds or Sprites.

Backgrounds are things that don't move on the screen, like the Maze in our course project, or the Feedback Window where scores and stuff are drawn during the course of the game.

Sprites are things that move around, like Snacky and the Ghosts. Sprites can
move in front of or behind background objects or each other.

Remember that Images and Animation frames are RECTANGULAR, but usually what you want to display is NOT. There is usually a big black (or whatever) box around what you want to display. If we just draw all our sprites on the screen, the big black boxes will screw up our background, and worse, obscure sprites that are moving next to us in the same direction. How do we get around that? It's called MASKING

Masking and Key Colors
Masking is a programming technique where only the pixels you want to see of your sprite are drawn and the others are disregarded. Generally you pick one color in the Color Palette and use that color for everything you DON'T WANT TO DRAW. This color is called the Masking Color or Key Color. For our course project, we'll write special sprite draw routines that will look at each sprite, skip all Key Colored Pixels and draw the rest of the Sprite. Instead of a big black box around our object, its a big Key Colored Box that isn't drawn when we draw the Sprite.

When you draw your sprites, start with the Key Color and draw a box a little bigger than your object. Then draw your object INSIDE the box. Usually I use color 0 as my key color and make it BRIGHT RED or GREEN. Make sure it's a bright color you are not using in the object. The purpose of the bright weird color is so you can see all the edges of your object and how they will look against a high contrast, ugly background. It doesn't matter anyway, since this color is masked out when the sprite is drawn.

Aliasing and Anti-Aliasing
Aliasing is also called the "jaggies". Because we only have so many pixels to work with in our images and because they are rectangular, all the images we draw will have jagged edges around them when seen against a high contrast
background. Get used to it.

Anti-Aliasing is a technique of smoothing out the appearance of the Jaggies by picking colors between the object color and the background and making a smoother transition along those edges by putting those colors at each jagged edge (alias).

IF YOUR IMAGE EDITING PROGRAM HAS ANTI-ALIASING, TURN IT OFF!!! If you Anti-Alias an object with a bright green background, you get a weird, erratic, ugly line around your Sprite that isn't masked out by your drawing program. If you anti-alias against a black background, you get ugly brown lines that look horrible against any other background. If your objects overlap, the results are usually horrible.

If you are rendering 3D animations for your game art (like OidZone, I used Autodesk 3D studio, by far the most useful program on the planet for doing 3D work) Set your background to an ugly color you aren't using (3DS always makes this color 0) and turn Anti-Aliasing OFF.

Every once in awhile, (the ship in OidZone, for example) you will want that ugly outline around the object, say if your intended background is of similar colors to your object. In those cases, turn anti-aliasing ON, use a BLACK background, and render the animation. Then load the animation into your image editor, fill the background with an ugly bright color, then edit the ugly brown outline to suit your needs. When you are done REMEMBER TO REMAP YOUR ANIMATION TO YOUR GAME PALETTE, and MAKE SURE THE UGLY BACKGROUND COLOR IS YOUR KEY COLOR.

This is a good place to stop for now. Now that you know all you need to know about computer graphics, next time we'll look at what goes into the Art Specification, and from there look at what graphic elements our game needs. If you haven't yet downloaded my version of our course project, Snack Attack!, do it now, and play it a million times to get an idea for the game.

End of Week 4 - Basics of Computer Art and Art Specification
Part 1 - The Basics of Computer Art.

If you have any questions for group discussion or have any other questions, comments or suggestions, email them to me to Pastor@BeRighteous.com

Mail monetary donations large or small to
 Lord Generic Productions 1218 Karen Ave Santa Ana, Ca 92704
  A Crash Course in Game Design and Production - Euphoria Edition
(C) Copyright 1996,2001 Lord Generic Productions - All Rights Reserved