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.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.