Creating a Hit Points (HP) Indicator in DarkGDK

HP indicators are normally used in Adventure games to show the character’s present HP level. There are several ways to create an HP level indicator in DarkGDK but the easiest way (I guess) is to create a sprite sheet with three or more columns and with different HP numbers per column. For instance, three HP’s on the first column, two on the second and one on the last. If a character dies, display the appropriate column relative to the character’s HP level. This method can also be used to specify the remaining number of bullets left or the character’s current energy level. If you are confused, follow these steps:

1. Start Microsoft Visual 2008 C++ Express Edition.

2. Click File>New Project>Select the Wizards Project type>Select Dark GDK-2d Game from the Visual Studio installed templates.

3. Click View>Solution Explorer. Double-click main.cpp. The following should then appear:
view plainprint?
  1. // Dark GDK - The Game Creators - www.thegamecreators.com  
  2.   
  3. // the wizard has created a very simple 2D project that uses Dark GDK  
  4. // it can be used as a starting point in making your own 2D games  
  5.   
  6. // whenever using Dark GDK you must ensure you include the header file  
  7. #include "DarkGDK.h"  
  8.   
  9. // the main entry point for the application is this function  
  10. void DarkGDK ( void )  
  11. {  
  12. // in this application a backdrop is loaded and then several  
  13. // animated sprites are displayed on screen  
  14.   
  15. // when starting a Dark GDK program it is useful to set global  
  16. // application properties, we begin by turning the sync rate on,  
  17. // this means we control when the screen is updated, we also set  
  18. // the maximum rate to 60 which means the maximum frame rate will  
  19. // be set at 60 frames per second  
  20. dbSyncOn   ( );  
  21. dbSyncRate ( 60 );  
  22.   
  23. // a call is made to this function so we can stop the GDK from  
  24. // responding to the escape key, we can then add in some code in our  
  25. // main loop so we can control what happens when the escape key is pressed  
  26. dbDisableEscapeKey ( );  
  27.   
  28. // now we will set the random seed value to the timer, this will  
  29. // help us to get more random values each time we run the program  
  30. dbRandomize ( dbTimer ( ) );  
  31.   
  32. // we are going to display a backdrop for the scene, to do this  
  33. // we load our image and give it an ID number of 1, this particular  
  34. // image is of a sky at night with stars  
  35. dbLoadImage ( "backdrop.bmp", 1 );  
  36.   
  37. // the next step is to create a sprite that uses this image, this  
  38. // is achieved by calling dbSprite and passing in a value of 1 for the  
  39. // sprites ID, 0 for the X coordinate, 0 for the Y coordinates and a  
  40. // value of 1 for the image  
  41. dbSprite ( 1, 0, 0, 1 );  
  42.   
  43. // next we will load in some animated sprites, before doing this  
  44. // we need to adjust the image color key, by using this function we  
  45. // can make a specific color be transparent, in our case we want this  
  46. // to be bright pink  
  47. dbSetImageColorKey ( 255, 0, 255 );  
  48.   
  49. // in this loop we're going to create some animated sprites, the image  
  50. // we load contains frames of animation for an asteroid  
  51. for ( int i = 2; i < 30; i++ )  
  52.  {  
  53.   // create an animated sprite and give it the ID number from the  
  54.   // variable i, next is the filename, now we come to how many frames  
  55.   // across and down, in our case this is 4, finally we come to the image  
  56.   // ID that the sprite will use, again we use i  
  57.   dbCreateAnimatedSprite ( i, "sprite.bmp", 4, 4, i );  
  58.   
  59.   // position our sprite at a random location  
  60.   dbSprite ( i, dbRnd ( 640 ), -dbRnd ( 1500 ), i );  
  61.  }  
  62.   
  63.  // now we come to our main loop, we call LoopGDK so some internal  
  64.  // work can be carried out by the GDK  
  65.  while ( LoopGDK ( ) )  
  66.  {  
  67.   // run a loop through all our sprites  
  68.   for ( int i = 2; i < 30; i++ )  
  69.   {  
  70.    // move the sprite down and play its animation  
  71.    // moving from frame 1 to 16 with a delay of 60 ms  
  72.    dbMoveSprite ( i, -2 );  
  73.    dbPlaySprite ( i, 1, 16, 60 );  
  74.   
  75.    // check the position of the sprite, if it has gone off scren  
  76.    // then reposition it back to the top  
  77.    if ( dbSpriteY ( i ) > 500 )  
  78. dbSprite ( i, dbRnd ( 640 ), -dbRnd ( 1500 ), i );  
  79. }  
  80.   
  81. // here we check if the escape key has been pressed, when it has  
  82. // we will break out of the loop  
  83. if ( dbEscapeKey ( ) )  
  84. break;  
  85.   
  86. // here we make a call to update the contents of the screen  
  87. dbSync ( );  
  88. }  
  89.   
  90. // when the user presses escape the code will break out to this location  
  91. // and we can free up any previously allocated resources  
  92.   
  93. // delete all the sprites  
  94. for ( int i = 1; i < 30; i++ )  
  95.   dbDeleteSprite ( i );  
  96.   
  97.  // delete the backdrop image  
  98.  dbDeleteImage ( 1 );  
  99.   
  100.  // and now everything is ready to return back to Windows  
  101.  return;  
  102. }  
