[Home]  [Edit this page]  [Recent Changes]  [Special Pages]  [Help] 

---

Mode13hGraphics-Pascal

---

Before reading this article, please make sure you can get into graphics mode, draw pixels and lines to the screen. You can get a library to do that from here. you can also read a graphics tutorial here. I'd suggest that you read articles 1, 2, 3 and 7.

Most games are played with you controlling some sort of creature. This thing is represented by a graphical image. It is called a Sprite. The problem with sprites, is that when they move, you need to redraw them. Redrawing them doesn't automatically erase them. We need to erase them. There are two ways:

1. Clear the screen and redraw everything.
2. Redraw the area behind the sprite with what was there before it moved there.

(Actually, there are a few more ways, but they are based on page flipping and things. See Denthors tutorial 7 for more information.) To do the first way creates flickering. All you need to do for the second way is:

1. Before you draw the sprite the first time, get what is behind it.
2. Draw the sprite
3. When the sprite needs to be redrawn
• Draw the background.
• Get the background of where the sprite needs to be redrawn.
• Redraw the sprite.

We need to always know the position of our sprites. To do this, we define a type (Record) for the sprite and store its position there.

Lets imagine that we want to make a game of Arkanoid. (Making it using text graphics was left as an exercise at the end of the previous article.).

 Type
  Ball = Record
    X, Y : Integer; {Here we need integer, unlike text-graphics because the 
                     x and y values can be bigger then 255}
    DX, DY : Byte; (The change in X and Y per frame)
  End;
  Brick = Record {We will make our cursor a brick.}
   X, Y : Integer;
   Col  : Byte;
   Visible : Boolean; {If it was hit, the it wont be visible}
  End;
 End;
Var
 Bricks : Array[1..10,1..5] of Brick
 TheBall : Ball;
 Cursor : Brick;

Let us continue with this example, and within it, explain the rest of the elements required for game programming with graphics:

What we will need to do is:

1. Get Input and move the Cursor accordingly.
2. Move the ball.
3. Check to see if a brick has been hit.
4. If Ball hits Cursor, Change its direction.
5. Draw Everything that has changed.

We have already made our types for a ball, brick and Cursor.

Now we need to make our drawing routines. A brick will be 32 pixels across and 10 pixels down. If we make a Horizontal Line procedure, we can make a simple procedure that draws 10 parallel lines. The cursor will be 20 pixels across and 5 down.

{HLine is a procedure in the library at the top of this article. It draw horizontal lines}
Procedure DrawBrick(Var ABrick : Brick);
Var k : Byte;
Begin
 For k := 0 to 9 do   {10 pixels down} 
     HLine(ABrick.X,ABrick.X+32,ABrick.Y+K,ABrick.Col,VGA);
End;
Procedure DrawBricks; {This only needs to be called once - at the begining}
Var i, j, k : Integer;
Begin
 For i := 1 to 10 do
  For j := 1 to 5 do
   DrawBrick(Bricks[i,j]);
End;
Procedure DrawCursor;
Var i : Integer;
Begin
 For i := 1 to 5 do
  HLine(Cursor.X,Cusor.X+20,Cursor.Y,Cursor.Col,VGA);
End;
Procedure DrawBall;
Begin
 PutPixel(Ball.X,Ball.Y, 100, VGA); 
 PutPixel(Ball.X+1,Ball.Y, 100, VGA);
 PutPixel(Ball.X,Ball.Y+1, 100, VGA);
 PutPixel(Ball.X+1,Ball.Y+1, 100, VGA); {and 2 by 2 ball}
{Depending on the current palette, 100 will be a different colour}
End;

As I said above, what we need to do is make sure that we clean up before we redraw. We need to clean the ball every "Frame" and the cursor, only every time the user changes its position. To clean up, we just need to draw over the old object with the background colour (In this case, the background is all black so there is no need to grab the background colour). The cleaning up must be done BEFORE the object is repositioned or else we will "miss".

The input, needs to be such that the user is able to move the cursor a few time between every ball move. To do this, we will add a for loop into the main game loop to check a few times for input.

Var i : Integer;
Repeat
...
For i := 1 to 20  Do (Allow the user up to 20 moves between a ball move)
 Begin
  GetInput; {This procedure contains your ch = readkey; and the case 
             statement}
  Delay(2); {That is 0.002 seconds}
 End;
...
Until Quit = true;

We will add a function to check for collisions:

Function CheckHitBrick(Var ABrick : Brick) : boolean;
Begin
{We need to check each pixel of the ball to see if it is in the same area
 as the brick. Since this brick is 2 by 2, we will use a double for loop.}
Var i, j : byte;
For i := 0 to 1 do
 for j := 0 to 1 do
  If not CheckHitBrick then 
       CheckHitBrick := (Ball.X+i > ABrick.X) And (Ball.X+i < ABrick.X+32) And
                        (Ball.Y+j > ABrick.Y) And (Ball.Y+j < ABrick.Y+10);
End;
Function CheckHitCursor(Var TheCursor : Cursor) : boolean;
Begin
Var i, j : byte;
For i := 0 to 1 do
 for j := 0 to 1 do
CheckHitCursor := (Ball.X+i > TheCursor.X) And (Ball.X+i < TheCursor.X+20) And
                  (Ball.Y+j > TheCursor.Y) And (Ball.Y+j < TheCursor.Y+5);
End;
Procedure CheckHit;
Var i, j : integer;
Begin
 For i := 1 to 10 do
  For j := 1 to 5 do
   If CheckHitBrick(Bricks[i,j]) then 
     Begin
       Bricks[i,j].Visible = False;
       Bricks[i,j].Col := 0; {0 is generally black}       
       DrawBrick(Bricks[i,j]);
       TheBall.DY := TheBall.DY * -1 {Flip the Verticle Direction}
     End;
 If CheckHitCursor(TheCursor) then
   TheBall.DY := TheBall.DY * -1 {Flip the Verticle Direction}
 If TheBall.Y > 195 Then    {By the bottom of the screen} 
   Quit := True;
End;

This is most of the code needed to make an arkanoid game in Pascal using proper graphics. For complete code go here

Something else that may help you when you want to make more real graphics in your games is to realise that a picture is just an array of colours. To draw it, just make a loop to draw your array.
[Edit this page]  [Page history]  [What links here]  [Discuss this topic]  [Printer Friendly]