Saturday, October 5, 2013

Cocos2D-X Tutorial for iOS and Android: Getting Started (by Jean-Yves Mengant)

on May 13, 2013If you're new here, you may want to subscribe to my or follow me on . Thanks for visiting!Learn to create a simple iPhone and Android game with Cocos2D-X!Update 5/13/2013 Fully updated for Cocos2D-X 2.1 and iOS 6. (original post by Jean-Yves Mengant, update by ).

Cocos2D is an amazing and easy to use framework, but since it's written in Objective-C you can only write games with it for iOS and the Mac.

Wouldn't it be great if you could use the same easy to use Cocos2D API, but have it run on Android as well? This way you could greatly extend the market for your app, without adding a lot of extra work!


Well, this is possible with the Cocos2D-X game framework! Cocos2D-X is a C++ port of the Cocos2D API, so you can use the API you know and love. And since it's in C++, it works on many platforms - from iOS to Android to Windows to Linux and more!

In this Cocos2D-X tutorial, you'll learn how to use Cocos2D-X and C++ to produce a cross-platform "Hello World" app that will run under both iOS and Android.

And in a few days, I'll post a follow-up Cocos2D-X tutorial that will show you a practical game example - a cross platform space shooter!

So grab your iPhone and/or Android device, and let's get started!



HELLO, COCOS2D-X FOR IOS!



Before you go any further, make sure you download the latest version of .

Unzip the file in to a folder somewhere on your hard drive. Note the full path to that folder - it will be referred as $COCOS2DXHOME.

Now that you've got the code, let's install the templates! You can do this with a script that's inside $COCOS2DXHOME. To run it, just quit Xcode, open a shell terminal and type:



cd $COCOS2DXHOME

./install-templates-xcode.sh -f -u

Note: In the above, for the first line, you need to replace $COCOS2DXHOME with the actual path to where you extracted the files. Simply typing in $COCOS2DXHOME as part of the command will do nothing.The installation will simply proceed without any further intervention from you. Once the templates are installed, run Xcode and create a New Project. You should see a new Cocos2d-x temples section in the project template dialog. Don't worry, the Cocos2d-X templates don't conflict with the classic Cocos2D templates, so you can continue to create new projects using Cocos2D, when needed.

Let's try the new templates out! Open up Xcode (4.6 if using the last version) and create a new project, selecting the iOScocos2d-xcocos2dx template:



Click Next, name the project Cocos2DxFirstIosSample, choose iPhone for Device Family, click Next and then click Create.

Now press the Run button to see the Cocos2d-x Hello World app running:



Pretty easy, eh? While you're at it, take a look at the project files in Xcode - particularly ClassesHelloWorldScene.h and ClassesHelloWorldScene.cpp. If you're familiar with Cocos2D, this should look familiar to you - the same Cocos2D API, but in C++!



SETTING UP ECLIPSE FOR COCOS2D-X DEVELOPMENT



You're now done with the Xcode setup part and you need to have a look at the Android Cocos2D-X configuration with Eclipse.

This Cocos2D-X tutorial assumes that you have a fully-functional Android Eclipse standard development environment. If you don't, follow through the tutorial first, which provides a step-by-step guide to setting up a dedicated Eclipse Android development platform.

But waitA standard Eclipse Android environment is dedicated to Java development only, and Cocos2D-X is based on C++!

Don't worry, Eclipse has been around for 10 years, so there are tons of plugins out there to extend its core functionality beyond just Java development.

This includes some plugins for C/C++ development! Let's install them now. Open up Eclipse and perform the following steps:



* From the Eclipse IDE main toolbar, go to Help/Install New Software

* Open the Work with combo box and select the item containing your Eclipse version name (Juno if using the last version of Eclipse).

