Saturday, August 27, 2011

Code::Blocks(16) RPG 4 - Game Menus






The game has two different menus, the start menu and in-game menu, the differences are the available options and what will happen when we choose them as seen here:

Start Menu:
  • NEW > Goto player creation
  • LOAD > Goto load game, Start game (Disabled)
  • EXIT > Quit game
Game Menu:
  • CONTINUE > Return to game
  • SAVE > Goto Save Game, Return Game (Disabled)
  • EXIT > Quit Game
For the menus I have created two images more:

Ball selector:



Menu Item:



I have used Gimp again to draw them, to draw the ball i just made a new, square shaped image, filled it with color FF,00FF (Pink) so i can apply later the colorkey, then i selected a circle and used the blend tool with orange and yellow colors.

Drawing the button was quite easy: Gimp > File > Create > Button > Simple beveled button, the only thing I made was to left the text empty so I can use the same button for all the menu items.

The logic for the menu is simple:
  • Define an "Option" variable, it will be which menu option is chosen.
  • Check the keyboard, and if we have pressed the following keys:
  1. Key up > decrease option 
  2. Key down > increase option
  3. Enter > execute action associated to the button (Change game state)
Now draw the menu:
  1. Fill with a color (grey)
  2. Draw menu tittle
  3. Draw menu buttons
  4. Draw the text into the menu buttons
  5. Draw the ball selector
