Saturday, January 24, 2015

[Tutorial] Cocos2d-x: Box2D - another physics library of cocos2d-x (Part 1)

Filled under: ,

Now, you study how to use Box2D in Cocos2d-x. By default, Cocos2d-x is installed for users to use the library of Cocos2d-x + Chipmunk, if you want to use Box2D, you must do some task to import it into the compiler.

In this lesson, you study:
+ How to setup to use Box2D
+ An example of physic, applying Box2D physic

Bắt đầu chém nào!

Step 1 - Setup to use Box2D

Because by default, Cocos2d-x forces you to use Chipmunk, so you must do some following tasks:
1/ Open file CMakeLists.txt in Project  ( using NotePad++ to display line number ). Find to line number 162, and add "Box2D" as below:


Posted By Dev Bananaer9:06 PM

[Tutorial] Cocos2d-x: Create physics body of the complex objects by using Physical Editor software

We know how to create physics in Cocos2d-x V3.0, but in the case that is a circle, so creating physics body is rather easy. if our object has complex boundary, how do we create?

This lesson has two parts:
+ Create PhysicsBody Polygons from images by Box2d-Editor software
+ Import into game and make Physics of Engine process through analysis functions.

Part 1: Create PhysicsBody Polygons

Posted By Dev Bananaer7:07 AM

Wednesday, January 21, 2015

[Tutorial] Cocos2d-x: Create the first simple game - Gameover, calculate scores, add sounds for game effervescent (Part 4)

In this last part, we do all remaining tasks:

+ Check game-Over when monsters collide character
+ Add sound when shooting bullets and add some background music for more attractive.
+ Here skip calculating scores. This lesson is only in simple level.

Now let's start!!!!!

Step 1 - Add sound into game

You Download resource, copy into folder Resource of Project
Then open file HelloWordScene.cpp, in function init(), add the following lines

CocosDenshion::SimpleAudioEngine::getInstance()->playBackgroundMusic("background-music-aac.wav",true); // True = unlimited loop

Find to function onTouchEnded(), add the following lines



Add a command #include"SimpleAudioEngine.h" after first "#include" .

Step 2 - Create GameOver scene

you create a new Scene named GameOverScene.h and GameOverScene.cpp like this, Download Class

Now view a bit the two files:

* Open file GameOverScene.h, declare 2 Classes GameOverLayer, and GameOverScene, with constructor, destructor, init() function.

But, you should notice the two commands:

CC_SYNTHESIZE_READONLY(cocos2d::LabelTTF*, _label, Label); (1)

CC_SYNTHESIZE_READONLY(GameOverLayer*, _layer, Layer); (2)

It's rather difficult to see, but we can see as follow:

(1) create a variable _label with type LabelTTF* through a method of Label class

(2) create a variable _layer with type GameOverLayer* tthrough a method of Layer class

It's simple like so, you can study more about function Inline here

* Open file GameOverScene.cpp, destructor (with the mark ~ ), simply release the pointers of class to release memory.

Consider function Init()
GameOverScene::init(), create a new Scene with new Layer
GameOverLayer::init(), create a layer with white color - Color4B(255,255,255,255)

Color3B create color of RGB from 3 input params. Color4B create color of RGBA from 4 input params, there the last param will adjust opacity.

This block: 

