Understanding
Graphics
Understanding Graphics
This
tutorial was graciously provided by Zorro
from his Zorro's
VB Fun Page
website. We cover some basic concepts and
other issues you'll need to be familiar
with if you're interested in animation or
game design. Be sure and check out his
site for additional information,
downloads and links.
Chp 1, Windows 95
Graphic Primer
Windows was
considered a flop as a game platform ever
since Win3.1 Dos could always do it
better and faster. Well with Win95's
multitasking and 32-bit protected mode,
some very advanced game techniques can be
accomplished. Lets Start at the begining
with the most basic component in Win95
the BITMAP.
Bitmap:
A bitmap
is a graphic, or actually a collection of
data that defines pixels and their
position and color in a graphic or
picture. We have all seen bitmaps in our
desktops. Well Icons are a form of
bitmap, the Clouds(booting up) are also
bitmaps. The most common bitmaps are
8-bit(256 color) .BMP files. Of course
there are 4-bit and 24-bit bitmaps as
well, but for gaming purposes I will only
concentrate on 8-bit. When a bitmap is
stored in a file we call it a Device
Independent Bitmap (DIB or BMP),
in other words no device is associated
with it yet (window, video card, or
printer). In this format the file
contains the Palette informaton inside
its file structure. Once Windows loads
and displays it to you in a screen it is
called a Device Dependent Bitmap,
or in other words it is now associated
with your video device and Windows is
handling the color mapping and memory
transfers to and from memory and system
ram.
Palettes:
Palette's
are tables or lists that make up the
available and/or used colors in a bitmap.
Palette programming is a very difficult
and hated pasttime, specially for
artists. An 8 bit Palette has 256 entries
that define the colors for a 256 color
bitmap. The reason I stress 8bit so much
is that its overhead in speed and memory
is faster and better for games than 24
bit images. Besides most games currently
use 256 color bitmaps. 24 Bit images in
fact do not require a palette since they
already contain all 16.7 Million hues
available to Windows. When using a 256
color palette in Win95, Unless you are
using DirectX you will have to share your
palette with Windows. Windows reserves 20
of these entries for itself while trying
to map the remaining colors to your
Application. Usually the 1st 10 and the
last 10 color entries are reserved by
Windows. Don't get me wrong because 236
color entries is plenty of ground to work
with. VB does a pretty decent job of
controlling palettes, but we will later
see that by using DirectX we can have
complete control of our palette. With the
GDI32 we can accomplish some neat tricks
with the palettes as well.
GDI:
(gdi32.dll)
Well how does
Windows do this handling with bitmaps and
palettes. Well with the GDI (Graphics
Device Interface) Windows95 can handle
all calls to the Video Devices. The GDI
or GDI32.DLL is a part of the
Win32 API (aplication programming
interface). an API is a
set of high level pre-compiled
subroutines and functions that interface
Win95 to the hardware underneath. This
way the programmer never needs to see the
nitty-griddy of the hardware. Well VB
programmers are even better off. We don't
even see the GDI, but yet we use it
constantly. When we load a form or put a
picture in a picturebox, we are making VB
use the GDI. Well this is all nice and
dandy, but there is a trade off for this
easybility: SPEED! Yes this is why VB is
not considered a good graphics language,
its graphics code is way to slow for good
fast games. Well let me let you in a
little secret, VB can also make direct
calls to the GDI32(surprise). With a
little efficient programming VB can do
anything C or C++ can do. Now even though
the GDI is pretty fast, Win95 Game
programmers wanted Dos type speed along
the the ease of an API. Well MS's
solution was WinG(now
included in the GDI32) and later DirectX.
Ah yes! DirectX allows
Win95 programmers access the Hardware
directly, but yet still keep the ease of
Windows and an API. Giving games the
speed of compiled Dos games. With some
free TLB (type libs) VB5 can also take
adantage of DirectX please visit my
Downloads page.
Sprite:
In its simplest
definition, a sprite is
any object that moves or interacts in a
game. Sprites as actually made up of
Bitmaps which allow us to see them on the
screen. Along with the graphic data,
sprites also have functional data
associated with that allow us to
determine its characteristics such as: X
speed, Y speed, X dir, Y dir, or even
Health points. Sprites are primarily
animated. They are animated by using and
showing different bitmaps as they perform
functions (moving, jumping, shooting)
Mask
or ColorKey's:
This technique
makes it possible to draw sprites with
transparent colors. Why do you need
transparent colors? Consider a typical
sprite bitmap. The sprite's shape is most
certainly not a rectangle, but bitmaps
are stored in rectangular blocks of
memory. If we simply copied the bitmap to
the display, the black edges of our
bitmap would overwrite and obscure any
image underneath the sprite. To implement
a masked BitBlt, you need both a bitmap
image and a mask image. When Rendering a
sprite on to the back buffer, you first
copy the mask image performing a bitwise
AND operation. The bitmap itself is then
drawn on to the back buffer usind an XOR
bitwise operation. The result is that the
background images can be seen through the
transparent regions of the sprite. What
exactly is this Mask you
ask! Well, it looks like a black and
white negative of the bitmap like the one
seen above. Another way to make a sprite
transparent is to use ColorKeys. A ColorKey
is when you choose a certain color in the
sprite bitmap to be transparent. This
technique is actually a bit more memory
efficient. This allows the bitmap display
routines to skip over the transparent
pixels and draw the colored pixels.
DirectX uses this ColorKeying technique.
Blit
or Blitting:
Why do I keep
mentioning BLITTING? This is in fact the
most important aspect of Windows Game
Programming. Blitting is
the act of transfering bitmap data from
one device context to another. A DC
(Device Context) is a pointer or handle
that many Windows 95 objects have such
as: Windows, Pictureboxes, and Memory
handles. Blitting works pretty similar in
both GDI or DirectX makes animation and
games possible by transfering graphical
data between DC's or Surfaces.
Backbuffering or PageFlipping techniques
which are used in animation heavily
depend on Bliting. Now we will see why
blitting is so important!
Chp 2 Animation in
Windows using VB
Animation is
made possible by quickly swaping or
flipping an image in front of a viewer
sort of like a flipbook. If done fast
enough, the illusion of movement is
achieved. Now a common technique is
called PAGEFLIPPING or DOUBLE-BUFFERING. Double
Buffering is implemented by
allocating memory for a back buffer
during the program's startup. Next you
design all custom blitting techniques to
draw on this back buffer. After one blits
all the needed backgrounds, tiles, and
sprites and the image is complete, the
buffer is copied to the screen in one
large chunk of memory. This transfer is
called Page Flipping.
This process continues during a timer
event or a loop or in a timer control.
The main goal of Double Buffering is to
minimize the number of times you access
video memory. The other benefit is that
you are minimizing image flicker since
the images are composed off screen. All
this means SMOOTH movement in your game.
Here
you will see an example on how Blitting
creates a scrollable game from my
Tutorial2(vb5) available on zorro's
download page.
As you
see the order goes like this during a
frame update:
1) The Section
of the large scrollable background is
blitted to the back page or
"Buffer" of the current
position of our sprite (ladybug)
2) the mask of our sprite is then blitted
to this work area in order to prepare for
the sprite (This step may be skipped if
using colorkeying in DirectX)
3) the actual sprite is then blitted on
top of the same work area. (DirectX will
use the color set as the color key and
not blit that area)
4) the final composed page is either
Blitted or Flipped to the main player's
view screen. And that is how you animate
a 2-d frame in a VB game.
Back to Tutorials
- Main
|