- We will use C++ programming language
- Windows PC
- Visual Studio 2012 for code editing
- 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:
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"
- 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
