Step 8: Developing Game Screen

Thanks for the feedbacks, now lets go back to next step. We will create the game scene.
A game screen has the following

• One Director
• One Scene
• GameScene
• And two layers
• GameLayer
• HUDLayer

Steps:
0. We had already created the Director.
1.Create GameLayer and add components to it.
2.Create HUDLayer  and add components to it.
3.Finally add these both layers to the GameScene.
4.All the code goes in to GameScene.h and GameScene.cpp
You can download code from this link

Output of the GameScreen

First lets create a HUD layer:
It has a score, timer and quit button.
This will be shown on top of the game layer.
Following is the code for HUDLayer

Declaration

class HUDLayer : public cocos2d::CCLayer

{

public:

virtual bool init();

void DrawHUD();

void OnMenu(CCObject* pSender);

LAYER_CREATE_FUNC(HUDLayer);

};

Definition

bool HUDLayer::init()
{
bool bRet = false;
do
{
CC_BREAK_IF(! CCLayer::init());
this->setTouchEnabled(true);

CCLabelTTF* scoreLabel = CCLabelTTF::create("Score 12345", "Arial", 24);
CC_BREAK_IF(! scoreLabel);
CCLabelTTF* timeLabel = CCLabelTTF::create("Time 00:00", "Arial", 24);
CC_BREAK_IF(! timeLabel);

CCSize winSize = CCDirector::sharedDirector()->getWinSize();
scoreLabel->setPosition(ccp(scoreLabel->getContentSize().width/2,
winSize.height - scoreLabel->getContentSize().height/2));
timeLabel->setPosition(ccp(winSize.width-scoreLabel->getContentSize().width/2,
winSize.height - scoreLabel->getContentSize().height/2));

CCMenuItemImage* closebtn = CCMenuItemImage::create("CloseNormal.png", "CloseSelected.png", this, menu_selector(HUDLayer::OnMenu));
CCSize closebtnSize = closebtn->getContentSize();

CCMenu* closebtnMenu = CCMenu::create(closebtn, NULL);
closebtnMenu->setPosition( ccp(winSize.width/2-closebtnSize.width/2, winSize.height - closebtnSize.height/2));

// add this to the layer
this->addChild(scoreLabel, 1);
this->addChild(timeLabel, 1);
this->addChild(closebtnMenu, 2);

bRet = true;
} while (0);

return bRet;
}

void HUDLayer::OnMenu(CCObject* pSender)
{
CCScene* nextScene = MainMenu::scene();
CCDirector::sharedDirector()->replaceScene(nextScene);
}

Now create the game layer
Add a BG for now we can go in to gamelayer in later stage

Declaration

class GameLayer : public cocos2d::CCLayer
{
public:
// Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
virtual bool init();

// there's no 'id' in cpp, so we recommand to return the exactly class pointer
static cocos2d::CCScene* scene();

// implement the "static node()" method manually
LAYER_CREATE_FUNC(GameLayer);
};

Definition 

bool GameLayer::init()
{
bool bRet = false;
do
{
CC_BREAK_IF(! CCLayer::init());

// Enable touch/click actions
this->setTouchEnabled(true);

CCSize winSize = CCDirector::sharedDirector()->getWinSize();
CCSprite *player = CCSprite::create("BG02.jpg", CCRectMake(0, 0, 800, 600) );
player->setPosition( ccp(winSize.width/2, winSize.height/2) );
this->addChild(player, 1);
bRet = true;
} while (0);

return bRet;
}

Finally we have to add the two layers to the game scene by
Game Layer is added to scene @ layering position 1,
HUD Layer is added to scene @ layering position 5,
So that HUD is drawn over Game. I am leaving 2,3,4 layers position as that will be used by other layers for the game. Like particles or some other gameplay like maps etc...

CCScene* GameLayer::scene()
{
CCScene* scene = NULL;
do
{
// 'scene' is an autorelease object
scene = CCScene::create();
CC_BREAK_IF(! scene);

// 'layer' is an autorelease object
GameLayer *layer1 = GameLayer::create();
CC_BREAK_IF(! layer1);
HUDLayer *layer2 = HUDLayer::create();
CC_BREAK_IF(! layer2);

// add the layers as a child to scene
scene->addChild(layer1, 1);
scene->addChild(layer2, 5);
} while (0);

// return the Main menu scene
return scene;
}

GO TO INDEX

Need some suggestions

Hi,
How u doing?
I want some suggestion regarding How you think about this tutorial so far released?
What you are expecting more?
Will it be useful if I do any change the way iam doing?
What you guys like and hate about this tutorial?

Thanks

Step 7: Developing Main Menu Screen for the game

Basic settings before creating any new classes