Repeat until we press the enter key

      <"Game.cpp", Code for MenuStart:>
      void Game::MenuStart()    //Start menu
      {
      //MenuTittle ="START MENU";
      
      SDL_Surface* Button; //The menu buttons
      SDL_Surface* Ball; //The ball selector
      Button = IMG_Load("images/button.png");
      Ball = IMG_Load("images/ball.png");
      
      //The ball uses colorkey to display correctly
      SDL_SetColorKey(Ball,SDL_SRCCOLORKEY |SDL_RLEACCEL,SDL_MapRGB(Ball-> format, 255, 0, 255));
      
      
      SDL_Rect ButtonPosition ,BallPosition;
      int i; //An iterator for the loop
      int Option=1;//To select items
      
      //startx, starty Used to display images
      int startx = ((myengine.ScreenX / 2) - (Button->w/2) );
      int starty = (myengine.ScreenY / 2) ;
      
      
      bool done = false;
          while (!done) // will loop infinite times until we set done = true
          {
       SDL_Event event;
              while (SDL_PollEvent(&event))//Check new events
              {
                  // check for messages
                  switch (event.type)
                  {
                             // exit if the window is closed
                  case SDL_QUIT:
                      done = true;
                      break;
      
                      // check for keypresses
                  case SDL_KEYDOWN:
      
      
              // Down key
              if (event.key.keysym.sym == SDLK_DOWN)
              {
                 Option++; //Move down ball selector
                  if(Option>3)Option=1;
                  break;
              }
      
      
             //Up key
             if (event.key.keysym.sym == SDLK_UP)
             {
                   Option--;//Move up ball selector
                  if(Option<1)Option=3;
                  break;
             }
      
             //Return pressed
               if (event.key.keysym.sym == SDLK_RETURN)
             {
                 switch (Option)
                 {
                     case 1://NEW
                     myGameState=CREATEPLAYER;
                     break;
      
                     case 2://LOAD
                     myGameState=LOAD;
                     break;
      
                     case 3://EXIT
                     myGameState=OUTRO;
                     break;
      
                 }//switch option
                 done = true;
                 break;
             }//if
      
             //Exit game
             if (event.key.keysym.sym == SDLK_ESCAPE)
             {
                 done = true;
                 break;
             }
                  }//switch
              }//while
      
      myengine.FillColour(100,100,100);//Fill with grey
      
      myengine.SetTextColor( 0, 0, 255 );//Blue color
      myengine.TextOut(startx -50 ,100,"START MENU",3);//Menu tittle
      
      for (i=1;i<4;i++) // draw 3 buttons
      {
      ButtonPosition.x = startx; // X
      ButtonPosition.y = starty + (i*40); // Y
      ButtonPosition.w = Button->w;
      ButtonPosition.h = Button->h;
      
      SDL_BlitSurface(Button, NULL, myengine.screen, &ButtonPosition);//Draw button
      }//for
      
      BallPosition.x=startx -Ball->w;
      BallPosition.y=starty + (Option*40);
      BallPosition.w=Ball->w;
      BallPosition.h=Ball->h;
      
      SDL_BlitSurface(Ball, NULL, myengine.screen, &BallPosition);//Draw ball selector
      
      //Draw text for the options
      myengine.TextOut(startx + 10,starty + 50,"NEW",1);
      myengine.TextOut(startx + 10,starty + 90,"LOAD",1);
      myengine.TextOut(startx + 10,starty + 130,"EXIT",1);
      myengine.Flip();
      
      myengine.Wait(1);
        }//End while done loop
      
      //Free surfaces Before finishing
      SDL_FreeSurface(Button);
      SDL_FreeSurface(Ball);
      }
      

      <"Game.cpp", Code for MenuGame:>
      void Game::MenuGame()    //In-Game menu
      {
      
      SDL_Surface* Button; //The menu buttons
      SDL_Surface* Ball; //The ball selector
      Button = IMG_Load("images/button.png");
      Ball = IMG_Load("images/ball.png");
      
      //The ball uses colorkey to display correctly
      SDL_SetColorKey(Ball,SDL_SRCCOLORKEY |SDL_RLEACCEL,SDL_MapRGB(Ball-> format, 255, 0, 255));
      
      
      SDL_Rect ButtonPosition ,BallPosition;
      int i; //An iterator for the loop
      int Option=1;//To select items
      
      //startx, starty Used to display images
      int startx = ((myengine.ScreenX / 2) - (Button->w/2) );
      int starty = (myengine.ScreenY / 2) ;
      
      
      bool done = false;
          while (!done) // will loop infinite times until we set done = true
          {
       SDL_Event event;
              while (SDL_PollEvent(&event))//Check new events
              {
                  // check for messages
                  switch (event.type)
                  {
                             // exit if the window is closed
                  case SDL_QUIT:
                      done = true;
                      break;
      
                      // check for keypresses
                  case SDL_KEYDOWN:
      
      
              // Down key
              if (event.key.keysym.sym == SDLK_DOWN)
              {
                 Option++; //Move down ball selector
                  if(Option>3)Option=1;
                  break;
              }
      
      
             //Up key
             if (event.key.keysym.sym == SDLK_UP)
             {
                   Option--;//Move up ball selector
                  if(Option<1)Option=3;
                  break;
             }
      
             //Return pressed
               if (event.key.keysym.sym == SDLK_RETURN)
             {
                 switch (Option)
                 {
                     case 1://CONTINUE
      myGameState=MAINLOOP;
                     break;
      
                     case 2://SAVE
                     myGameState=SAVE;
                     break;
      
                     case 3://EXIT
                     myGameState=OUTRO;
                     break;
      
                 }//switch option
                 done = true;
                 break;
             }//if
      
             //Exit game
             if (event.key.keysym.sym == SDLK_ESCAPE)
             {
                 done = true;
                 break;
             }
                  }//switch
              }//while
      
      myengine.FillColour(100,100,100);//Fill with grey
      
      myengine.SetTextColor( 0, 0, 255 );//Blue color
      myengine.TextOut(startx -50 ,100,"GAME MENU",3);//Menu tittle
      
      for (i=1;i<4;i++) // draw 3 buttons
      {
      ButtonPosition.x = startx; // X
      ButtonPosition.y = starty + (i*40); // Y
      ButtonPosition.w = Button->w;
      ButtonPosition.h = Button->h;
      
      SDL_BlitSurface(Button, NULL, myengine.screen, &ButtonPosition);//Draw button
      }//for
      
      BallPosition.x=startx -Ball->w;
      BallPosition.y=starty + (Option*40);
      BallPosition.w=Ball->w;
      BallPosition.h=Ball->h;
      
      SDL_BlitSurface(Ball, NULL, myengine.screen, &BallPosition);//Draw ball selector
      
      //Draw text for the options
      myengine.TextOut(startx + 10,starty + 50,"CONTINUE",1);
      myengine.TextOut(startx + 10,starty + 90,"SAVE",1);
      myengine.TextOut(startx + 10,starty + 130,"EXIT",1);
      myengine.Flip();
      
      myengine.Wait(1);
        }//End while done loop
      
      //Free surfaces Before finishing
      SDL_FreeSurface(Button);
      SDL_FreeSurface(Ball);
      }
      
      

      <Now the game is starting to have what we would expect to find in a game, intros, menus.. in the next post the main game loop> 

      No comments: