Hello World

Summary: In this tutorial i am going to show you how to create cross platform Project by just 1 line of Text in CygWin & work on it !
Requirement: Python for running the Script 
Detail: Let’s start by creating Cross platform Project
Let’s open CYGWIN
Enter :
1. cd C:/Downloads/cocos2d-x-2.2.2/cocos2d-x-2.2/tools/project-creator

2. ./create_project.py -project Hello -package com.developerhouse.hello -language cpp
Let me explain the Parameters
project Project Name
package Package Name
language  Language Name (cpp | lua | javascript)
Press Enter it will create the Project in Cocos2dx Root Directory /Projects/ Project_Name (Hello in our Case)
if you have followed our last tutorial then you know how to Import the project & Run it
if not then Please read it
Open Hello Project folder
now you know proj.[android|blackberry|tizen|win32] Folder
let’s talk about Classes & Resources Folder
Classes folder includes your C++ Classes & Headers file (Codes)
Resources folder includes your assets (Graphics,Sound,Shaders,JSON Files,XML Files or any other type)
Open project in Visual Studio or in any other IDE
Open AppDelegate.cpp
#include "AppDelegate.h"
#include "HelloWorldScene.h"


AppDelegate::AppDelegate() {



bool AppDelegate::applicationDidFinishLaunching() {
// initialize director
CCDirector* pDirector = CCDirector::sharedDirector();
CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();


// turn on display FPS

// set FPS. the default value is 1.0/60 if you don't call this
pDirector->setAnimationInterval(1.0 / 60);

// create a scene. it's an autorelease object
CCScene *pScene = HelloWorld::scene();

// run

return true;

// This function will be called when the app is inactive. When comes a phone call,it's be invoked too
void AppDelegate::applicationDidEnterBackground() {

// if you use SimpleAudioEngine, it must be pause
// SimpleAudioEngine::sharedEngine()->pauseBackgroundMusic();

// this function will be called when the app is active again
void AppDelegate::applicationWillEnterForeground() {

// if you use SimpleAudioEngine, it must resume here
// SimpleAudioEngine::sharedEngine()->resumeBackgroundMusic();

AppDelegate.cpp Class
This is the  main class of cocos2d-x it’s is used for 
Setting OpenGL View ,frame rate ,Scene,
applicationDidEnterBackground() just like onPause() in android called when Game minimize,when call comes etc..
applicationDidEnterBackground() just like onResume() in android called when resume from onPause() State when player open game again or call ends.
CCDirector* pDirector = CCDirector::sharedDirector(); //Get shared CCDirector pointer 
Q: What is CCDirector ?
A: It’s used to set Framerate,OpenGL View,setStats (Showing FPS etc..),Changing Scene (like Current Screen)
CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();//Get Shared OpenGL View
pDirector->setOpenGLView(pEGLView); //Set Current OpenGL View may be some of you guys are beginner with C++ i am also so instead of period . we are using -> because it’s a Pointer
pDirector->setDisplayStats(true); // Set Display Stats True FPS on bottom left corner of the Screen
pDirector->setAnimationInterval(1.0 / 60); //Set FPS the default value is 1.0/60
About 28 to 31 i will show you later let’s continue to applicationDidEnterBackground & applicationWillEnterForeground
applicationDidEnterBackground is used when game minimize or call comes in this we have to Pause our game animation or Sound or any other custom Game loop
applicationWillEnterForeground is used when game maximize to the user device resume animation or Sound or your custom Game loop
i will come later to Line 28 to 31
First we have to understand how Scene ,Layers & Sprite works
CCScene (Scene) can hold many CCLayer(Layer)
Layers can Hold CCSprite (Sprites) & other visual elements
think it like those 3 Classes are in Photoshop
CCScene  as Canvas
CCLayer  as Layers 
CCSprite as Image,your art work,Rectangles or other things which you draw or Place on Layer
here is a diagram to explain

Red Color Stroke -> CCScene

Green Color Stroke -> CCLayer

Blue Color Stroke -> CCSprite

you can add many CCLayer in CCScene 1 for background ,1 for HUD etc… etc..

Line 28 get Pointer of HelloWorld scene function which is returning a CCScene

Line 31 using our SharedDirector run the HelloWorld::scene()

Line 38 CCDirector::sharedDirector()->stopAnimation(); //Stop the animation when game pause

Line 46 CCDirector::sharedDirector()->startAnimation(); // Run it again when game resumes


The HelloWorldScene class is sub class of CCLayer

Before we move to code let me explain some Data types

CCSize -> holds two floating point Numbers think it as width and height

CCPoint -> holds two floating point Numbers think it as x and y

ccp -> use it to set CCPoint values // ccp(0,0);

Delete the content of HelloWorldScene to this code according to me by default the code is not easy to understand as a complete beginner

#include "HelloWorldScene.h"


CCScene* HelloWorld::scene()
// 'scene' is an autorelease object
CCScene *scene = CCScene::create();

// 'layer' is an autorelease object
HelloWorld *layer = HelloWorld::create();

// add layer as a child to scene

// return the scene
return scene;

// on "init" you need to initialize your instance
bool HelloWorld::init()
// 1. super init first
if ( !CCLayer::init() )
return false;

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

// add "HelloWorld" splash screen"
CCSprite* pSprite = CCSprite::create("HelloWorld.png");

// position the sprite on the center of the screen
pSprite->setPosition(ccp(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

// add the sprite as a child to this layer
this->addChild(pSprite, 0);

return true;

Line 3 defined as using namespace cocos2d (Short keyword)

Line 5-18 static scene function which is returning pointer of cocos2d::CCScene*

Line 8 create new CCScene by CCScene::create();

Line 11 create new HelloWorld Layer by HelloWorld::create();

Line 14 add the HelloWorld Layer as child to CCScene by scene->addChild(layer); //the add child method is gonna used many times when you add sprite ,CCrenderTexture etc. etc.

Line 17 reutnr that CCScene which added HelloWorld layer to the scene

Line 21-77 initialize function named init()  return boolean value it’s a Virtual function

Line 25-28 CCLayer::init() call init method of CCLayer if it’s false then return false exit method

Line 30 get Visible size of OpenGL View in CCSize data type CCSize holds two float values like width & height

Line 31 get Visible origin point of OpenGL View in CCPoint data type CCPoint holds two float values like x & y

Line 34 create a new Sprite with the file name which is in Resources folder

Line 37 set Position of the Sprite which is made in 34 by create a new CCPoint using ccp the Position will be center

Line 40 add the sprite as a child of Layer the second parameter is z-index (Hope you knwo what it is if you don’t then no worries it’s like the layer index which will be on top of that layer
just like we do in photoshop or illustrator we drag and drop the layer to the top of it if you set z-index 0 it will top on -1 if you set it 1 then it will be top on 0 Simple)


This is the end of Hello World Tutorial hope you liked it if you did not then please post in comments what you did not like and what i can improve
we will go more advance step by step

Here is the Project Hello Classes just replace them with the project you created in Classes folder (I have not uploaded the full project because it will let you do some work of  creating your own project OR saving my time for 9 MB project uplaod :D)