Pages

Thursday, February 26, 2015

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:

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. 
cocos2d-x-hello-world-blank-project
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"

cocos2d-x-visual-studio-hello-world
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.

cocos2dx-helloworld-running
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

Wednesday, February 25, 2015

Cocos2D-X Game Development in Android Studio

When we create a new Cocos2D-X project using Cocos2D-Console, an Eclipse project is generated by default. The problem is that Google has dropped support for Eclipse ADT, they're pushing IntelliJ Idea based Android Studio with full force.
In this post I will show you how to convert your Cocos2D-X Android Eclipse ADT game project into Android Studio project, how to configure NDK and JNI in Android Studio to run your game from Android Studio directly.


Create a new Cocos2D-X Project

First of all, let's create a brand new Cocos2D-X game development project, you may skip this part if yo already have a project. Run the Cosos-Console command.
cocos new -p com.honesitconsultancy.indiegame -d "D:\Cocos\Projects" -l cpp "IndieGame"

Fig 1: Cocos-Console New Project


Once the command line operation is done, you will have a new project folder named "IndieGame" on path "D:\Cocos\Projects\". The folder will look like the screenshot below:

Fig 2: Cocos2D-X New Project Structure

1. Import Android project into Android Studio

Run Android studio, if you already have a project opened close it. Otherwise, it will show the project selection dialog exhibited below:
Fig 3: Android Studio New Project Dialog


I've blurred the project names on left to hide names of a few client project I'm providing consultancy through oDesk.


  1. Click on the item "Import project(Eclipse ADT, Gradle, etc.)
  2. Project selection dialog will open. Browse to your game path, in my case it was "D:\Cocos\Projects\IndieGame\". The sub folder "IndieGame" was not being shown by the user interface, I had to click the refresh button.
  3. Select the Android project generated by Cocos-Console command line. The name currently will be "proj.android". The refresh button is highlighted by a circle, the Android project is shown by an arrow.

Fig 4: Select Project Dialog Android Studio

The next dialog will ask for a path to save the new Android Studio project. You must keep the new project alongside the other projects.
Fig 5: Android Studio Select Destination Path

  • Change the name of project folder to proj.androidstudio and click Next

You'll see a few options on next screen. Android Studio is trying to help you, we don't need it though. check all 3 check-boxes reading "Replace jars with dependencies, when possible"; "Replace library sources with dependencies, when possible"; and "Create Gradle-style(camelCase) module names" on the next screen, as shown below. Click Finish button.

Fig 6: Android Studio Import project from ADT Options


The Android Studio will ask that the directory does not exist and do you want to create it? Click "OK" and a new directory/folder will be created for you.

2. Add NDK to your project properties

Android Native Development Kit(NDK) path will be added to your the "local.properties" Android Studio project file, it is an auto generated file.
Click on the proj.androidstudio name on top left of your screen, and select local.properties as shown in the screen grab below.
Android Studio Open local.properties


By default this file will contain the path to Android SDK, don't mess with it. We need to add a line of text below the existing SDK line.
The format of the NDK entry will be ndk.dir=%Path of your NDK directory%
In my case, the precise statement is shown below:

ndk.dir=D\:\\cocos\\android-ndk-r10d-windows\\android-ndk-r10d

Important: Windows users must modify the path string and add backslash in following places:
  • Right after the drive letter
  • Right every backslash in the path
Save the local.properties file and close it.

3. Modify Build.Gradle to handle JNI

  • On top left, click proj.androidstudio
  • Click IndieGame(or whatever project name you've chosen)
  • Click build.gradle




Add a new line right after closing bracket } pertaining to defaultConfig section.
Add following magic lines down there:

sourceSets.main
            {
                jni.srcDirs = []
            }
The sourceSets.main line will enable use of Java Native Interface or JNI in your project. JNI does same thing as Interop on Microsoft .Net.









Running your Cocos2D-x Indie Game on Android Devices

We need to perform just one more step before hitting the build icon.

  • Open command prompt.
  • Change directory to the location of your project.
  • Once there, type following cocos-console command

cocos compile -s ".\proj.androidstudio" -p android --ndk-mode debug

Be Patient: I got a system with Core-i7 CPU and 8 GB RAM, my system takes about a minute to compile the code. If someone's got a slower/older system, getting a cup of coffee while the code is compiling is a good idea.

