A Crash Course In Game Design and Production
A Crash Course in Game Design and Production
========================================================
Week 4 - Basics of Computer Art and Art Specification
========================================================
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 write the fourth section of the Design Spec for our Course Project, the
Art Specification.
----------------------------------------------------------------------------
Part 1 - 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 15 pixels wide and 15 pixels high, so we'll call it a "15x15" 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.
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.
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 OidZone, 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.
For these requirements I DO NOT RECOMMEND ANY WINDOWS application. So far,
none I've seen handles color palettes consistently or gives you any 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.
----------------------------------------------------------------------------
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 Packy 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.
===========================================================================
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 post them to the list server.
E-mail any other questions, comments or suggestions to lgp at exo.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,7 Lord Generic Productions - All Rights Reserved
===========================================================================
|
Not Categorized, Please Help
|
|
