HGE:Tutorials:Simple Game

allowtransparency="true" frameborder="0" hspace="0" id="I1_1310608978918" marginheight="0" marginwidth="0" name="I1_1310608978918" scrolling="no" src="https://plusone.google.com/u/0/_/+1/button?hl=en-US&jsh=r%3Bgc%2F22326474-d7ea9837#url=http%3A%2F%2Fwww.gpwiki.org%2Findex.php%2FHGE%3ATutorials%3ASimple_Game&size=medium&count=true&id=I1_1310608978918&parent=http%3A%2F%2Fwww.gpwiki.org&rpctoken=697690950&_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe" tabindex="-1" vspace="0" width="100%" style="position: absolute; left: -10000px; top: -10000px; width: 90px; ">

A simple 2D game in HGE: Coin Collector

In this section, a basic 2D game will be designed. It is called Coin Collector, and the object is to collect as many coins as possible.

Note that this section does not build from the previous sections' files. This is a brand new project that will demonstrate how to make a 2D game in HGE.

Bare-bones program

Let's fill out the basic WinMain and FrameFunc functions first.

#include <windows.h>
#include <hge.h>
#include <hgeresource.h>
#include <hgesprite.h>
#include <hgeanim.h>
#include <hgefont.h>
#include <hgeparticle.h>
 
HGE *hge = 0;
hgeResourceManager* myRes;
bool done = false;
 
bool FrameFunc()
{
 
 return done;
}
 
int WINAPI WinMain (HINSTANCE,
                    HINSTANCE,
                    LPSTR,
                    int)
 
{
  hge = hgeCreate(HGE_VERSION);
  hge->System_SetState(HGE_WINDOWED, true);
  hge->System_SetState(HGE_FRAMEFUNC, FrameFunc);
 
  if(hge->System_Initiate())
  {
    myRes = new hgeResourceManager("resource.res");
    hge->System_Start();
  }
  else
  {	
    MessageBox(NULL, hge->System_GetErrorMessage(), "Error",
               MB_OK | MB_ICONERROR | MB_SYSTEMMODAL);
  }
 
  delete myRes;
 
  hge->System_Shutdown();
  hge->Release();
 
  return 0;
}

Required files

Here are all the required files for this project. Place them all into the current directory, named as such.

• bg.jpg: the background sprite
• sheet.png: sprite sheet for sprites and animations
• font1.png: bitmap font file
• font1.fnt: font description file for the above font
• coin.ogg: sound effect when a coin is collected
• particle.psi: particle effect spawned when a coin is collected

Filling up the resource script file

Here is what is required for the game:

• a background sprite
• a coin animation
• a font for displaying amount of coins collected
• a sound effect played when a coin is collected
• a particle effect
• a sprite for the particle effect (sparkles)

Create the resource.res file and add the following to it:

Texture background
{
 filename=bg.jpg
}
Sprite bgSprite
{
 texture=background
 rect=0, 0, 512, 512
}
 
Texture sheet
{
 filename=sheet.png
}
Animation coin
{
 texture=sheet
 rect=0, 0, 32, 32
 frames=5
 fps=8.0
 mode=FORWARD,LOOP
}
 
Font font1
{
 filename=font1.fnt
}
 
Sound coinSound
{
 filename=coin.ogg
}
 
Sprite sparkles
{
 texture=sheet
 rect=0, 40, 32, 32
 blendmode=ALPHAADD
}
Particle coinCollected
{
 filename=particle.psi
 sprite=sparkles
 fps=50.0
}

Initializing the content

At the top of the program, declare the following:

hgeSprite* bgSprite;
hgeAnimation* coinAnim;
hgeFont* font1;
HCHANNEL chan[2];
HEFFECT coinSound;
hgeParticleSystemInfo sparkles;
hgeParticleManager *particleManager;
 
float mouseX, mouseY;  //coordinates of the mouse cursor
int collected = 0; //how many coins were collected

A structure for handling coins is needed, declare one as follows:

struct Coin{
 bool exists;  //does the coin exist?
 hgeRect loc;  //the location of the coin on the screen
};
Coin coins[MAXCOINS];