this->runAction( Sequence::create(

is to create 2 Actions continuously
+ delay 3 seconds: DelayTime::create(3)
+ Then CallFunc::create(this, callfunc_selector(GameOverLayer::gameOverDone)), // call function gameOverDone

The function gameOverDone() do only task to replace GameOverScene by new Game Scene to continue playing

void GameOverLayer::gameOverDone()
    Director::getInstance()->replaceScene(HelloWorld::createScene()); // Create a new Game Scene

You open file HelloWordScene.cpp, find to function onContactBegin(), in the code block:

// Character that is collided by monsters
// process GameOver
// calculate scores

Add the following code block

auto gameOverScene = GameOverScene::create(); // Create a Scene Over of GameOverScene class
gameOverScene->getLayer()->getLabel()->setString("You Lose :["); // Set a message on the screen
Director::getInstance()->replaceScene(gameOverScene); // Replace game Scene by  game Over Scene 

Remember to add "#include"GameOverScene.h" in #include lines.

Before compiling and running, you must do the following task:

+ Build Android, open file in the path firstgame\\jni\ add this line ../../Classes/GameOverScene.cpp below the line ../../Classes/HelloWorldScene.cpp
+ Build Win32: open file firstgame.vcxproj in the path firstgame\proj.win32\firstgame.vcxproj add the two following lines:

<ClCompile Include="..\Classes\GameOverScene.h" /> below the line <ClCompile Include="..\Classes\HelloWorldScene.h" />

<ClCompile Include="..\Classes\GameOverScene.cpp"/> below the line <ClCompile Include="..\Classes\HelloWorldScene.cpp" />

Now build and run 

And ... error 

You should add USING_NS_CC; below the lines "#include" in GameOverScene.h ( each .h file should be added it ).

Done, build and run now is OK.

Posted By Dev Bananaer7:52 AM

Monday, January 19, 2015

[Tutorial] Cocos2d-x: Create the first simple game - Discover physical collision (Part 3)

In the two previous part, we built a half of project, but the most important that need to do in this project is: kill the monsters by the bullets shot out. How to do? With previous version Engine 1.x, 2.x when building physical collision among objects is not correct, so calculation of coordinator, array, and many kinds of vectors, is very difficult. However, now in this third part, that task is very simple with only some commands. Now, let's start.

Some tasks in the third part:
+ Set physical attributes for the objects ( character, bullets and monsters )
+ Catch events that physical collisions happen.
+ Build functions to process those collision.
That's all!

Let's go!

Step 1 - Set physical attributes for objects

You open file HelloWorldScene.cpp, and do simple tasks as follow:

In function createScene(), you edit as
auto scene = Scene::createScene() thành
auto scene = Scene::createWithPhysics();
// Temporarily consider as a Scene - a zoom-out world with physical attributes contains physical objects inside.

Add the following command
// The command debug allows us to see physical body frame applying to objects ( the red border around the object)
//Set the acceleration of weight = 0, for the objects not to fall into the bottom of screen


You find to the line this->addChild(player) in function init()

In that line, you add this code block:

//Create the physical body frame with circle shape
auto playerBody= PhysicsBody::createCircle(player->getContentSize().width / 2);
//Set flag = 1, to check object when collision happens
//If you remove this command, when collision happens, nothing happens
//Set physical body into character

2/ Monsters

You find to the line this->addChild(target); in function addTarget()

On that line, add this code block:
// Explain the same as Character part
auto targetBody = PhysicsBody::createCircle(target->getContentSize().width / 2);

3/ Bullet

In function onTouchEnded you find the line projectile->setPosition( Point(20, winSize.height/2) );, 

Add below that the following block, the explanation as the two above parts

auto projectileBody = PhysicsBody::createCircle(projectile->getContentSize().width / 2);

Done for building physical body.

Step 2 - Catch collision events among objects

To catch these collision events, we also create a listener to listen to collision, then pass the function to process collision through a dispatcher, as following code:

Before the line return true; of function init() add the following code block:

//Create an object to listen to collision if happenning
auto contactListener = EventListenerPhysicsContact::create();
//When collision happens, call function onContactBegin to process it, notice the line CC_CALLBACK_1, in some documents is CC_CALLBACK_2 will show the message not running.
contactListener->onContactBegin = CC_CALLBACK_1(HelloWorld::onContactBegin, this);
//the Dispatcher connects to the object that catches collision
_eventDispatcher->addEventListenerWithSceneGraphPriority(contactListener, this);

you notice the variable _eventDispatcher, this variable has two special points
+ has not declared anywhere ( even in header file HelloWorldScene.h) 
+ has the character underscore(_) at the beginning

That is the special variable available belongs to the class Dispatcher in library, so using it is completely normal. If not use, you must declare the other with the same function. Notice the variables with the underscore at beginning, usually is the variables pre-defined in class.

Step 3 - The function to process collision

In file HelloWorldScene.h add a prototype function 

//You must declare exactly ( because here is the declaration override on the parent class)
bool onContactBegin(const PhysicsContact& contact);

Then we must define that function in HelloWorldScene.cpp as follow:

bool HelloWorld::onContactBegin(const PhysicsContact& contact)
//Get the first collided object, casting to Sprite*
auto bullet = (Sprite*)contact.getShapeA()->getBody()->getNode();
//Get the flag value to check which object ( bullet, monsters, or character )
int tag = bullet->getTag();

//Get the second collided object, casting to Sprite*
auto target = (Sprite*)contact.getShapeB()->getBody()->getNode();
//Get the flag value to check which object ( bullet, monsters, or character )
int tag1 = target->getTag();
//If collision happens between bullet and monster, processing deletes both bullet and monster from Layer in Scene ( disappear from screen )

this->removeChild(bullet,true); // Delete bullet

this->removeChild(target,true); // Delete monster
// If collision happens between monster and character, character will die and GameOver, and then calculate scores but not process that now.
// process GameOver
// calculate scores
    return true; // must return true

Done, now build, run and view the result.
But there are errors, although Code is correct

Posted By Dev Bananaer8:06 PM

[Tutorial] Cocos2d-x: Create the first simple game - Touch screen event and shoot bullets (Part 2)

In part 1, we studied how to create a character, and monsters from images through class Sprite. And in adding monsters, you notice a block calculating the appearing position, and the moving speed. It's the simple algorithm.

In this part, we do some following tasks:

+ Catch event when touching screen
+ When touching screen, our character will shoot
+ Process the direction of the bullet flying following the point when touching

Let's Start!

Step 1 - touchscreen event and how to detect

You open file HelloWorldScene.cpp, in function init() find to the end of the function before return true; add the following block:

//Create an object to dispatch event information
auto dispatcher = Director::getInstance()->getEventDispatcher();
//Create an object to listen to touchscreen event follow One by One way
auto listener1 = EventListenerTouchOneByOne::create();
//Set swallow for Touch event when happening, prevent not allow objects catching other events using this event

//Catch Touch event, when Touch event happens, call corresponding function of HelloWorld class
listener1->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this);
listener1->onTouchMoved = CC_CALLBACK_2(HelloWorld::onTouchMoved, this);
listener1->onTouchEnded = CC_CALLBACK_2(HelloWorld::onTouchEnded, this);

//Send to dispatcher to process
dispatcher->addEventListenerWithSceneGraphPriority(listener1, this);

return true;

* Notice: Although not using onTouchMoved, but we should make Touch event be processed completely.

Step 2 - Process touch event - create the ability to shoot bullets for character

Open file HelloWorldScene.h, add three more prototype functions:

void onTouchEnded (cocos2d::Touch* touches, cocos2d::Event* event);
void onTouchMoved (cocos2d::Touch* touches, cocos2d::Event* event);
//Notice: onTouchBegan must return bool
bool onTouchBegan (cocos2d::Touch* touches, cocos2d::Event* event);

Then open file HelloWorldScene.cpp to define these three functions.

Although we don't use all three functions, but for Touch event to process completely, you must declare all three functions as follow:

bool HelloWorld::onTouchBegan(Touch* touch, Event* event)


return true; // must return True


void HelloWorld::onTouchMoved(Touch* touch, Event* event)

// Not process here


void HelloWorld::onTouchEnded (Touch* touches, Event* event){
// Get coordinator of touch point
Point location =  touches->getLocationInView();
location = Director::getInstance()->convertToGL(location);

Size winSize = Director::getInstance()->getWinSize();

//Create a bullet as a Sprite, set first position for main character
auto projectile = Sprite::create("Projectile.png");
projectile->setPosition( Point(20, winSize.height/2) );

// This block calculates the end point of the bullet through the first position and the position on Touch, the below picture can demonstrate for this. Here apply some basic formula of math. 

// Coordinator of touch point subtract coordinator of the top of bullet (offX, offY)
int offX = location.x - projectile->getPosition().x;
int offY = location.y - projectile->getPosition().y;

// Not allow to shoot reversely and shoot straightly to the bottom ( below the character )

if (offX <= 0) return;

// If the above condition is satisfied, create the shape of bullet on the screen

//Calculate the coordinator of the end point through the coordinator of the beginning point and the distance offX, offY
// The absolute coordinate realX = screen width + 1/2 bullet width, just right on flying out of screen
int realX = winSize.width  + (projectile->getContentSize().width/2); 

// The ratio between offY and offX
float ratio = (float)offY / (float)offX;

// The absolute coordinator of realY can be calculated based on realX and the above ratio + the beginning coordinator Y of the bullet ( calculate follow Talet in triangle, or follow tang of angle)

int realY = (realX * ratio) + projectile->getPosition().y; // must be: int realY = ((realX-projectile->getPosition().x) * ratio) + projectile->getPosition().y; (realX-projectile->getPosition().x is exactly the length from beginning point to end point on X axis

//The coordinator of end point
auto realDest = Point(realX, realY);

//The length of distance of bullet, calculate follow Pitago a*a = b*b + c*c, a is the subtense of square triangle
int offRealX = realX - projectile->getPosition().x;
int offRealY = realY - projectile->getPosition().y;
float length = sqrtf((offRealX * offRealX)  + (offRealY*offRealY));

// Set the velocity 480 pixels per second
float velocity = 480/1;

// The duration that bullet fly = the distance that bullet fly divide by the above velocity
float realMoveDuration = length/velocity;

// Move the bullet to end point with the time and the coordinate that calculated above. When go through the edge of the screen, it will disappear
projectile->runAction( Sequence::create(
MoveTo::create(realMoveDuration, realDest),
CallFuncN::create(CC_CALLBACK_1(HelloWorld::spriteMoveFinished,this)), NULL) );


The code block runAction seems to be complex but if written explicitly, it will be as follow:

//Move bullet with time and coordinator that calculated above
auto move= MoveTo::create(realMoveDuration,realDest);

//When move to the end poing, you will call the function spriteMoveFinished to remove the image of bullet, if not remove, the bullet fly out but still in the Layer, more and more, and process much more. This block will return an Action*
auto finish=CallFuncN::create(CC_CALLBACK1(HelloWorld::spriteMoveFinished,this));

//Perform in sequence two tasks, Move and then Delete
auto run = Sequence::create(move,finish,NULL);

//Perform the task of processing Sequence

You should review the lesson Basic Actions of Sprite

Here is the image that demonstrate the calculation of the flying distance of bullet

Posted By Dev Bananaer8:57 AM

[Tutorial] Cocos2d-x: Create the first simple game - Create a character (Part 1)

Now we will start making a simplest game. This game in old version here ( for Cocos2d-x V2.2.3)

Describe a bit about this game as follow: We have a main character and a lot of monsters, main character will kill monsters by shooting them. The game will calculate score simply (one monster killed provide you one point), and also have GameOver, you can insert music if need.

Let's go!

Step 1 - Create Project, add Resource images, sounds etc.

First, you must create a new Project (using cmd). Using command line on any platforms ( WIN, MAC, LINUX) are the same.

>cocos new firstgame -p -l cpp -d E:/android/project

You need to download Resource ( image files ) and copy overwrite into Resource folder of Project firstgame. If you build for Android, you copy into Resource in folder of firstgame. Resource Here

Step 2 - Create character

It seems huge, but only add a Sprite of image into Layer. You do as follow:

1/ Main character
In function bool HelloWorld::init(), you delete all but following block

    if ( !Layer::init() )
        return false;

return true;

Then add before return true; the following block:
// Get the screen size
Size winSize = Director::getInstance()->getWinSize(); 
// Create a Sprite, our character
auto player = Sprite::create("Player.png");
// Set on the left of the screen
player->setPosition( Point(player->getContentSize().width/2, winSize.height/2) );
// Add into layer in the Scene game
// Call function gameLogic , this function has task to create monsters with the speed one monster per second.
this->schedule( schedule_selector(HelloWorld::gameLogic), 1.0 );

2/ Create monsters

You open file HelloWorld.h and add 3 prototype functions:

void addTarget();  
void gameLogic(float dt);
void spriteMoveFinished(cocos2d::Node* sender);

Then you must declare these functions in HelloWorld.cpp as follow:

void HelloWorld::gameLogic(float dt)


// This function creates mosnters and move them
void HelloWorld::addTarget()
    auto target = Sprite::create("Target.png");
    Size winSize = Director::getInstance()->getWinSize();
// This block calculates the area monsters appear in the place that not hidden out of the screen edge

    int minY = target->getContentSize().height/2;
    int maxY = winSize.height
                          -  target->getContentSize().height/2;
    int rangeY = maxY - minY;
    int actualY = ( rand() % rangeY ) + minY;
// Set monsters into above actualY (random)
    target->setPosition(Point(winSize.width + (target->getContentSize().width/2),actualY));

 //Calculate the speed for monsters to move
    int minDuration = (int)2.0;
    int maxDuration = (int)4.0;
    int rangeDuration = maxDuration - minDuration;
    int actualDuration = ( rand() % rangeDuration )
                                        + minDuration;
// Move monsters with the speed within actualDuration, from appearing point to Point(0,y)

auto actionMove =  MoveTo::create( (float)actualDuration, Point(0 - target->getContentSize().width/2, actualY) );

// Stop the moving of monsters when reaching the end poing
 auto actionMoveDone =   CallFuncN::create(CC_CALLBACK_1(HelloWorld::spriteMoveFinished,this));
// Run 2 above Action in sequence way by following command:
 target->runAction( Sequence::create(actionMove, actionMoveDone, NULL) );

You can refer Sprite and basic Action commands in previous lesson.

void HelloWorld::spriteMoveFinished(Node* sender)
// This function is only to remove Target ( being Sprite) from layer of game
// Cast to pointer Sprite of a Node*
  auto sprite = (Sprite *)sender;
  this->removeChild(sprite, true);    

Step 3 - Run
OK, now you can build and run on Windows with following command

>cocos run -s E:/android/project/firstgame -p win32

Here is the result!

Posted By Dev Bananaer12:15 AM

Choose an Android item