4. Since we intend to make our sample application from the scratch, delete all the pre-made codes, except the following:
view plainprint?
  1. // Dark GDK - The Game Creators - www.thegamecreators.com  
  2. #include "DarkGDK.h"  
  3.   
  4. // the main entry point for the application is this function  
  5. void DarkGDK ( void )  
  6. {  
  7.    
  8.  dbSyncOn   ( );  
  9.  dbSyncRate ( 60 );  
  10.   
  11.    
  12.  while ( LoopGDK ( ) )  
  13.  {  
  14.     
  15.   
  16.   // here we make a call to update the contents of the screen  
  17.   dbSync ( );  
  18.  }  
  19.   
  20. }  
5. Make a spritesheet using gimp or photoshop. In this example we will be using the following image: 6. Later on we will be dividing this image into three columns. If you noticed if we divide this image into three divisions each divisions we will have different number of HP’s. 7. Copy this image from whatever location you have saved it. In this example, I have saved it on my desktop so all I need to do is go to the desktop. Select the file “hplevel.bmp”. Then press CTRL + C to copy it.
8. Switch to Micorsoft Visual C++ 2008 DarkGDK to view our game again then click the Open File icon from the formatting toolbar. 9. This causes the Open File dialog box to appear. Click on the empty pane>Press Ctrl + V to paste our “hplevel.bmp” file. 10. The next thing that you’ll need to do is to load this image into the computer’s memory, and divide it into three columns. We can do so by using the dbCreateAnimatedSprite command. Click the cancel button from the open dialog box to close it. This causes our code window to appear. Enter the ff. after the dbSyncRate(60); line.
view plainprint?
  1. //divides the image into 3 columns  
  2. dbCreateAnimatedSprite(1,"hplevel.bmp",3,1,1);  
11. If you run your application now, it will just display a blue screen. To display your animated sprite,use the dbSprite command. Enter the following code after the dbCreateAnimatedSprite line.
view plainprint?
  1. //displays our animated sprite  
  2. dbSprite(1,0,0,1);  
12. Press Ctrl+ F5 to test our application again. If you noticed the first column of our animated sprite is shown together with a white background. To clear the white background, use the dbSetImageColorKey command. Enter the following before the dbCreateAnimated line:
view plainprint?
  1. //clears the white background  
  2. dbSetImageColorKey(255,255,255);  
