Posted on

2. Hello World!

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"

USING_NS_CC;

AppDelegate::AppDelegate() {

}

AppDelegate::~AppDelegate()
{
}

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

pDirector->setOpenGLView(pEGLView);

// turn on display FPS
pDirector->setDisplayStats(true);

// 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
pDirector->runWithScene(pScene);

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() {
CCDirector::sharedDirector()->stopAnimation();

// 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() {
CCDirector::sharedDirector()->startAnimation();

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

USING_NS_CC;

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

// 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)
https://www.dropbox.com/s/gu64thsadl32wqf/Classes.rar

Posted on

Cocos2d-x Tutorial Series

Cocos2d-x Tutorial Series
(Official Cocos2d-X Image)

 

Introudction:
Cocos2d-x Tutorial Series .From Zero to Hero . In this series i will guide you how to make Basic Game & Advance level games which includes Level created from Box2D World & much more..
IN Basic Game :
Simple Game like this
(Ofcourse it’s my game it’s not good!)
In Advanced Game :
A Game with Box2D World Racing type game with smooth Curved Levels (Which you do in Illustrator using Pen Tool OR you can say it smooth Polygons which makes curved level)
Index
About Me:
I am not a Professional Programmer but i know how to Use cocos2d-x,Cocos2d-xna for making Games & i feel happy to share my knwoeldge with you as you all know the Tutorials are very less and 1 ebook is in the market which is Paid so some user will find it difficult to learn Cocos2d-X which is a great for Cross Platform GamesNOTE: I am targetting Cocos2d-x 2.2.2
PLEASE NOTE : This series is Discontinued due to older version of Cocos2d-x. I will make a new Series with latest version 3.x

Last Update: 24-01-2014
Posted on

1. Prerequisite Cocos2d-X

Welcome Guys to First lesson of Cocos2d-X v 2.2.2 Tutorial Series

Prerequisite
Summary: 
In this Lesson i am going to teach you (Ok i am not a teacher so i am going to show you instead of  teach you “teach  -> Show)
Setting up Cocos2d-x for all major Platform (Just leaving IOS  because of no MAC & IOS Device for testing & some others which are simple & easy)
& Running Sample app TestCPP
Detail:
Download Cocos2d-X V 2.2.2 from here http://cdn.cocos2d-x.org/cocos2d-x-2.2.2.zip
After downloading it save  to directory without Spaces in path for example:
C:Downloads Filescocos2d-x-2.2.2cocos2d-x-2.2 (Wrong)
C:Downloadscocos2d-x-2.2.2cocos2d-x-2.2          (Right)
Extract it using any software (I don’t care what you use..😀 )
1. Let’s start with Windows
using Visual Studio (If you don’t have a copy you can get it from Dreamspark by verifying your Student Status) .Installing Visual Studio is easy just do couple of clicks Next Next and Install type
Open this solution file

in Visual Studio 2012 as it’s for VS 2012 (If you want to open in any Greater version then please google it)
Right Click on TestCPP in solution explorer
like this
and select set as Startup Project
Then Click on the Play icon (which you saw in most Music Player in this Software it’s not called Play Icon)
If any Pop up askes to compile other Projects click yes
Click on it wait for it to complete the process (The time for compiling is much more then expected and also depends upon your Computer )
Now when you have completed it it will open a Window for you to show TestCPP app it’s a demo application to check Cocos2d-X features 
Click on every List item and check it’s feature what you can achieve with Cocos2d-X the power of cocos2d-x is not limited to these features you can achieve anything 
2. Let’s come to Android Version
1. Go to the Android Developer Site download ADT Bundle (http://developer.android.com/sdk/index.html)
&
2. Download the NDK (Native Development Kit)
Q: What is ADT Budle ?
A:  ADT Bundle includes Eclipse with SDK Manger and other tools to get you started in development of Android APPS & GAMES using SDK (Software Development Kit)
Q: What is NDK ?
A: NDK stands for Native Development Kit . It let’s you run C  / C++ Code in Android app . As you know Cocos2d-X is Cross platform & it’s run with C++ Language . So we need Android NDK
3. Download CYGWIN

Install Packages from any Single mirror site (Please check Make Packages are included in it)
now you are ready to make TestCPP for your andorid Device/Emulator/Bluestacks
Open ADT Bundle Folder – > Eclipse -> eclipse.exe
Import the TestCPP
File -> Import -> Existing Project into workspace -> Select Root directory -> Browse
C:Downloadscocos2d-x-2.2.2cocos2d-x-2.2samplesCppTestCppproj.android
Press Ok

Now Setting Variables
* Windows->Preferences->General->Workspace->Linked Resources
Click on New ->
In Name field:- COCOS2DX
In Location field:- The Root Directory in my PC it’s  
C:Downloadscocos2d-x-2.2.2cocos2d-x-2.2

Now we have to set NDK_ROOT Environment Variable
Windows -> Prefrences -> C/C++ -> Build -> Environment ->
Click on Add button (Right Side)
In Name field: NDK_ROOT
In Values field: The Root Directory of NDK (C:Downloadsandroid-ndk-r9-windows-x86_64android-ndk-r9) 

Also add these two Variables 
In Name field: CYGWIN
In Values field: nodosfilewarning
In Name field: SHELLOPTS
In Values field: igncr
Last thing what we have to do is 
Importing libcocos2dx Lib project
Same process for importing
File -> Import -> Existing Project into workspace -> Select Root directory -> Browse
Cocos2d-X ROOT/cocos2dx/platform/android/java (My PC – > C:Downloadscocos2d-x-2.2.2cocos2d-x-2.2cocos2dxplatformandroidjava)
Finish -> Ok
now if everything is gone as per tutorial you will not face any problem and it will get compiled Successfully
On TestCPP -> Right Click -> Run As -> Android Application
now make some coffee  because it will take much time to compile all Files after Completion of this Process open it in emulator or BlueStacks or any Device 
i will recommend BlueStacks instead of Emulator (Sometimes it will not able to run just Black screen ,It’s slow as comparison to Bluestacks )
NOTE: if you got any error Clean the Project Project-> Clean then Build it again Or
Post in Comments 🙂
3. Marmalade
Make sure you have Marmalade Installed on your System Open proj.marmalade folder in 
C:Downloadscocos2d-x-2.2.2cocos2d-x-2.2samplesCppTestCppproj.marmalade

Double click on TestCPP.mkb file it will let you open in the Visual Studio or Right click and open it with Marmalade HUB
4.BB 10

Install Blackberry Native SDK (https://developer.blackberry.com/native/downloads/)
For testing purpose download Simulator also (I would recommend Device DAC,DAB or any other)

Import TestCPP from proj.blackberry directory

Open Blackberry Native SDK -> File -> Import -> Existing Projects into WorkSpace -> Browse -> Finish -> Ok

Now some projects are also Required to build TestCPP or any other Sample / Your Project Successfully

extensions -> C:Downloadscocos2d-x-2.2.2cocos2d-x-2.2extensionsproj.blackberry

CocosDenshion  -> C:Downloadscocos2d-x-2.2.2cocos2d-x-2.2CocosDenshionproj.blackberry

Cocos2dx -> C:Downloadscocos2d-x-2.2.2cocos2d-x-2.2cocos2dxproj.blackberry

Box2D -> C:Downloadscocos2d-x-2.2.2cocos2d-x-2.2externalBox2Dproj.blackberry

Chipmunk -> C:Downloadscocos2d-x-2.2.2cocos2d-x-2.2externalchipmunkproj.blackberry

so import these Projects one by one or select Cocos2d-x Root directory and select it in List view of Check boxes

Now if you want to make for Simulator go to all of these projects Including TestCPP
Select Project – > right click -> Properties -> C/C++ Build -> Manage Configuration Select Simulator (Do same for Device if you want to make it for Device)

Select Configuration from drop down menu Simulator (Active)
do all these for all Projects 😀 because the build Library will be in that folder

For example you have choose Device-Release in Cocos2dx Project or CocosDenshion and your TestCPP is in Simulator configuration it will look for cocos2dx lib file in Simulator folder but actually the file is in Device-Release

so it will show you error be care full and choose appropriate  configuration
to run on simulator Add a new target if no simulator is found & Right click on Project Run As Blackberry C/C++ Application

____________________________________________________________________________

For WP8 i would recommend Cocos2d-XNA instead of Cocos2d-x as it will let you able to make it for WP7 & WP8

So i am not covering it in this Tutorial may be in Future

Some Advice :

Build your Project on Windows in Visual Studio write code and test it on Machine instead of slow emulators/Simulators/ and checking again and again on Device when you find it’s working fine and completed then go in Eclipse import the project as the Classes folder will be same on all Platform run it on Device or Bluestacks For android

do same thing for Blackberry or any other Platform it will save you lot of headache and Time..

In next tutorial I will show you how to create your own Project & write Hello World!

Check Index of Cocos2d-X Tutorial Series

Posted on

Flying Birds made with Cocos2d-x

Title: Flying Birds
Platform: Android 2.3+
Description: Once upon a time there was a Bad Man who have Locked group of birds in a Cage . Fly your first green bird who have escaped from the Bad Man’s cage
Protect your-self from Forks & escape yourself from branches.Remember Bad Man’s army of birds are on there way to get you back in the cage but don’t worry
you have got your-self some power ups which will help you to escape
Collect berries -> get 3 more birds which can destroy all things
Collect Star    -> get invisibility no one will catch your for 4.0 Seconds
Collect Coins   -> get Score for each coins and buy other birds from the cage
How to Play:
Touch to fly ,Leave touch to get low…
How to unlock Birds:
Click on bird (not Lock) check requirement .
Full fill the requirement and select your bird.
Screenshot:

PlayStore URL: