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