Coin is a structure that contains a boolean that determines whether the coin exists (true means it hasn't been collected yet) and an hgeRect structure to store the coordinates of the coin on the screen.

Also add a MAXCOINS #define at the top:

#define MAXCOINS 100

Change this if you'd like a different amount of coins to appear.

In WinMain, add the following statements to initialize all our content:

hge->Random_Seed(0);
    bgSprite = myRes->GetSprite("bgSprite");
 
    coinAnim = myRes->GetAnimation("coin");
    coinAnim->Play();  //start playback of animation
    font1 = myRes->GetFont("font1");
    coinSound = myRes->GetEffect("click");
    sparkles = myRes->GetParticleSystem("sparkles")->info;
    particleManager= new hgeParticleManager();

We need to set the exists variable to true, to designate that the coins haven't been collected yet. We also give each coin a random location:

//initialize all coins
for(int i=0; i<MAXCOINS; i++){
 float randX, randY;
 coins[i].exists=true;
 randX = hge->Random_Float(0, 770);
 randY = hge->Random_Float(0, 570);
 coins[i].loc = hgeRect(randX, randY, randX+32, randY+32);
}

Don't forget to delete the particleManager when done (placed before WinMain returns):

delete particleManager;

Here is the complete WinMain function:

int WINAPI WinMain (HINSTANCE,
                    HINSTANCE,
                    LPSTR,
                    int)
 
{
  hge = hgeCreate(HGE_VERSION);
  hge->System_SetState(HGE_WINDOWED, true);
  hge->System_SetState(HGE_FRAMEFUNC, FrameFunc);
  hge->System_SetState(HGE_HIDEMOUSE, false);
  hge->System_SetState(HGE_TITLE, "Coin Collector"); 
 
  if(hge->System_Initiate())
  {
    myRes = new hgeResourceManager("resource.res");
    hge->Random_Seed(0);
    bgSprite = myRes->GetSprite("bgSprite");
 
    coinAnim = myRes->GetAnimation("coin");
    coinAnim->Play();  //start playback of animation
    font1 = myRes->GetFont("font1");
    coinSound = myRes->GetEffect("coinSound");
    sparkles = myRes->GetParticleSystem("coinCollected")->info;
    particleManager= new hgeParticleManager();
 
    //initialize all coins
    for(int i=0; i<MAXCOINS; i++){
     float randX, randY;
     coins[i].exists=true;
     randX = hge->Random_Float(0, 770);
     randY = hge->Random_Float(0, 570);
     coins[i].loc = hgeRect(randX, randY, randX+32, randY+32);
    }
 
    hge->System_Start();
  }
  else
  {	
    MessageBox(NULL, hge->System_GetErrorMessage(), "Error",
               MB_OK | MB_ICONERROR | MB_SYSTEMMODAL);
  }
 
  delete myRes;
  delete particleManager;
 
  hge->System_Shutdown();
  hge->Release();
 
  return 0;
}

Updating and Input functions

In FrameFunc, basic utility functions are added; getting the mouse position, updating animations and particles:

hge->Input_GetMousePos(&mouseX, &mouseY);  //get the current mouse position
  float dt=hge->Timer_GetDelta();  //get the time since the last call to FrameFunc
  coinAnim->Update(dt);  //update the coin animation
  particleManager->Update(dt);  //update all particles

Next, we need to check whether the user clicked inside a coin rectangle. This is the heart of the program: If the user collected a coin, and the coin exists, we play a sound, spawn a particle and then increment the collected variable. Then we set its exists variable to false so it can't be collected again.

//when left mouse is clicked, check to see if coin is clicked
  if(hge->Input_GetKey()==HGEK_LBUTTON){
   for(int i=0; i<MAXCOINS; i++){  //check all coins
    if(coins[i].exists && coins[i].loc.TestPoint(mouseX, mouseY)){  //is mouse position inside a coin?
     chan[1] = hge->Effect_Play(coinSound);  //play a sound
     particleManager->SpawnPS(&sparkles, mouseX, mouseY);  //spawn a particle
     coins[i].exists = false;
     collected++;
    }
   }
  }

Rendering

The final step in the program is the rendering functions. We just have to render the background sprite followed by the coins. Place the following statements below the update/input functions.

Start by rendering the background:

hge->Gfx_BeginScene();
 hge->Gfx_Clear(0);  //clear the screen, filling it with black
 bgSprite->RenderStretch(0, 0, 800, 600);  //render the background sprite stretched

If the coin exists, we will render it at the appropriate location:

//render all coins
 for(int i=0; i<MAXCOINS; i++){
  if(coins[i].exists) coinAnim->RenderStretch(coins[i].loc.x1, coins[i].loc.y1, coins[i].loc.x2, coins[i].loc.y2);
 }

Render some text to keep track of how many coins were collected:

font1->SetScale(1.0); //set text size to normal
 font1->SetColor(ARGB(255,0,0,0));  //set color of text to black
 font1->printf(5, 5, "Coins collected: %d", collected);  //display amount of coins collected

Finally, render the particles and EndScene().

particleManager->Render();  //render all particles
 hge->Gfx_EndScene();

Here is the complete FrameFunc:

bool FrameFunc()
{
  hge->Input_GetMousePos(&mouseX, &mouseY);  //get the current mouse position
  float dt=hge->Timer_GetDelta();  //get the time since the last call to FrameFunc
  coinAnim->Update(dt);  //update the coin animation
  particleManager->Update(dt);  //update all particles
 
  //when left mouse is clicked, check to see if coin is clicked
  if(hge->Input_GetKey()==HGEK_LBUTTON){
   for(int i=0; i<MAXCOINS; i++){  //check all coins
    if(coins[i].exists && coins[i].loc.TestPoint(mouseX, mouseY)){  //is mouse position inside a coin?
     chan[1] = hge->Effect_Play(coinSound);  //play a sound
     particleManager->SpawnPS(&sparkles, mouseX, mouseY);  //spawn a particle
     coins[i].exists = false;
     collected++;
    }
   }
  }
 
 hge->Gfx_BeginScene();
 hge->Gfx_Clear(0);  //clear the screen, filling it with black
 bgSprite->RenderStretch(0, 0, 800, 600);  //render the background sprite stretched
 
 //render all coins
 for(int i=0; i<MAXCOINS; i++){
  if(coins[i].exists) coinAnim->RenderStretch(coins[i].loc.x1, coins[i].loc.y1, coins[i].loc.x2, coins[i].loc.y2);
 }
 font1->SetScale(1.0); //set text size to normal
 font1->SetColor(ARGB(255,0,0,0));  //set color of text to black
 font1->printf(5, 5, "Coins collected: %d", collected);  //display amount of coins collected
 
 particleManager->Render();  //render all particles
 
 hge->Gfx_EndScene();
 
 return done;
}

Run this program, and click as many coins as possible!

center

You can download the source file and resource script file for this tutorial here: Simple 2D game source, Resource script

效果图：