Paruthi{.exe}: 2012

Gamification and cocos2dx updates

Well that is a nice course on gamificaiton got a good idea how this domain is works and speeding up.

And mean while in the cocos2dx they had released a new version.

I am porting the code to the new version and you can follow it from here
https://paruthidotexe@code.google.com/p/bubbleburstcocos2dx/

you can use mercurial to download and add this project to your cocos2dx solution folder
That is it you check the code and output from there on.

I will have 3 post per week from this point onwards for this cocos2dx tutorial.

cheers,
Paruthi{.exe}

cocos2dx game code repository

For the latest codes update follow the link https://code.google.com/p/bubbleburstcocos2dx/

Course on gamification

hi,

There will be a little delay in the cocos2dx posts.
I am taking a course on gamification
And also occupied in learning Html5, css3, js for developing a website.

thanks
Paruthi{.exe}

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

MainMenu Scene
1. Main menu layer( which has Three Items )
Option Scene
1. Option menu layer( which has following Items )
Game Scene
1. HUD layer( which has following Items )
2. Game layer( which has following Items )
Game Over Scene

Game over layer

Label (to indicate game lost or game won)
Replay game
Go Back(to main menu)

Game Flow

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

GOTO Tutorial Index

Step5: Understanding the First project[Bubble Burst]

So now you have a basic idea of cocos2dx. If not also just proceed and you get it when we write code practically. Lets see about our game first...
GameName : Bubble Burst
Concept : There will be a lot of bubbles we need to click/touch to burst them.
Why we need to do such a easy game?
Is this what you are thinking?
Yea such simple game will avoid us from getting in to complicated game-logics and so we can focus full on learning cocos2dx.

Now lets see the project(BubbleBurst) we had created using cocos2dx in visualstudio 2010.
Open the solution and set BubbleBurst.win32 as "startup project".

Directory structure and file list of the project.

BubbleBurst\Classes : have all the .cpp and .h files and all the code goes here.
BubbleBurst\ Resources : have all the images, sounds and other resources needed for our game.
BubbleBurst\ proj.win32 : have the main.cpp, main.h, Visualstudio project files(BubbleBurst.win32.vcxproj).

Code Explanation (not all the lines are explained if u have more doubts ping me)

Main.cpp

1.>Create an instance of the application in the main()
AppDelegate app;

2.> Set the window title and window size by
eglView.setViewName("Bubble Burst");
eglView.setFrameSize(800, 600);

3.>Get current application instance and start the game by
CCApplication::sharedApplication().run();

Class AppDelegate

This class inherits the property of the CCApplication class. And over ride functions like "applicationDidEnterBackground", "applicationDidFinishLaunching" etc..
class AppDelegate : private cocos2d::CCApplication
{
public:
AppDelegate();
virtual ~AppDelegate();
virtual bool applicationDidFinishLaunching();
virtual void applicationDidEnterBackground();
virtual void applicationWillEnterForeground();
};

And will create the "director " and maintains all scenes of the game.
CCDirector *pDirector = CCDirector::sharedDirector();

Functions like "applicationDidEnterBackground()" and " applicationWillEnterForeground() " used for pausing and resuming sounds, animations etc. You can also show a pause menu if the game is minimized or send to background.

Class HelloWorld

This class is the main class of the game. This is inherited from a Layer class(CCLayer) and have a function scene which will return a scene object to the "Director" in the Class AppDelegate.
CCScene* HelloWorld::scene()

On the Init() function MenuItem, Label and Images are added to this Helloworld layer
Creating menu :

CCMenuItemImage *pCloseItem = CCMenuItemImage::create(
"CloseNormal.png",
"CloseSelected.png",
this,
menu_selector(HelloWorld::menuCloseCallback));

A menu item with Image(normal and mouse over) is added. And on clicking on that image (click event), it will call a function HelloWorld::menuCloseCallback. In that function code for handling the click event is writen.

Creating Label:

CCLabelTTF* pLabel = CCLabelTTF::create("Hello World", "Arial", 24);

This is how a label with text "Hello World", font "Arial" of size "24" is created.

Creating Image/Sprite:
CCSprite* pSprite = CCSprite::create("HelloWorld.png");

we have to pass the image name to Create function in the class CCSprite to create and draw an image.

OK we had created various items like menu item, label, sprite.
Now we need to position them on the screen like
pLabel->setPosition(ccp(size.width / 2, size.height - 50));
and finally we need to add it to the layer to draw on the screen like
this->addChild(pLabel, 1);

Now you might got some clear picture of the code and cocos2dx. Now lets roll and start making the real game.
Go to Tutorial Index

Step4: Understanding cocos2dx architecture

Yea you had created a basic BubbleBurst with cocos2dx template in visual studio 2010. The new project now has a list of files of type .cpp, .h, .png, .ico. So now we see what each file do for your first project.

To understand these files first of all you have to understand the Architecture of cocos2dx.
Basic concepts :-
1> Layers :
There can be one or more layer in a scene. Each layer may contain images, animations, labels, buttons, Sprites etc
In our project in file HelloWorldScene.h: A layer is created
class HelloWorld : public cocos2d::CCLayer