* Find Programming Languages in the plugin tree (you'll only see the plugin tree if you checked the Group items by category checkbox - otherwise, you might have to search the list a bit) and check C/C++ Development Tools.

* Click Next and walk through the rest of the wizard, and wait for the components to download and install. At the end of the install process Eclipse will ask you to restart, click Yes.

* To ensure that the installation was successful, from the Eclipse IDE main toolbar, go to Help/Install New Software

* Select the already installed link and check the installation of the following components.



You will now be able to develop C/C++ projects using Eclipse!



SETUP THE ANDROID NDK (NATIVE DEVELOPMENT TOOLKIT)



Initially, Android development was done exclusively in Java, and most of the Android apps on the market today are Java-based.

However, these days you can write Android apps in C/C++ with the Native Development Toolkit (NDK)! This was introduced by Google in June 2009 as a way to allow components written in C/C++ to be accessed via the standard Java Native Interface (JNI).

Installing the NDK is straightforward:



* Download the latest version of the NDK (choose the MacOSX platform).

* Unzip the tar.bz2 file to the location of your choice. This location will be referred from now on as $NDKROOT.



The NDK brings to the Android environment a C/C++ compilation toolchain, able to cleanly compile/link (using the GCC 4.7 compiler) and build a ready-to-install APK-signed package.

Having this compilation toolchain in place allows you to integrate external C/C++ libraries (like Cocos2d-x) into Eclipse. These libraries, compiled as external dynamic libraries bound inside an APK, communicate with the "legacy Java Android architecture" though the JNI (Java Native Interface).

The compilation toolchain can be used in two ways :



* Standalone mode: uses the arm-linux-androideabi-g++ directly in your custom make file. This will increase your project complexity/maintainability. I recommend you avoid this mode unless you have no alternative.

* Integrated mode: uses the $NDKROOT/ndk-build shell tool, which is a highly-customized make file dedicated to NDK library builds. This is the preferred way to go and the mode you will use in this Cocos2D-X tutorial.



Explaining the JNI and NDK would take too long, and is out of the scope of this Cocos2D-X tutorial. There is a lot of documentation about JNI available on the web. The only book seriously covering this topic is available for free .

If you need more information about the NDK, there is a very good book available that covers NDK C/C++ development: by Sylvain Ratabouil. This book covers NDK programming in depth and should rather be called "From Beginner to Expert."

The NDK itself also comes with very detailed documentation, located under $NDKROOT/docs.



HELLO, COCOS2D-X FOR ANDROID!



Now let's do a "Hello, World" Cocos2D-X tutorial for the Android platform, just as you did for iOS.

You will need to do this via the command line, however, since there are no Cocos2D-X project templates available via the Eclipse IDE at the moment. (You know what? This would be a great open source project candidate, if you are so inclined :])

The $COCOS2DXHOME directory contains a shell script named create-android-project.sh that you will use to generate the android project.

But, before launching this shell script for the first time, you need to make a tiny customization at the top of the above file:



# set environment paramters

NDKROOTLOCAL="/home/laschweinski/android/android-ndk-r8d"

ANDROIDSDKROOTLOCAL="/home/laschweinski/android/android-sdk-linux86"

Modify these above lines so that the NDKROOTLOCAL variable points to the directory where you installed the Android NDK ($NDKROOT) and ANDROIDSDKROOTLOCAL points to the place where you installed the Android SDK.

Now run the create-android-project.sh script from the command line and you will get several prompts as to various input values. These prompts will ask you to provide the below information:



* The first prompt will ask you for the "Input package path". This is the package name that will be used for java code production. You can use reversed domain notation here (similar to an iOS bundle ID) - something like com.yourdomain.samplecocos2dxandroid (remember to replace com.yourdomain with the reverse domain notation for your actual domain)

* Next, you will get a list of available Android APIs and their ids. Depending on what's installed on your machine, the list will vary. But the prompt at this stage simply asks for the Android API level your app will support and you can use the id for the last item on the list that's a Google API.

* Finally, you have to provide the project name. Call it samplecocos2dxandroid.



The command-line output from the above process will look something like the following:



bash-$ ./create-android-project.sh

Input package path. For example: org.cocos2dx.example

org.jymc.samplecocos2dxandroid

Available Android targets:

id: 25 or "Google Inc.:Google APIs:17"

Name: Google APIs

Type: Add-On

Vendor: Google Inc.

Revision: 2

Description: Android + Google APIs

Based on Android 4.2.2 (API level 17)

input target id:

25

input your project name:

samplecocos2dxandroid

Created project directory:

/Users/jymen/development/cocos2dx/samplecocos2dxandroid/proj.android

Added file /Users/jymen/development/cocos2dx/samplecocos2dxandroid/AndroidManifest.xml

Added file /Users/jymen/development/cocos2dx/samplecocos2dxandroid/build.xml

Added file /Users/jymen/development/cocos2dx/samplecocos2dxandroid/proguard.cfg

bash-$

Pay attention to the Created project directory: line towards the end of the script output. That's where your Android project has been created by the script. The project location (/Users/jymen/development/cocos2dx/samplecocos2dxandroid in the above example) will be referred as $PROJECTHOME from now on.

Note: Do not try to move the project from that location to a different location. At least one of the scripts you'll work with in the next section will not work if you do.



BUILDING THE PROJECT



There are two steps to building the project - compiling the C++ code with a command line script, and compiling the Java code with Eclipse.

But, before compiling, you need to define NDKROOT parameter so it points to your $NDKROOT directory. Open the $PROJECTHOME/proj.android/buildnative.sh shell script and add the following line at the top of the file:



# paths

NDKROOT="/home/laschweinski/android/android-ndk-r8d"

Modify the above line so that the NDKROOT variable points to the directory where you installed the Android NDK ($NDKROOT).

To compile the C++ code, switch to the $PROJECTHOME/proj.android folder via the command-line and issue the following command:



Note: If at this point you are getting the message "please define NDKROOT" you must ensure that you specified correctly the root to your Android NDK directory in the above step. You should see some output similar to the following in response to the above command:



Gdbserver : [arm-linux-androideabi-4.4.3] libs/armeabi/gdbserver

Gdbsetup : libs/armeabi/gdb.setup

Compile++ thumb : cocos2d
Full Post

No comments:

Post a Comment