Cocos2d-x Hello World Practical Game Programming

In this post I am going to show you how to create a "Hello World!" program in Cocos2d-x game development engine.

1. We will use C++ programming language
2. Windows PC 
3. Visual Studio 2012 for code editing
4. Cocos2D-x version 3.4 game engine

It will be a hello world in true sense of the word. To learn about installing Cocos2D-x and setting things up for game development please check following link:

All Articles in Cocos2D-X series

Step 1. Create a new Cocos2D-X project with Cocos-Console

• Open command prompt (Widows + X then C in Windows 8, Windows + R then type CMD press enter on older versions). Run following command to create a new game project.

cocos new -p com.honesitconsultancy.helloworld -d "D:\Cocos\Projects" -l cpp "HelloWorld"

• Now to to the folder location where you created the new project, in my case it is D:\Cocos\Projects\HelloWorld

Contents of the folder are shown in Fig 1. 

Fig 1: Blank Cocos2D-X project

• Open the sub-folder "proj.win32".
• Open the file "HelloWorld.sln"

The name can be different if you use anything other than HelloWorld.

• Expand the solution in "Solution Explorer" window, often found on right side of screen.
• Expand the solution sub folder "src" and click "HelloWorldScene.cpp"

Fig 2: HelloWorldScene.cpp and Init function

HelloWorld::Init function

This function is the heart of a Cocos2D-X game/program. From a game programmer's perspective, this function is the new void main(void).
We will write our custom logic here.

Create a label object with cocos2d::Label

Anywhere inside the Init function, create a new label object.

auto lblHello = Label::create
("Hello World!", "Times", 48.0, cocos2d::Size::ZERO,
cocos2d::TextHAlignment::CENTER,
cocos2d::TextVAlignment::CENTER);

// code highlighting with http://tohtml.com/cpp/

The keyword "auto" is a new construct introduced in C++ 11 standard. Cocos 3.x follows the latest C++ standard. you may write cocos2d::Label instead, but let's live with auto for now.

We have created a new cocos2d::Label object with text "Hello World!", font "Times", and font size 48.

But it will not show on screen right now.

Scene Node

Cocos2D-X game engine keeps all game objects organized in a set of interlinked nodes. These nodes form a graph together.

Our game starts running from the top most node which is also called "root". Cocos2D-x has generated a default root node for us. Here's the default code:

auto rootNode = CSLoader::createNode("MainScene.csb");

addChild(rootNode);

We will add our newly created label as a child to the root node represented by "rootNode" object.
The label will appear on very bottom left of our screen. We can move it around by calling "setPosition" function on it to set position of our label on x axis and y axis. The source code is given below

rootNode ->addChild(lblHello, 1, "lblHello");

lblHello ->setPosition(300,500);

Now build the project by pressing F6 key, Ctrl+B keyboard shortcut, or going to menu "Build -> Build Solution". The build process might take a minute.

Once the build is finished, run the project by pressing F5 key or clicking the tiny play icon on top.
The result is shown below.

Fig 3: HelloWorld program running

The init method will look like the screen shot shown below after we finish editing.

Fig 4: Final code snippet

Bonus

Once you're done with the main subject of this post, try adding this code right before return true;

//bonus

auto actMove = MoveBy::create(1.5, Vec2(100, 100));

lblHello ->runAction(actMove);

Build & run and see what happens :)

For other articles in this series, please visit

All Articles in Cocos2D-X series