13. Your code should now look like this:
view plainprint?
  1. // Dark GDK - The Game Creators - www.thegamecreators.com  
  2. #include "DarkGDK.h"  
  3.   
  4. // the main entry point for the application is this function  
  5. void DarkGDK ( void )  
  6. {  
  7.   
  8. dbSyncOn   ( );  
  9. dbSyncRate ( 60 );  
  10. //clears the white background  
  11. dbSetImageColorKey(dbRgb(255,255,255));  
  12. //divides the image into 3 columns  
  13. dbCreateAnimatedSprite(1,"hplevel.bmp",3,1,1);  
  14. //displays our animated sprite  
  15. dbSprite(1,0,0,1);  
  16.   
  17.   
  18.   
  19. while ( LoopGDK ( ) )  
  20. {  
  21.   
  22.   
  23. // here we make a call to update the contents of the screen  
  24. dbSync ( );  
  25. }  
  26.   
  27. }  
14. The next thing that we want to do is to subtract the number of HP’s everytime the space key is pressed. Of course you can replace this with more advanced algorithms such as when your player dies or when a shot is fired, etc. But for the sake of simplicity, lets just go with the space key(hehehe). 15. Declare an integer variable named intspritesheetcols just below #include "DarkGDK.h" line and assign a a default value 1. 16. Enter the following after the while ( LoopGDK ( ) ){
view plainprint?
  1. //you can replace dbSpaceKey with  "if a player dies" or "if a gun is fired" algorithms  
  2. if (dbSpaceKey())  
  3. {  
  4. //increment the value of intspritesheetcols by 1  
  5. //if you recall we've initially assigned a starting value 1 to  
  6. //our intspritesheetcols variable. If you press the  
  7. //the space key for the first time it will be incremented by 1  
  8. intspritesheetcols=intspritesheetcols + 1;  
  9. //displays the spritesheet division relative to the specified  
  10. //intspritesheetcols value. The first time you press the space key  
  11. //intspritescols will have a value to causing the second column  
  12. //of our spritesheet to be displayed  
  13. dbSetSpriteFrame(1,intspritesheetcols);  
  14. //displays our sprite  
  15. dbSprite(1,0,0,1);  
  16. }  
  17. //if the number of columns exceeds 3  
  18. //you can display your game over screen here but in this case let's  
  19. //just exit the game  
  20. if(intspritesheetcols>3)  
  21. {  
  22. return;  
  23. }  
17. Your whole code should now look like this:
view plainprint?
  1. // Dark GDK - The Game Creators - www.thegamecreators.com  
  2. #include "DarkGDK.h"  
  3. int intspritesheetcols=1;  
  4. // the main entry point for the application is this function  
  5. void DarkGDK ( void )  
  6. {  
  7.   
  8. dbSyncOn   ( );  
  9. dbSyncRate(5);  
  10. //clears the white background  
  11. dbSetImageColorKey(255,255,255);  
  12. //divides the image into 3 columns  
  13. dbCreateAnimatedSprite(1,"hplevel.bmp",3,1,1);  
  14. //displays our animated sprite  
  15. dbSprite(1,0,0,1);  
  16.   
  17. while ( LoopGDK ( ) )  
  18. {  
  19. //you can replace dbSpaceKey with  "if a player dies" or "if a gun is fired" algorithms  
  20. if (dbSpaceKey())  
  21. {  
  22. //increment the value of intspritesheetcols by 1  
  23. //if you recall we've initially assigned a starting value 1 to  
  24. //our intspritesheetcols variable. If you press the  
  25. //the space key for the first time it will be incremented by 1  
  26. intspritesheetcols=intspritesheetcols + 1;  
  27. //displays the spritesheet division relative to the specified  
  28. //intspritesheetcols value. The first time you press the space key  
  29. //intspritescols will have a value to causing the second column  
  30. //of our spritesheet to be displayed  
  31. dbSetSpriteFrame(1,intspritesheetcols);  
  32. //displays our sprite  
  33. dbSprite(1,0,0,1);  
  34. }  
  35. //if the number of columns exceeds 3  
  36. //you can display your game over screen here but in this case let's  
  37. //just exit the game  
  38. if(intspritesheetcols>3)  
  39. {  
  40. return;  
  41. }  
  42. // here we make a call to update the contents of the screen  
  43. dbSync ( );  
  44. }  
  45.   
  46. }  
18. Press CTRL + F5 to run your application. You should now see an output similar to the following:
19. That’s all.
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)