In case you are wondering, Pong is a video game that simulates ping pong. It is a game where you maneuver a bat or paddle by pressing a control or joystick and the goal of the game is to return the ball to the opposing side just like the real ping pong. If you totally don't have any idea how pong works, I suggest googling it first before moving onto the next section. Being accustomed with the game and how it works greatly aids in trasforming it into codes.
Apart from familiarizing the game, we also need to learn few darkGDK game operations and the underlying commands behind them. These operations and commands are enumerated below:
1. Displaying an Image
Before you can display an image in darkGDK, you'll need to load it first into the computer memory. To be able to do that, use the dbLoadImage command which has the following syntax:
dbLoadImage("Imagefilename",imageloadid);
Where;
1. Imagefilename is an existent image file saved inside your game project folder. darkGDK supports .bmp, .jpg, and .png image file types.
2. imageloadid is a unique image numeric id that can be used later on to refer to a loaded image.
Example:
dbLoadImage("Galaxian.jpg",1);
Once an image is loaded in the computer memory, you can then display it by using dbPasteImage or dbSprite. dbSprite has the following syntax:
dbSprite(spriteid, x-coordinate, y-coordinate, imageloadid);
Where;
1. spriteid is a numerical id that can be use to manipulate the displayed image. spriteid can be identical to the imageloadid.
2. x-coordinate and y-coordinate are the x and y coordinate of the upper-left corner of your sprite or image. If you are unfamiliar of x and y coordinate, think of the screen as the fourth quadrant of the Cartesian coordinate system. The upper left corner is the origin which has the coordinate of x=0,y=0. The value of x coordinate increases as you move right. The value of the y coordinate increases as you move down.
3. imageloadid is the numeric id of a loaded image that you wanted to display.
Example:
dbSprite(1,0,01);
2. Moving Sprites
Sprites and images can be moved or animated by using dbMoveSprite or by simply incrementing or decrementing the x and y coordinate of an image. If you are familiar with java, c++, or visual basic, you probably know what I am talking about.
3. Detecting Collisions
darkGDK comes with powerful command that can be used to detect sprite or object collision. To detect collision, simply use dbSpriteCollission or dbSpriteHit. dbSpriteHit has the following syntax:
dbSpriteHit(Spriteid1, Spriteid2);
Where;
1. Spriteid1 and Spriteid2 are the numeric spriteids of the images that you wanted to test for collision.
Now that you have learned few basic commands and operations in darkGDK,I guess we can proceed into making our pong game. The following steps demonstrates how:
1. Click Start>All Programs>Microsoft Visual C++ Express Edition.
2. Click on File>New>Project. In the Project Types tree control, select on Wizards.
3. Select Dark GDK-Game from the available Game project options.
4. Type “Pong” no quotes in the Project Name textbox then Click Ok.
5. Click on View>Solution Explorer. Locate Main.cpp in the Solution Explorer Window then double-click it.
6. The following should then appear:
// Dark GDK - The Game Creators - www.thegamecreators.com
// the wizard has created a very simple project that uses Dark GDK
// it contains the basic code for a GDK application
// whenever using Dark GDK you must ensure you include the header file
#include "DarkGDK.h"
// the main entry point for the application is this function
void DarkGDK ( void )
{
// turn on sync rate and set maximum rate to 60 fps
dbSyncOn ( );
dbSyncRate ( 60 );
// our main loop
while ( LoopGDK ( ) )
{
// update the screen
dbSync ( );
}
// return back to windows
return;
}
7. Locate the line #include "DarkGDK.h" and declare the following variables below it:
//handles the ball velocity, the larger the value
//the faster the ball will move
int ballxvelocity=5,ballyvelocity=5;
//handles the updated x and y coordinate of the ball
int ballxcoord,ballycoord;
//handles the updated x and y coordinate
//of player1's paddle
int bat1xcoord,bat1ycoord;
//handles the updated x and y coordinate
//of player2's paddle
int bat2xcoord,bat2ycoord;
8. Locate the line dbSyncOn and dbSynRate(60) then type the following below it:
//sets the window title to pong
dbSetWindowTitle("Pong");
//sets the window size to 600x400 that is
//x coordinates runs from 0-600
//y coordinates runs from 0-400
dbSetWindowSize(600,400);
//loads an image located in your game project folder
//and gives it an id of 1
dbLoadImage("ball.png",1);
//loads an image located in your game project folder
//and gives it an id of 2
dbLoadImage("bat1.jpg",2);
//loads an image located in your game project folder
//and gives it an id of 3
dbLoadImage("bat2.jpg",3);
//displays the ball at the center of the screen
dbSprite(1,300,200,1);
//player1 paddle at the left side of the screen
dbSprite(2,50,150,2);
//player2 paddle at the right side of the screen
dbSprite(3,500,150,3);
9. Locate the line while ( LoopGDK ( ) ) and type the following after the open curly bracket:
//move the ball
//adds the value of ballxvelocity
//and the current x coordinate of the ball
//and assign it as a new ball x coord value
ballxcoord=dbSpriteX(1) + ballxvelocity;
//do the same with y
ballycoord=dbSpriteY(1) + ballyvelocity;
//displays the ball in the updated x and y coord positions
dbSprite(1,ballxcoord,ballycoord,1);
//if the ball collides with the
//top or bottom of the screen then
if (ballycoord <= 0 || ballycoord >= 400)
{
//Multiply ballyvelocity by negative 1
//The result will later on be added to the
//current y coordinate of the ball
//causing the ball to change position
//depending on the value of ballyvelocity and
//the current coord of the ball
ballyvelocity=ballyvelocity*-1;
}
//if the ball collides with the left side
//or right side of the screen then
if (ballxcoord <= 0 || ballxcoord >= 600)
{
//Multiply ballxvelocity by negative 1
//The result will later on be added to the
//current x coordinate of the ball
//causing the ball to change position
//depending on the value of ballxvelocity and
//the current x coord of the ball
ballxvelocity=ballxvelocity*-1;
}
//check bat collision
//if the ball collides with player 1's paddle
if (dbSpriteHit(1,2)==1)
{
//if at this point you still don't
//understand what this do
//I suggest recalling the rules in multiplying
//and adding negative numbers
ballxvelocity=ballxvelocity*-1;
}
//if the ball collides with player 2's paddle
if (dbSpriteHit(1,3)==1)
{
//reverse the direction of the ball
ballxvelocity=ballxvelocity*-1;
}
//move the player 1 bat
//if the enter key is pressed
if (dbReturnKey()==1)
{
//decrement the paddle y coord value
//causing the paddle to move up
bat1ycoord=dbSpriteY(2)-5;
//display the paddle in the
//updated position
dbSprite(2,bat1xcoord,bat1ycoord,2);
}
//if the down arrow is pressed
if (dbShiftKey()==1)
{
//increment the paddle y coord value
//causing the paddle to move down
bat1ycoord=dbSpriteY(2)+5;
//display the paddle in its
//updated position
//move player 2 bat
//if the up arrow is pressed
if (dbUpKey()==1)
{
//decrement the paddle y coord value
//causing the paddle to move up
bat2ycoord=dbSpriteY(3)-5;
dbSprite(3,bat2xcoord,bat2ycoord,3);
}
//if the shift key is pressed
if (dbDownKey()==1)
{
//increment the paddle y coord value
//causing the paddle to move down
bat2ycoord=dbSpriteY(3)+5;
dbSprite(3,bat2xcoord,bat2ycoord,3);
}
10. Locate the line dbSync ( ); and type the following after the open curly bracket:
//Deletes the loaded image
//and sprites when the game is closed
//this will free up the used memory
for ( int i = 1; i < 30; i++ )
dbDeleteSprite ( i );
dbDeleteImage ( 1 );
11. Let's have a glance of our codes again and this time comments omitted:
// Dark GDK - The Game Creators - www.thegamecreators.com
// the wizard has created a very simple project that uses Dark GDK
// it contains the basic code for a GDK application
// whenever using Dark GDK you must ensure you include the header file
#include "DarkGDK.h"
int ballxvelocity=5,ballyvelocity=5;
int ballxcoord,ballycoord;
int bat1xcoord,bat1ycoord;
int bat2xcoord,bat2ycoord;
// the main entry point for the application is this function
void DarkGDK ( void )
{
// turn on sync rate and set maximum rate to 60 fps
dbSyncOn ( );
dbSyncRate ( 60 );
dbSetWindowTitle("Pong");
dbSetWindowSize(600,400);
dbLoadImage("ball.png",1);
dbLoadImage("bat1.jpg",2);
dbLoadImage("bat2.jpg",3);
dbSprite(1,300,200,1);
dbSprite(2,50,150,2);
dbSprite(3,500,150,3);
// our main loop
while ( LoopGDK ( ) )
{
//move the ball
ballxcoord=dbSpriteX(1) + ballxvelocity;
ballycoord=dbSpriteY(1) + ballyvelocity;
dbSprite(1,ballxcoord,ballycoord,1);
if (ballycoord <= 0 || ballycoord >= 400)
{
ballyvelocity=ballyvelocity*-1;
}
if (ballxcoord <= 0 || ballxcoord >= 600)
{
ballxvelocity=ballxvelocity*-1;
}
//check bat collission
if (dbSpriteHit(1,2)==1)
{
ballxvelocity=ballxvelocity*-1;
}
if (dbSpriteHit(1,3)==1)
{
ballxvelocity=ballxvelocity*-1;
}
//moves player 1 bat
if (dbReturnKey()==1)
{
bat1ycoord=dbSpriteY(2)-5;
dbSprite(2,bat1xcoord,bat1ycoord,2);
}
if (dbShiftKey()==1)
{
bat1ycoord=dbSpriteY(2)+5;
dbSprite(2,bat1xcoord,bat1ycoord,2);
}
//moves player 2 bat
if (dbUpKey()==1)
{
bat2ycoord=dbSpriteY(3)-5;
dbSprite(3,bat2xcoord,bat2ycoord,3);
}
if (dbDownKey()==1)
{
bat2ycoord=dbSpriteY(3)+5;
dbSprite(3,bat2xcoord,bat2ycoord,3);
}
// update the screen
dbSync ( );
}
for ( int i = 1; i < 30; i++ )
{
dbDeleteSprite ( i );
dbDeleteImage ( 1 );
}
// return back to windows
return;
}
12. Press F5 to test the game. You can press the Enter key and shift key to move player1's bat and the up and down arrow to move player2's bat.
13. And that's it. A very simple pong game using few lines of codes. At the point of writing I guess this was the very first pong game tutorial written using darkGDK. I will add attract mode animation, menus, scores, and AI enemy to this when I have time but for now, though it's incomplete, you can use it as starting point. Hope you'll learn something from it and enjoy the game.
