Building Android Games with Cocos2d-x

You can download Android SDK from the link: http://developer.android.com/sdk. At the bottom of the page, under Other Download Options, you will find the option for downloading the SDK tools. Choose the version that matches your operating system.

At the time of writing this book, the latest version of SDK was 24.0.2.

Run the Android SDK Installer and install the Android SDK on your computer.

When the Android SDK finishes installing, it is not yet ready to build the Android apps. So, at the final screen of the installation wizard, mark the checkbox for Start SDK Manager so you can download the required components for building your games, as shown in the following screenshot:

Once the Android SDK Manager starts, select Android SDK Platform-tools and Android SDK Build-tools from the Tools folders. Then select SDK Platform from your desired API level, as shown in the following screenshot:

Download the latest version of the Eclipse IDE for Java Developers from http://www.eclipse.org/downloads. It will suggest the download versions compatible with your current operating system, select the version that better suits your operating system platform which will either be 32-bit or 64-bit.

At the time of writing this book, Eclipse Luna (4.4.1) was the latest version.

Open Eclipse and navigate to Help | Install new Software and add the Eclipse ADT download location, which is https://dl-ssl.google.com/android/eclipse/, as shown in the following screenshot:

Click on OK, then select the Developer Tools checkbox, and click on Next in order to finish the ADT installation wizard.

Now, Cocos2d-x is set up, and it is ready for creating your first project. You can do so by typing the following command:

 cocos new MyGame -p com.your_company.mygame -l cpp -d NEW_PROJECTS_DIR

This script has created an Android template code for your game that will run in all the Android devices containing the Android API 9 or higher, that is Android 2.3 (Gingerbread) and later.

Take in to consideration that the package name should contain exactly two dots, as the example shows, if it has less or more, then the project creation script will not work. The –l cpp parameter means that the new project is going to use C++ as the programming language, which is the only one that is covered in this book.

Cocos2d-x 3.x, as opposed to branch 2.x, allows you to create your project outside of the framework directory structure. Therefore, you can create your project at any location, and not just inside the projects directory, as it was in the previous versions.

It will take a while, since it will copy all the framework files to your new project's path. After it finishes, plug your Android device to your computer, then you can easily run the template HelloWorld code by typing the following command within your new project's path:

cocos run -p android

Alternatively, you could run the following command regardless of your current path on the terminal:

cocos run -p android /path/to/project

Now, you should be able to see the Cocos2d-x logo and a text that says Hello World, as we can see in the following image:

Cocos2d-x branch 3 has improved the Android building process significantly.

Back in branch 2, it was necessary to manually configure many environment variables within IDE, import many core projects, and handle dependencies. Even after completing all the steps, the Cygwin Windows UNIX port integration with Eclipse was never polished to work flawlessly, so minor hacks were required.

Building Cocos2d-x 3.4 within Eclipse is as simple as importing the project and clicking on the Run button. In order to achieve this, within the ADT, navigate to File | Import | General | Existing Projects into Workspace, select the path, where Cocos2d-x has created the new project from the previous sections. Then click on Finish.

Now, right-click on the project name in the package explorer, click on run as, and finally, click on Android Application. The following pop up will be displayed, and it will require you to specify the Android device on which you want to launch the Cocos2d-x game:

After picking your Android device, you will see the HelloWorld game scene as it was shown when we ran the Run command in the previous section.

We now have one Java class in our project named AppActivity that has no members and extends the Cocos2dxActivity class from the core library. We can also see that 22 Java classes from the core library have been referenced in the project. This code is aimed to make our C++ code work, and we don't have to modify it at all.

The generated AndroidManifest.xml, which is the android configuration file, requires the permission android.permission.INTERNET, which allows your Android application to use the Internet connection on your device; nevertheless, this is not needed by our simple game code since there is no Internet interaction. So, you may delete this line from the AndroidManifest.xml file if you wish. Your game will be shown in landscape by default, but if you wish to create a game that runs in portrait mode, then you should change the android:screenOrientation value from landscape to portrait.

In order to change the Android application name, you may modify the app_name value located on the strings.xml file; it will affect the launcher icon's text and the application identifier within the Android OS.

When you are creating your own games, you will have to create your own classes, and those will often be more than the two classes that were created by the script. Every time you create a new class, you need to add its name to the LOCAL_SRC_FILES property of the Android.mk make file located inside the jni folder of your new project directory structure. So, when your cpp code is built by the C++ build tools, it knows which files it should compile.

Two C++ classes have been created: AppDelegate and HelloWorldScene. The first one is in charge of launching the Cocos2d-x framework and passing the control to the developer. The framework loading process happens within this class. If the Cocos2d-x core framework is successfully launched on the target device, it will run the applicationDidFinishLaunching method, which is the first game-specific function to be run.

The code is very straightforward and it is documented such that you will be able to grasp its logic easily. Our first minor change to the code will be to hide the debug information that shows by default on this sample game. You could simply guess that in order to achieve this you should only send false as a parameter for the setDisplayStats method call in the director singleton instance, as we can see in the following code listing:

bool AppDelegate::applicationDidFinishLaunching() {
    // initialize director
    auto director = Director::getInstance();
    auto glview = director->getOpenGLView();
    if(!glview) {
        glview = GLViewImpl::create("My Game");
        director->setOpenGLView(glview);
    }
    // turn on display FPS
    director->setDisplayStats(false);
    // set FPS. the default value is 1.0/60 if you don't call this
    director->setAnimationInterval(1.0 / 60);
    // create a scene. it's an autorelease object
    auto scene = HelloWorld::createScene();
    // run
    director->runWithScene(scene);
    return true;
}

As we will cover in the chapters later in this book, Cocos2d-x handles the scene concept just like movies; movies are composed by scenes, so are the Cocos2d-x games. We can visualize the different screens, such as loading, main menu, world selection, gameplay levels, ending credits, and so on, as the different scenes. Each scene has a class that defines its behavior. The template code has only one scene named HelloWorld scene that is initialized and launched from within the AppDelegate class. The scene flow is managed by the game director as we have seen in the previous code. The Director class has all the basic features to drive the game, just like a director does during a movie. There is a single shared instance of the director class that is used within the whole application scope.

HelloWorldScene contains the layer that represents all the visible areas that show up when we run our HelloWorld application, that is, the hello world label, the Cocos2d-x logo, and the menu showing the exit option.

Within the init method, we do the instantiation of the visual elements, and then we add it to the scene using the addChild method inherited from the Node core class.