Tuesday, January 13, 2015

[Tutorial] Hello cocos2d-x. The first code - Hello World!

Filled under:

A - Create and run Project

First, create a new project named HelloWorld using cmd

>cocos new HelloWorld -p com.vn.HelloWorld -l cpp - d E:/android/myproject

Wait for 5 minutes to create new Project...

It's done. Go to new project in the following path
You can see the folder structure as follow:

Classes <- The most important, contains cpp or lua upon to your choice of language in above command.
cocos2d <- library of engine Cocos2d-x.
proj.android <- for building apk for Android mobile.
proj.ios_mac  <- for building apps for Iphone and Mac OS ( only run on Apple computers, or computer that installed Mac OS.
proj.linux <- for building apps on Linux machine.
proj.win32 <- for building apps on Windows 7, 8 OS
proj.wp8-xaml <- for building apps running on Windows Phone 8
Resources <- contains images, fonts, Maps, physics definition, etc.
.cocos-project.json <- for building project with lua or cpp.
CMakeLists.txt <- List libraries for building project.

Continue, we build and run on Windows. Using following command

>cocos run -s E:/android/myproject/helloworld -p win32

(enter cocos run -h for help)

>cocos compile -s E:/android/myproject/helloworld -p android --ap 16
--ap 16 is for android 4.1.2 or higher

Install on emulator
>adb install E:/android/myproject/helloworld/bin/debug/android/helloworld-debug-unligned.apk
>cocos run -s E:/android/myproject/helloworld -p android --ap 16

If error, remove --ap 16, as follow:
>cocos run -s E:/android/myproject/helloworld -p android

If not error and appear like this, it means you succeed. 

B - Study code

Above is testing running, but in this part we must study the code
Go to folder Classes in Project, there are 4 files
AppDelegate.h, AppDelegate.cpp
HelloWorldScene.h, HelloWorldScene.cpp

First, we only study 2 files HelloWorldScene.h, HelloWorldScene.cpp. 2 above files function trackinh parameters of application. And you cannot delete these 2 files.

file HelloWorldScene.h


#include "cocos2d.h"

class HelloWorld : public cocos2d::Layer
    static cocos2d::Scene* createScene();

    virtual bool init();  
    void menuCloseCallback(cocos2d::Ref* pSender);

#endif // __HELLOWORLD_SCENE_H__

The structure is C++ style.

Before studying code, you should read, or review C++ knowledge. We will try to explain only new features in cocos2dx 3.

static cocos2d::Scene* createScene();  //create new scene
virtual bool init(); //Initialize a new object of HelloWorld class
void menuCloseCallback(cocos2d::Ref* pSender); //Close button of application
CREATE_FUNC(HelloWorld); //Not clear, but need to have

Next, file HelloWorldScene.cpp

#include "HelloWorldScene.h"


// Function create new scene return a pointer Scene*
Scene* HelloWorld::createScene()
    auto scene = Scene::create();  // create a scene object
    auto layer = HelloWorld::create(); // create an object HelloWorld

// add object HelloWorld into Scene

// return pointer scene
    return scene;

// Initialize object HelloWorld
bool HelloWorld::init()
    // check initial error
    if ( !Layer::init() )
        return false;
// get screen size, and original coordinate point
    Size visibleSize = Director::getInstance()->getVisibleSize();
    Point origin = Director::getInstance()->getVisibleOrigin();

    //create close button for application

    auto closeItem = MenuItemImage::create(
                                           CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
// Set location for close button at location calculated in following formula
closeItem->setPosition(Point(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,
                                origin.y + closeItem->getContentSize().height/2));

    // create menu containing above close button, set position for it
    auto menu = Menu::create(closeItem, NULL);
    this->addChild(menu, 1); // thêm menu vào đối tượng HelloWorld

   // create a text line with font arial size 24 pixel
    auto label = LabelTTF::create("Hello World", "Arial", 24);
    // set position for Text
    label->setPosition(Point(origin.x + visibleSize.width/2,
                            origin.y + visibleSize.height - label->getContentSize().height));

    // Add text into object HelloWorld
    this->addChild(label, 1);

    // create a sprite object ( is the object able to move in game)
    auto sprite = Sprite::create("HelloWorld.png");

    // Set position for sprite into center of screen
    sprite->setPosition(Point(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

    // Add Sprite object into HelloWorld
    this->addChild(sprite, 0);
   // return value for init()
    return true;

// Function to close application
void HelloWorld::menuCloseCallback(Ref* pSender)

Director::getInstance()->end(); // end program.

// If IOS call exit(0);#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)




Come here, everyone knows how to create and run a project and knows a piece of simple code. In next advanced posts, we will help you study in deep Cocos2dx in mobile programming.


Post a Comment

Choose an Android item