And "X" button and label "HelloWorld" are all added to this layer.
Layers are subclass of CocosNode, they can be transformed manually or by using actions.

2.> Scene
A “scene” in Cocos2d is just a special sort of node that acts as the ultimate parent for all other nodes that are visible. Still cant get it?
To say it simply Only one scene can be running at a time. All the inputs, audio, images are all drawn on the scene which is visible. Inside this one scene there can be many layers.

In our project in file AppDelegate.cpp: Helloworld scene is created using
CCScene *pScene = HelloWorld::scene();

3.> Director :
The Director takes care of various scenes. Director is a shared (singleton) object. It knows which scene is currently active, and it handles a stack of scenes to allow things like "scene calls" (pausing a Scene and putting it on hold while other enters, and then returning to the original). The push, pop, replacement or end of the current scene is made by director.
The Director is also responsible of initializing the main window.
In our project in file AppDelegate.cpp: A Director is used
CCDirector *pDirector = CCDirector::sharedDirector();

and using this director to start the first and only scene in our project "HelloWorld" scene
pDirector->runWithScene(pScene);

4.> Sprite
A cocos2d' sprite is like any other computer sprite. It is a 2D image that can be moved, rotated, scaled, animated, etc. Sprites (implemented using the Sprite class) can have other sprites as children. When a parent is transformed, all its children are transformed as well.
Since sprites are subclass of CocosNode, they can be transformed manually or by using actions. See Actions, Transformations and Effects for more detail about actions.

In our project in file HelloWorldScene.cpp: A sprite is created
CCSprite* pSprite = CCSprite::create("HelloWorld.png");
and added to the layer
this->addChild(pSprite, 0);

5.>Event
There is a event generator like keyboard press, Button press, mouse click, scene loaded.
These event are catch by a event listener. This is implemented using function pointer.
In our project in file HelloWorldScene.cpp
Event generator:
CCMenuItemImage *pCloseItem = CCMenuItemImage::create(
"CloseNormal.png",
"CloseSelected.png",
this,
menu_selector(HelloWorld::menuCloseCallback));

Event Listener:
void HelloWorld::menuCloseCallback(CCObject* pSender)
{
// "close" menu item clicked
CCDirector::sharedDirector()->end();
}

Still cant get a clue... Here is a simple picture
{
There is only one Director
There can be one or more scenes but only one scene runs at a time
All the scenes are controlled by the director.
There can be one or more layers. And we can draw many layers at the same time.
All layers are linked to the scene.
Layers contains sprites, labels, buttons, menus etc,,
Events are used to pass message between various elements.
Actions, transitions, Effects etc are used over layer, sprites, nodes.
}

How all element are placed in our game

.
GO TO Tutorial Index

Step3: Creating new cocos2dx project

1.> Open "cocos2d-win32.vc2010.sln" in Visual Studio 2010

2.> Since you have installed and build it. This will have the required debug and release libs.

3.> Create our game Project FILE -> New Project. New project window appears.

4.1> In the window select Cocos2d-x and then select cocos2d-win32 Application

4.2> Enter project name here it is "BubbleBurst"

4.3> Solution: "Add to solution"

5.> Click Next

6.> In the next window select physics, Audio and scripting library support.

For the "BubbleBurst " project i am using BOX2D.

7.> On clicking FINISH button your solution will have the new project "BubbleBurst"

8.> Now make the "BubbleBurst.win32" project as startup project.

9.> Build and run the project it will have an output like the following screen

Hip Hip Hooray

You had successfully created your first project in the Cocos2dx.

Now in the next lesson we will modify this and do the real game development.

Go to tutorial Index

How to remove old cocos2dx templates ?

Go to respective folders

VS2010 Go to : C:\Program Files\Microsoft Visual Studio 10.0\VC\vcprojects\
VC2010Express Go to : C:\Program Files\Microsoft Visual Studio 10.0\VC\Express\VCProjects

delete the sub directory Cocos2d-x
delete the files with prefix CCAppWiz (like CCAppWiz.win32.ico, CCAppWiz.win32.vsdi, CCAppWiz.win32.vsz etc)
Note: To delete you might need admin rights depends up on your user settings.

Go to tutorial Index

Step2: Installing Visual studio templates for cocos2dx

Why should we need to install the cocos2dx visual studio project template ?

To make the work flow easy and we can skip all the settings that are needed for creating a cocos2dx project.

How to install?
Step1:
Go to the template folder inside the cocos2dx folder...
"\cocos2d-2.0-rc2-x-2.0.1\template\msvc"

Step 2:
Run "InstallWizardForVS2010.js" for vs2010
or
Run "InstallWizardForVC2010Express.js" for vs2010 Express
NOTE: Sometimes your firewall might block this script. You need to add exception on the firewall. Example : For COMODO firewall, you have add it to the list of the trusted files.

Go to tutorial Index

Step 1: Installing Cocos2dx