• Window size
• We can set the window size @ the function _tWinMain() in AppDelegate.cpp
• Set as 800X600, If you have wider screen go for higher resolution
• eglView.setFrameSize(800, 600); 
• Window Title
• We can set the window title by function setViewName. Set the name as BubbleBurst.
• eglView.setViewName("Bubble Burst")

Now we go to the Main Menu. For this we have to create a main menu layer and attach it to a  main menu  scene. And the director will run this. Create 2 files MainmenuScene.h and MainmenuScene.cpp.
Download the code here for this tutorial.

Following is the contents of  MainmenuScene.h
#ifndef _MAINMENU_SCENE_H_
#define _MAINMENU_SCENE_H_

#include "cocos2d.h"

class MainMenu : public cocos2d::CCLayer
{
public:
// Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
virtual bool init();

// there's no 'id' in cpp, so we recommand to return the exactly class pointer
static cocos2d::CCScene* scene();

// functions for click even handling
void onNewGame(CCObject* pSender);
void onOptions(CCObject* pSender);
void onQuit(CCObject* pSender);

// implement the "static node()" method manually
LAYER_CREATE_FUNC(MainMenu);
};

#endif

We had created MainMenu layer from CCLayer. And assigned three function for 3 buttons in the menu as designed by us in the beginning of this chapter. If you remember this is exactly similar to the HelloWorldScene class which is created automatically by the cocos2dx template.

Following is the contents of  MainmenuScene.cpp
#include "MainmenuScene.h"
#include "HelloWorldScene.h"

using namespace cocos2d;

CCScene* MainMenu::scene()
{
CCScene* scene = NULL;
do
{
// 'scene' is an autorelease object
scene = CCScene::create();
CC_BREAK_IF(! scene);

// 'layer' is an autorelease object
MainMenu *layer = MainMenu::create();
CC_BREAK_IF(! layer);

// add layer as a child to scene
scene->addChild(layer);
} while (0);

// return the Main menu scene
return scene;
}

// on "init" you need to initialize your instance
bool MainMenu::init()
{
bool bRet = false;
do
{
CC_BREAK_IF(! CCLayer::init());

// Enable touch/click actions
this->setTouchEnabled(true);

// Main menu with 3 items
CCMenuItemFont* item1 = CCMenuItemFont::create( "New Game", this, menu_selector(MainMenu::onNewGame) );
CCMenuItemFont* item2 = CCMenuItemFont::create( "Options", this, menu_selector(MainMenu::onOptions) );
CCMenuItemFont* item3 = CCMenuItemFont::create( "Quit", this, menu_selector(MainMenu::onQuit) );

// combine to form a menu and allign Vertically
CCMenu* menu = CCMenu::create( item1, item2, item3, NULL );
menu->alignItemsVertically();

// add this to the layer
this->addChild( menu, 1 );

bRet = true;
} while (0);

return bRet;
}


void MainMenu::onNewGame(CCObject* pSender)
{
// Will do this on next step
}


void MainMenu::onOptions(CCObject* pSender)
{
// Will do this on next step
}


void MainMenu::onQuit(CCObject* pSender)
{
// Exit game
CCDirector::sharedDirector()->end();
}

scene() function will create a scene and return the pointer to the director.
And MainMenu::create() will create a MainMenu layer and you want to add it to the scene.

init() function will create a menu with 3 menu items( CCMenuItemFont ). And added to the layer for displaying on the screen. For click event of these three item, three function are added for handling the click event.

The MainMenu of our game BubbleBurst look like

Get the code for the tutorial here in my dropbox.
Go to tutorial Index

Step 6: Technical Design of the game

Now what we have to do is Technical Design. What are classes we going to use. And how there are linked and interact among them.

We will have Four Scenes

1. MainMenu Scene
   1. Main menu layer( which has Three Items )
   1. New Game
   2. Options
   3. Quit Game
2. Option Scene
   1. Option menu layer( which has following Items )
   1. Sound on / off
   2. Music on / off
   3. Full Screen / window mode
   4. Go Back(to main menu)
3. Game Scene
   1. HUD layer( which has following Items )
   1. Displays score
   2. Menu button
   2. Game layer( which has following Items )
   1. Game logics
   2. Sprites, Effects etc
4. Game Over Scene
1. Game over layer
1. Label (to indicate game lost or game won)
2. Replay game
3. Go Back(to main menu)

Game Flow

1. First we load MainMenu Scene with the Director.
2. "New Game" will unload MainMenu Scene and load the "Game Scene".
3. On clicking "Options" will push the "Options scene" over the "MainMenu Scene".
4. On clicking "Back" in the "Options Scene" will pop the "Options Scene" and display the "MainMenu Scene" again.
5. When our game is over, we will unload the "Game Scene" and  load the "Game Over Scene" 

GOTO Tutorial Index