4. API Level 9 Error

By default the Cocos-Console generates a project with Android SDK level 9. Its an old platform, if you don't have installed on your system Android Studio will show an error. To fix the problem, you'll need to modify the Android SDK level values in your game Manifest.xml and Gradle configuration file.

4a. Changes in Gradle Build File


  • Luckily you would already have the Gradle file opened to make half of the changes(otherwise follow Modify Build.Gradle to enable JNI section above). Find the defaultConfig section shown below and change values accordingly. I got platform 14 installed so I changed it to 14.


defaultConfig {
        applicationId "com.honesitconsultancy.indiegame"
        minSdkVersion 14
        targetSdkVersion 14

        ndk {
            moduleName "cocos2dcpp_shared"
        }
    }


  • Change the compileSDKVersion value as well. By default it was 10, I'll change it to 14.
  •     compileSdkVersion 14
Save the file.

4b. Changes in Android Studio Manifest File

Now open the Manifest file, you can do so by clicking project name hierarchy as shown by the thunderbolt in the screen grab below(proj.androidstudio -> IndieGame -> src -> main). I replaced the arrow, it looked boring :)


We need to change the minSDKVersion property here. We'll change it to 14(or any suitable SDK platform level you got installed).

<uses-sdk android:minSdkVersion="14"/>

After changing the value, save the manifest file. And hit the Synchronize button as well.

Make The Project

Here comes the climax!

Click the "Build" menu and select "Make Project" menu item. You may use shortcut key Ctrl + F9
Again, just stay calm and wait for a while as the project is being make.
Click "Run" button, or use shortcut key Shift + F10.

Note: I assume you've already configured a phone or emulator to work with your Android Studio, how to do so is beyond the scope of this article.

Once your blank Cocos2D-X game project starts running following screen will be displayed by default:
Please feel free to post comments on this blog, do check other articles in this series. You may contact me via e-mail using the form on left top of this post.
I will be posting more stuff, you better subscribe to the mailing list.

Monday, February 23, 2015

Compile Cocos2D-x Project For Android Game Development

honest-it-consultancy-game-development-android
My first Cocos2D-X game development project Running on Android Mobile

The code we write in C++ is used as it is to generate a build for Android platform using the tools supplied by Cocos2D-x engine. The platform dependent layer is very thin and lightweight, and you don't have to mess with it to develop Android game.

Compile Cocos2D-x Project using NDK & Cocos2d-Console

First of all we need to compile our Android project using Android NDK(Native Development Kit). You will need to download Android NDK first as mentioned here. Once you have the Android NDK.

Sunday, February 22, 2015

Cocos2d-x: How to create a new project(Android, iOS, Windows)

cocos-2dx-project-structure
Fig - 1: An empty Cocos2d-x Project
Once you have all the pre-requisites installed on your Windows PC, we are ready to use one of the best cross platform indie game development engines.
A new project is created through a Python script, remember Python was listed in the list of software we need to install beforehand. To read about list of prerequisites needed to create cross platform games with Cocos2d-x is visit following link:


Fig - 1 shows a new empty Cocos2d-x project. You can see it already contains projects for iOS, Android, and Windows(win32).

How to create new project using Cocos2d-console

Well that's just a fancy name for a Python script. Even the file name is different, "cocos.py".
When you install Cocos framework, the path is automatically configured and you can type "cocos" anywhere on command prompt.
This script file is present in Cocos framework installation folder(FYI). In my case I installed it on path "C:\Cocos". Full path of Cocos2d-x is given below:

C:\Cocos\tools\Python27\Tools\Scripts

The how-to guide present on Cocos website tells a different path, I couldn't find it on my PC and discovered this by just looking around for .py files.
Launch command prompt, and type the command given below








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

Important: Please create the project path folders before running the command, i.e. the path specified through -d switch.
cocos-2d-new-project-screenshot
Fig-2: cocos2d-x console screenshot

To learn more about the Cocos2d-X console, type following command to get the list of Cocos2d-x console options

cocos new --help

A screenshot of the help description is shown below
cocos2d-studio-help
Fig-3: Cocos console help 

How to write Cocos2d-x code using Visual Studio 2012

