How Graphics is Displayed – Pixels
On your computer screen, graphics is displayed as dots called pixels . Each pixel is displayed in colour. To make it look like colour, the pixel itself is made up of 3 dots – one dot for red, one dot for green, one dot for blue (hence called RGB colour for Red, Green, Blue). But because the pixel is tiny, we just see one colour dot on the screen.
Many of these pixels make up an image which can be a photo or a drawn graphic picture similar to a cartoon.
Where the Graphics is placed – Screen Coordinates
The computer screen is set up so that the pixels are displayed in a certain order. When we wish to display a photo or image, we need to tell the computer where exactly to place the image on the screen. This is done using what is called screen coordinates.
Since we made our game display at a resolution of 640 x 480, we are telling the computer that our whole screen is made up of 640 pixels across by 480 pixels down. The following diagram shows this:
Now I need to explain some maths. You may need to refer to your highschool maths textbook on coordinate geometry or plotting points to make a line if you get stuck.
Each point is defined as (x,y) which is a point in 2D space (a point or pixel on your computer screen). The x component is across the screen, the y component is down the screen. The screen’s top left hand corner starts at point (0,0). If we wish to display the point (320,240), we would start at the top left hand corner of the screen, then go 320 pixels across the screen and then go 240 pixels down the screen. Since we made our total screen space 640 x 480, then the pixel at (320,240) is actually in the centre of our screen.
Maths note: across the screen is the x-axis and down the screen is the y-axis. The axes on the screen are different to the traditional textbook definitions where (0,0) would normally be from the bottom left hand corner of the screen. For example, the point or pixel located at (5,10) is shown in the diagram below. Note how the screen coordinates differ from the traditional math coordinates.
Also note that different operating systems will have different ways of representing co-ordinates in games. For example, Mac OS/X uses the traditional maths co-ordinates where (0,0) is in the middle of the screen. Windows tends to use the screen co-ordinates as labelled in the above image where (0,0) is in the top left hand corner of the screen.
Note on Graphics Engines
Some graphics engines support 2D functions separately. But some have merged both 2D and 3D functions and made 2D graphics a subset of 3D graphics.
A point in 2D space is defined as (x,y). A point in 3D space is defined as (x,y,z). Hence 2D points is a 3D point where the z component is equal to zero, ie. a 2D point could be defined as (x,y,0).
In fact, a point in either 2D or 3D space is sometimes called a vector. In maths, a vector has both magnitude (a size) and also a direction. At this stage, we just need to know that a vector is just a point (x,y,z) or (x,y,0) for 2D.
Placement of Text
Text is also made up of dots or pixels. Some graphics engines will draw text for you. One example is code for DirectX9 below to show text to the screen
// sample code in DirectX9 for drawing text // rectangle or box to draw our font in (these are in screen co-ordinates) // this is name of game prect_name = &lrect_name; lrect_name.left = 500; // the x-coordinate of the upper-left corner of the rectangle. lrect_name.top = 10; // the y-coordinate of the upper-left corner of the rectangle. lrect_name.right = 600; // the x-coordinate of the lower-right corner of the rectangle. lrect_name.bottom = 100; // the y-coordinate of the lower-right corner of the rectangle.
This drew our rectangle using the points (500,10) and (600,100). Then the text would be placed inside this rectangle (see the diagram below). The green dots represent the points and the purple rectangle is created by joining the dots together.
Another way of drawing text in 2D graphics is to draw a sprite for each letter A – Z and numbers 0-9, then you can “write” using each sprite letter or number to form words. This is a harder way of doing it, but many games do this as they want consistent fonts throughout their game and also it gives a particular style to their game.
Vector Graphics
Graphics is made up of dots or pixels. One way to display this is to draw a series of pixels. If you connect two pixels together at different locations (x,y) and then fill in the dots, you have a line. If you connect many pixels together, you have a shape called a polygon (this means a shape with many sides which are closed or joined into one complete shape). The following diagram gives some example shapes – the polygons are the triangle and spaceship.
Vector graphics is graphics that is defined mathematically. This means that you need to store the location of each pixel of the shape as a (x,y) value (eg: you could define a polygon structure or put it in an array). The advantage of this is that it doesn’t take up much storage space and is very fast to manipulate (eg: move, scale the image). The downside is when you are drawing complex shapes, you need to define a lot of points and it is hard to keep track of it all, including colour information and filling in the shapes as well.
You can use a graphics program such as Adobe illustrator or Fireworks to create vector graphics.
Sprite Graphics
Another way to display graphics is to create your own 2D pictures using a paint program. This is an easier option than vector graphics as you can use any imaging programs to draw your graphics (though I suppose you can draw vector graphics using a program) and it is easier to manipulate the graphics. The final image or graphic is called a sprite.
Back Buffer and Animation
When displaying graphics to the screen, you could draw the sprite or vector graphics directly to the video card and it will display it automatically to the screen. This is a little inefficient. It is quicker to draw the sprite or vector graphics to memory first, then copy the graphics very quickly to the video card. This memory to store the graphic first before displaying is called the backbuffer.
The diagram below shows this concept. When drawing graphics and making it move (ie. animating the graphics), each graphic is known as a frame. Imagine a face that goes from smiling to being serious, then sad. Initially the face is smiling and is already on the screen. The other faces have been drawn already, but they have been drawn to memory first. When the program is ready to display the serious face, then it will copy it quickly from memory (backbuffer1) to the video card (the screen). This very fast copying is called a backbuffer flip – the user (or player) will see this happen in a blink of an eye. Once the serious face is displayed on screen, the sad face is moved to backbuffer1. Then your program can prepare another face in backbuffer2.
More and more 3D graphics cards have memory called VRAM, which is very fast RAM (faster than system memory). You could hold one or more backbuffers onto this VRAM, making your animation run very smoothly and fast.
