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

A - Create and run Project

First, create a new project named HelloWorld using cmd

Run/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

E:/android/myproject/helloworld

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

or
>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

#ifndef __HELLOWORLD_SCENE_H__

#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

class HelloWorld : public cocos2d::Layer

{

public:

    static cocos2d::Scene* createScene();

    virtual bool init();  

    

    void menuCloseCallback(cocos2d::Ref* pSender);

    

    CREATE_FUNC(HelloWorld);

};

#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"

USING_NS_CC;

// 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    scene->addChild(layer);

// 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(

                                           "CloseNormal.png",

                                           "CloseSelected.png",

                                           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);

    menu->setPosition(Point::ZERO);

    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)

exit(0);

#endif

}

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.

• Trần Xuân
• Chè Thái Nguyên
• Giỏi Chém Gió

Follow Source: http://laptrinhgamecocos2dx.blogspot.com/

Source Link: http://laptrinhgamecocos2dx.blogspot.com/2014/04/bai-4-hello-word-bai-code-dau-tien.html

[ttaiit.blogspot.com translated]