Go to the path which you specified in command line for creating a new project. Please refer back to Fig-1.
Open the folder "proj.win32", this folder will contain a solution file which will be named "indiegame.sln" or "MyCppGame.sln" in my case.
cocos-2dx-win32-project-contents
Fig-4: Cocos2d-x new Windows(win32) Project contents
A screenshot of how the project looks inside Visual Studio is given below:
cocos2dx-visual-studio-inside
Fig-5: Inside Visual Studio 2012 Cocos2d-x C++ Project

Where will you write the code?

To start with we will put the code inside HelloWorldScene.cpp file. If you're going through the programmer guide doc, try your practice code in method

bool HelloWorld::init()

Here's a short video demo to show off and make you jealous :D


For places with Youtube blocked, Vimeo video

Cocos2dx Visual Studio Helloworld Demo from Naeem Akram on Vimeo.

What about Android, iOS and other platforms?

First of all, refer to Fig-1 you will see there's a folder "Classes". This folder is utilized by Cocos2d-x framework to generate object files/dlls which are then used by all projects. Any change you make in Classes folder will be systematically used in Android, iOS,Windows, and Windows Phone Project.

Just yesterday I figured how to build and run a Cocos2d-x game project on my Android phone. In a few days I will write another blog post about how to run your Cocos2d-x indie game project on Android using NDK and Eclipse.

Stay with me on this journey to learn game programming, and feel free to communicate/ask questions. You may post a comment or send me an e-mail through the form on right side of page.
Follow me on Twitter: https://twitter.com/Na3mAkrm

Stay tuned for more!

Tuesday, February 17, 2015

Getting Started With Cocos 2D using C++ on Windows, What To Install?

cocos-2dx

Cocos 2d-x is a very popular cross platform game development engine. C++ is the programming language most university/college students now right out of college, that means maybe they can create a game while studying in college! Unity 3D, another game development platform is taking the market by storm but still many professional developers prefer Cocos 2D. My friend Mudaser recommended using Cocos-2D instead of Unity, he's got several years of game development experience so I followed his advice.


Getting started with Cocos was not very easy to be honest, it took me several hours to figure out which way to go. They got documentation on their website but it was not very helpful.

Tools to install for developing Cocos 2D C++ games on Windows





  1. Cocos Studio - Download
  2. Cocos Framework - Download
  3. Python - Download
  4. Visual Studio 2012 - Download
  5. Windows Phone 8 SDK - Download
  6. Java Development Kit (JDK), for Android version of your game - Download
  7. Android SDK, or Android version of your game- Download
  8. Android Native Development Kit (NDK), for Android version of your game - Download
I compiled this list after spending some time and I believe it is going to be helpful for people.

Tip

Most of the stuff can be downloaded after installing Cocos Studio on your system through the Cocos Store tab shown below. I recommend downloading Cocos Studio first.


cocos-store

Are you struggling with Cocos 2D-x game engine, let's learn together!!!

Feel free to get in touch with me through the "Contact Me" form on left side, you may comment the blog post as well.

What is Cocos Studio then?

It is not the place you will write your code in. Instead, it is a place where you create scene files which are then used by a programmer.
Your project will have various folders containing projects for Win32, Android, and Windows Phone as well. You will open appropriate project folder and modify files in there.

Why Python?

Not everybody loves PowerShell, open source community has got a much older and well tested alternative i.e. Python programming language. It is used to perform various tasks like creating projects etc. You will need to install it as well, no way around it ma techie.

Where do you write the Cocos2D-X game code?

On a Windows PC, the C++ game code is written in Visual Studio 2012. On a Machintosh, XCode is used to write and edit code. Same code can be reused as it is to generate an Android and iOS version of your game. You will need to provide graphics for major size changes, but don't worry about that for now.

Is it possible to create a Cocos2D-X game without C++?

Yes, it is possible to write HTML5/JavaScript based games, the tools are not covered in this blog post.
Lua scripting language is also supported and it can be used to create Cocos2D-X games.

android-os-logoNo direct debugging on Android

Don't just freak out, that's a matter of fact. You can't debug directly from Android devices. That's why its recommended to use Windows Phone emulator on Windows.
There is a good news for Apple iOS developers, they can directly debug their game code from their device. The reason is objective C is a child of C and it supports code written in C++.
On the contrary Android uses a virtual machine to run code, and C++ code gets converted into suitable byte code and back to assembly before hitting the processor.