Creating a menu system in Dark GDK

There are several ways on how to create a menu system in Dark GDK but since I hate to complicate simple things, today we will be learning the simplest. The idea is to assign a sprite as a customized mouse pointer and hide that sprite when your game is loaded using dbHideSprite so that only the mouse pointer is visible and not your customized sprite pointer. The next problem would be to test which menu item or button was clicked, to be able to do that, simply use dbSpriteHit or dbSpriteCollission to check whether your hidden sprite acting as your mouse pointer collided with your button sprite. It’s that simple. If you are confused, follow these steps:

1. Before the actual programming, draw the buttons and customized mouse pointer that will be needed in your game using your favorite image creation software such as Paint, GIMP, or PhotoShop. It does not matter how your customized mouse pointer looks like because it will not show up on your form, just make sure that you buttons and your customized pointer are of the same height and width.



2. Start Microsoft Visual C++. Click File>New>Project>Select Wizards>Dark GDK-Game>Type “Using Menu” in the name textbox no quotes.

3. Minimize the MSVC++ window then go to My Documents>Visual Studio 2008>Projects>Using Menu>Using Menu> Then paste the images that you have created in step 1.



4. Maximize Visual C++>View>Solution Explorer>Double-Click Main.cpp. The following should then come into view:
// 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;
}

5. Locate the line void DarkGDK ( void ) then type the following after the line dbSyncRate ( 60 );
//loads our images
dbLoadImage("hibutton.jpg",1);
dbLoadImage("exitbutton.jpg",2);
dbLoadImage("customizedpointer.jpg",3);
//displays our images
dbSprite(1,400,420,1);
dbSprite(2,500,420,2);

6.If you try to run this,only the "Say Hi" and "Exit" buttons are visible.That's because we haven't display our sprite pointer yet.To view it, locate the line while ( LoopGDK ( ) ) and type the following aster the open curly bracket:

//assigns the currentX and CurrentY position
//of our mouse an X and Y coordinate of
//our customized pointer
//we need to place it inside the
//while loop so that it is always
//updated depending on the current mouse coordinate
dbSprite(3,dbMouseX(),dbMouseY(),3);
//hides the sprite that acts as our pointer
dbHideSprite(3);

7. The next thing that we need to do is to enable our button to react to mouse click. To be able to do that locate the line dbHideSprite(3); and type the ff. below it:

//if our hidden sprite collided with the “Say Hi” button 
//and the mouse button is clicked then
if (dbSpriteCollision(3,1)==1 && dbMouseClick()==1)
{
//do something…you can add your game sequence action codes here
//but in this case we will be displaying a “Hi!” text
dbSetTextFont("Garamond");
dbSetTextSize(70);
dbText(0,0,"Hi!");      
}
//if our hidden sprite collided with the “Exit” button 
//and the mouse button is clicked then
if (dbSpriteCollision(3,2)==1 && dbMouseClick()==1)
{
//quit the form
return; 
}

8. Let us have a quick look of our codes once again:

// 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 );
 //loads our images
 dbLoadImage("hibutton.jpg",1);
 dbLoadImage("exitbutton.jpg",2);
 dbLoadImage("customizedpointer.jpg",3);
 //displays our images
 dbSprite(1,400,420,1);
 dbSprite(2,500,420,2);



 // our main loop
 while ( LoopGDK ( ) )
 {
 
  dbSprite(3,dbMouseX(),dbMouseY(),3);
  dbHideSprite(3);
  if (dbSpriteCollision(3,1)==1 && dbMouseClick()==1)
  {
   dbSetTextFont("Garamond");
   dbSetTextSize(70);
   dbText(0,0,"Hi!"); 
  }
  if (dbSpriteCollision(3,2)==1 && dbMouseClick()==1)
  {
  return; 
  }


  // update the screen
  dbSync ( );
 }

 // return back to windows
 return;
}

9. Press F5 to test your game. Try clicking the “Say Hi” and "Exit" button.



10. And that would be all. One of the first menu system tutorial in Dark GDK. My buttons looks disgusting because I just rushed it, I didn’t have time to make one in Blender. Hope you learn something from it, till next time.

A simple 2D pong game in darkGDK

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.