Toby Opferman
http://www.opferman.net
toby@opferman.net
Introduction To Graphics
In this tutorial we talk about graphics independent of the system
you program it on. DOS, Windows, Linux, PalmOS, BeOS, SNES, PSX, etc.
We talk about the general topic of graphics and how they apply.
This is nothing more than some basic theory. You have some theory
of the PC hardware in the last tutor, now some basic theory in this
tutor. In the next tutor we put them together.
There are for the most part, 2D and 3D worlds in graphics
programming. Of course, there will be dispute to what is "true 3D"
since you can have a 2D mathematical wise game that can look 3D.
But, let us first talk of what you should have a good grasp on to do
graphics.
Algerbra and basic math is of course the heart of graphics.
You should be able to add and subtract very well :-) This may seem
funny, but everything you do will envolve this. Basic 2D graphics
can be done easily with only addition, subtraction and basic
algerbra/geometry graphing techniques. More advanced 2D graphics would
require Triginometry. 3D Graphics envolves Linear Algerbra,
Triginometry and geometry.
That is all you would basically need to be good at for the
basic run. If you want to talk about more advanced graphics such
would be certain effects, or image processing. Image processing
where they manipulate photos to make them more clear or anything
like that, you would need calculus and advanced maths.
Anyway, we will start off basicly. Let us talk about
movement in a 2D world. If you want to move something at a certain
speed, what would you do? You would keep drawing it of course.
*
The above is a dot. You want to move it, you would increment it's current
location to the new location, erase the * and redraw it.
*
Simple math. Now, what if you're dealing with a background?
....
..*.
....
You have your dot's movement at (1,1). That means that every movement, the object
will increment it's X and Y by 1.
...*
.. .
....
Now, there is an empty space where it left from. There are 2 ways to deal with
this.
The first way is to keep with the image you are moving a background image.
So, before you draw in an area, copy that area. Then, next time you move,
just redraw over top of where you just were, the background and copy the next
background and redraw your figure.
You want to do the next move.
....
.*..
....
Redraw the background where your character is.
....
....
....
Save the next location as background "."
....
....
....
Draw your figure.
..*.
....
....
The other way would be to redraw the entire background every time.
Now, you want to know. "If I have an image that has some places that you can
see thru, how do I draw it?"
Well, of course, you won't have box images but in a computer you have to store
them as a linear unit and think of it as a box.
Lets say we have this as our structure for our characters:
LocationX, LocationY Our current location
VelX, VelY Our velocity the character moves each time
Image Our Character
BackGround The background of where our character is.
WidthX, HeightX The Width & Height of the object
There are two ways to draw this image with background showing.
Way #1 is you have 2 images. The first image should have a black background.
The second image should have a white background.
You take the first image and you OR it with the screen.
Black is defined at 0. So, 0 OR background = background.
The next thing you do is AND the white background with the image.
Since white would be defined as all colors set you AND it with less colors
and the less colors would stay. This also seperates the image from the background
in the original OR.
You should know a bit about logical operators to do the top bit. The next way
would be to TEST every pixel before you draw it. Make the background a certain
color (Usually black) on the image and when you draw each pixel:
if Pixel != Black Then Draw(Image)
Drawing the image is simple. You simply go to the current location and
that would be the top left corner. You then draw the width, then
increment the height, draw the width again, and etc.
Graphics primatives.
Graphics Primatives would be lines and pixels. You can go further, but
every image is based on these points. You have triangles, circles, squares
and etc. as well.
Animation.
Animation is nothing more than drawing something, erasing it,
redrawing it elsewhere or different.
Take our old structure.
LocationX, LocationY Our current location
VelX, VelY Our velocity the character moves each time
ArrayImage Array of Images
BackGround The background of where our character is.
WidthX, HeightX The Width & Height of the object
Number The Number we are at.
Max The Max Number of Array Images
So, you can draw ArrayImage[Number]. Every movement or a specified movement
you can change the Number. If a character is walking you just every time
instead of redrawing the same image, you draw the next in the list. Once
you get to Max, you loop back around. As well, you can have a seperate
number for standing position or any other position. Certain actions can
make Number turn into certain positions.
The next part would be to detect if something 'hit' something else.
This again, is simple math.
+-----------+
| 1 |
| +--+--------+
+--------+--+ 2 |
| |
+-----------+
You have Box 1 and Box 2. Now, their images are not 'boxes' but it is easier
to do collision detection on boxes than it would be on curved surfaces.
You first check if they are in the same range, either up and down or left to right.
X1 + WidthX1 > X2
If this isn't true, then there is not possible collision because Object 1 would
lie to the left of object 2.
The next test would be:
X2 + WidthX2 > X1
If this isn't true, then there is no possible collision because Ojbect 1 would
lie to the right of object 2.
So, now you know that the object is in range, but is it on top of object 2,
on bottom of object 2 or intersecting?
Y1 + HeightY1 > Y2
If this isn't true, then the object 1 would be above object 2.
Y2 + HeightY2 > Y1
If this isn't true, then the object 1 would be below object 2.
With these 4 conditions met. Object 1 intersects Object 2.
Rotations are done with the following trig formula:
NewX = x*cos(theta) - y*sin(theta)
NewY = y*cos(theat) + x*sin(theta)
This is rotation in 2D (Or, Rotation in 3D around the Z axis)
In 3D you just add one more dimention, depth.
In a mathematical sense:
Z
^
|
|
|
|
+-------------> Y
/
/
/
X
But, people rotate this around to Right and Left hand coordinate systems.
Rotate each of those counter clockwise. So Y is on top, Z at the bottom
and X to the right side. That is how most graphics tutorials look.
3D graphics coninsides with Vectors and linear algerbra. In 3D you define objects
in 3 Dimentions and you spend your math tring to calculate what not to print (The
parts you don't see).
We will get into that when you reach the final part of the tutorial. For now,
we are just going to concentrate on 2D.