1. Goto download page http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download and download the latest version

THIS tutorial is based on
1 > Version : cocos2d-2.0-rc2-x-2.0.1 @ Jun 29 2012
2 > Language : C++
3> IDE : Visual Studio 2010

4> Target Platform : Windows Vista, Windows 7
5> OS(this tutorial and codes are developed): Windows Vista

2. Extract to a folder might look like "D:\GameEngines\cocos2d-2.0-rc2-x-2.0.1"

3. Go to the folder and run build-win32.bat this will automatically build the project

3. Open cocos2d-win32.vc2010.sln and click Build-> Rebuild Solution.

It takes some to build all the projects in the solution

Change the build setting to Release mode like shown in image

4. This will create folders like "Debug.win32" and "Release.win32". Thats is it you have successfully downloaded, installed and builded the cocos2dx... happy happy

5. ok fine... How to check the installed cocos2dx is working ?

5.1 Set "HelloWorld" as "Start up project" and then build and run.

5.2 If is is showing a window like below u r done the first step

5.1 Set "tests" as "Start up project" and then build and run.

5.2 If is is showing a window like below u r done the first step

Cool u had successfully installed Cocos2dx on your system.
Go to tutorial Index

How to develop a 2D game

First question when we want to develop a game is
Should i write my own game engine?
or
Should i start wit existing game engine?

What to learn or what knowledge you should have?
If you want to create a game engine from scratch you have to learn to code Renderer, Input system, Audio, Physics, Memory management, etc..
and if you target for more than one platform you have to write/port all these for every platform
or
You have to learn the architecture of the game engine and how to work with the game engine you had choosen.

List of game engines to consider http://paruthidotexe.blogspot.com/2012/08/list-of-game-engines.html

1. I am choosing cocos2dx.... why cocos2dx ?

Cross platform Windows, Linux, IOS, Android, Bada, Blackberry, WoPhone etc.
Constant updates from the developers.
Has various choice of languages for development C++, Java Script, Lua etc.
Lot of successfully published games. A List of games published http://www.cocos2d-x.org/projects/cocos2d-x/apps

So as a first step lets install and learn how to do a game in Cocos2dx

Go to tutorial Index
Tutorials will be posted every 2nd or 3rd day...
Always open to feedback...

List of Game Engines / Framework

UDK

It is a strip out from the famous game engine which is been used in the gaming industry more than 10 years.
Site: http://www.unrealengine.com/udk
Language/script : Unreal script. Also visual scripting using a tool named Kismet
Platforms: Windows, IOS, Android (on the way)
Pro:
Allows us to develop games like Gears of war, Unreal Tournament etc
Flow for art assets is good.
Game engine architecture is designed more towards ease of development.
Cons:
Lot of game terminologies one need to know to work on this one, If you are a beginner level definitely this will be a big hurdle.
It is not free for commercial use.
Worst is they ask for share so you have to pay more when your game sells more :(
You need a high end system with good graphic card, RAM, processor to develop game. Mainly for the build process of the udk.

OGRE
Site: http://www.ogre3d.org
Language/script : C++[mostly used and prefered]
Other Languages : Python, .Net, Java.
Platforms: Windows, Linux, Mac, IOS
Pro:
Open source and Free for commercial use.
Has good tutorials, Wiki and Forum.
Good open source team support and constantly in development.
Game engine architecture is good.
You can create a module and add as plug-in to the engine.
Good editor support.

Cons:
Same as UDK this needs a huge learning curve.
We need to create a framework for our game from the raw engine.
You have to understand C++ well to start with this engine.
For beginners this might be tough if you dont know C++.

UNITY3D
Site: http://unity3d.com/
Language/script : JavaScript, C#
Other Languages : boo(Python)
Platforms: Windows, Linux, Mac, IOS, Android, PSP, XBOX, PS3
Pro:
Has good tutorials and Forum.
Editor support, if you compare with UDK this nothing.But it is good for developing games.

Most used engine by the game developer in 2012.
Very good engine for beginners.

Cons:
Not open source.
Have to buy to publish for Android and iPhone. Though windows publishing is free, but this will have a unity logo splash screen @ the start.

SFML [2D Game Engine]
Language/script : C++
Other Languages : C, Python, .Net, Ruby
Platforms: Windows, Linux, Mac
Pro:
Open Source
Very good engine for developing game in 2D.
Easy to learn and work with it.

Cons:
No editors.
No 3D support

Cocos2dx [2D Game Engine]
Site: www.cocos2d-x.org/
Language/script : C++
Other Languages : Javascript, lua, c#
Platforms: Windows, Linux, Mac, IOS, Android
Pro:
Has good tutorials and Forum.
"Cocos2d-iPhone" version of this engine is most used by the mobile game developers in 2012.
Very good engine for beginners.

Cons:
No editor, though some had developed a basic versions

My current choice is
2D : Cocos2dx
3D : Unity3D (UDKwill be my choice after i upgrade my system and after UDK released for Android)
Reason : you can port to android/ios and sell the game.

Paruthi{.exe}