Showing posts with label Cocos2D. Show all posts

Saturday, February 4, 2012

More advanced concepts of getting cocos2dx working on Android from Windows 7

NOTE: This tutorial was done with cocos2d-1.0.1-x-0.9.1 and cocos2d-1.0.1-x-0.11.0, and so may not be 100% accurate for either version, or newer [Had to change version in the middle of development], but will serve as a general guideline for anyone using similar versions.

First Part: Quick and dirty guide to getting cocos2dx working on Android from Windows 7

Introduction

Working from the files we obtained in the first part, in this tutorial we shall cover:

Moving android-generated folder away from the cocos2d-x folder.
Add an extra library ( Chipmunk ).
Not having to use the Classes & Resources folders.

It’s important to use the proper editing tool for the files generated by the “create-android-project.bat”, because regular windows editors add extra symbols like “\r” that will confuse your Cygwin. I recommend Notepad++. A great editor that has the invaluable property of showing hidden symbols by doing: View -> Show symbol -> Show all characters.

Moving The Folder

I generated a new project FOLLOWING THE STEPS IN THE PART ONE OF THE TUTORIAL, let’s call it FVZ, using the following specs:

Package: com.companyname.fvz
Name: FVZ_2_3
Target ID: 13 (Android 2.3.3)

And copied it from the cocos2d-x folder where it’s generated by default, to the folder where my Visual Studio solution held all my code of the project I was working on. To make this work, I had to modify:

android/build_native.sh

GAME_ROOT=/cygdrive/d/All/Proyects/FVZ/Android/FVZ_2_3
( Set the path to where we have copied the project folder, and add the /cygdrive/ in front so Cygwin can use the path ).

android/jni/Android.mk

Modify project path: addprefix $(LOCAL_PATH)/../../../../FvZv2/ to point to the root folder of the cocos2dx instaltion (where you have all the cocos2dx code, ej: cocos2dx, CocosDenshion, tests, tools…

What this does is search for all the Android.mk (makefiles) of the libraries you are going to use. (Notice the addprefix & addsufix functions, to generate the full paths).

# Try to use LOCALPATH, otherwise you’ll have to play a bit with the path till you get it to Cygwin’s liking.

android/jni/helloworld

LOCAL_SRC_FILES: Add RELATIVE path to each code file (cpp / h) in your Visual Studio project folder. The start of my list is, for example:

LOCAL_SRC_FILES := main.cpp \
../../../../../FvZv2/FvZ/Classes/AppDelegate.cpp \
../../../../../FvZv2/FvZ/Classes/AppDelegate.h \
../../../../../FvZv2/FvZ/Classes/HelloWorldScene.cpp …

LOCAL_C_INCLLUDES: Change Classes path to the folder where you keep all your code, and set the paths for the different cocos folders so they point to the required folders.
LOCAL_LDLIBS: Point the $(LOCAL_PATH)/../../libs/$(TARGET_ARCH_ABI)) to the proper location (TARGET_ARCH_ABI is usually armeabi).

andoid/build_native.sh

Change GAME_ROOT so it points to the root of your game folder, in my case:
GAME_ROOT=/cygdrive/d/All/Proyects/FVZ/Android/FVZ_2_1

With all that your project should compile with no problems using Cygwin. As a special note, I made a java script to parse my Classes folder, to generate my LOCAL_SRC_FILES paths, as there where hundreds of files, in nested folders and so on. Sharing it here:

Code Snippet
 import java.io.File;
 
 
public class ListFiles 
{
    static String initialPath = "D:\\All\\Proyects\\FvZ\\FvZv2\\FvZ\\Classes";
 
    public static void main(String[] args) 
    {
        FileTreePrint("");
    }
    
    private static void FileTreePrint(String path)
    {
        String files;
        File folder = new File(initialPath + path);
        File[] listOfFiles = folder.listFiles(); 
 
        for (int i = 0; i < listOfFiles.length; i++) 
        {
            if (listOfFiles[i].isFile()) 
            {
                files = listOfFiles[i].getName();
                System.out.println("../../../../../FvZv2/FvZ/Classes"+ path.replace("\\", "/") + "/" +files+ " \\");
            }
        }
        
        for (int i = 0; i < listOfFiles.length; i++) 
        {
            if (listOfFiles[i].isDirectory()) 
            {
                FileTreePrint(path + "\\" +listOfFiles[i].getName());
            }
        }
    }
}
 

Adding Chipmunk to the Compilation

We need to modify some files, but it’s a straightforward process if we take another library (CocosDenshion) as a guideline.

android/jni/Android.mk

Add “chipmunk \” in the line under CocosDenshion/android.

android/jni/Application.mk

My APP_MODULES looks like:
APP_MODULES := cocos2d cocosdenshion chipmunk game

android/jni/helloworld

LOCAL_C_INCLLUDES: Add the path to the chipmunk folder that holds all the files, in my case:
$(LOCAL_PATH)/../../../../../FvZv2/chipmunk/include/chipmunk \
In LOCAL_LDLIBS add –lchipmunk

Lastly, there is one extra modification to be done, that took me quite a while. In the main java file of the .java files generated for your project (in my case FVZ_2_3.java) we need to search for where it does System.loadLibrary(), and add:

System.loadLibrary("chipmunk");

Automating the Process

The first thing you will notice with this system is that it’s SLOW. We have have to use the command line every time we want to compile, not to mention that this method copies all the resources of the game from the Resources folder to the assets one each time, which can be very time consuming.

So let’s optimize it a bit.

Making the resource load faster

Grab your build_native.sh and clean out all the logic for cleaning the resource folder, leaving it like this:

Code Snippet
 # set params
ANDROID_NDK_ROOT=/cygdrive/c/eclipse/android/android-ndk-r6b
GAME_ROOT=/cygdrive/d/All/Proyects/FVZ/Android/FVZ_2_1
GAME_ANDROID_ROOT=$GAME_ROOT/android
 
# build
$ANDROID_NDK_ROOT/ndk-build -C $GAME_ANDROID_ROOT $*
 

What is going to happen now is that you’re going to have to remember to manually copy each modified asset from your MVS project to the assets folder of the java project. A small price to pay for compiling in 10 seconds instead of 1 minute.

So go ahead and copy all your resources to the assets folder. Once you’re done…

One Click Process

I created a batch file to be called with a simple double click, that calls cygwin and gets the whole compilation process done. After double clicking on it you just need to refresh the java project in eclipse (F5) and hit “run” to have the game showing in your android. Here is the magical .bat:

Code Snippet
 C:\cygwin\bin\bash.exe -l '/cygdrive/d/All/Proyects/FvZ/Android/FVZ_2_1/android/build_native.sh' 
pause
 

Created this Compile.bat thanks to http://forums.techguy.org/windows-xp/424616-calling-unix-scripts-dos-script.html and http://old.nabble.com/Cygwin---batch-file-td15088393.html .

Conclusion

Now you should be able to put your folder wherever you damn well please, add other libraries to it and compile by:

Compiling in MVS by hitting F5 (to check it works)
Compiling in native code by double clicking Compile.bat
Running the game in android by hitting F5 in eclipse, and then “run”.

Tell me if it worked for you!

Friday, September 30, 2011

Quick and dirty guide to getting cocos2dx working on Android from Windows 7

Second Part: More advanced concepts of getting cocos2dx working on Android from Windows 7

This guide builds on the official guide for setting up Cocos2d-x on the Android Phone with additional explanations in the sections where the original one is outdated, incomplete or ambiguous, so hopefully no one else has to make the same mistakes I did.

First a general overview of what has to happen to see your precious game on the android phone. You create a Visual Studio project from a cocos2dx template and set it up to work with cocos2dx. Once you've got your game running and ready to test on the phone, you use a .bat file provided in the cocos2dx download to create a default android project from the "HelloWorld" project it comes with. In this new folder it creates in the android root, you override the existing classes and resources with the ones from your project, and you make sure they are in the makefile. Then you use Cygwin to compile everything into native code, and finally you create a new android project in eclipse, import the code you compiled and hopefully have it work in the phone.

It's a non-trivial process, but not that hard either, and the people at Cocos2dx have made quite an effort to get this working as it is. So, step by step.

Step by Step

Step 1: Get all the android material

Download android sdk, install it and test it in eclipse. This is a well-documented process in the android sdk website.
If you have an Android phone to test on, set it up for development and try a test application in it.
Download the android ndk and extract it to a folder with no spaces in the path.

Step 2: Get all the cocos2dx material

Download the latest version of cocos2d-x and set it up for win32 development as stated here. Download Cygwin and make sure you mark the "Devel" branch as "Install" when you download it.

Step 3: Get the create-android-project.bat working

From the original tutorial:

To adapt to my environment, I change the settings in create-android-project.bat.
set _CYGBIN=C:\cygwin\bin
The path of cygwin bin
set _ANDROIDTOOLS=D:\anroid\android-sdk-windows\tools
The path of android sdk tools
set _NDKROOT=D:\anroid\android-ndk-r5b
The root of ndk

Step 4: Creating the project

Now we create our Cocos2d-win Application form the MVS templates. If this template is not available, go back and check you did step 2 correctly. You can create this project wherever you want. For the sake of brevity, let’s assume you are creating a Pong game, and aptly name your project “Pong”. While following the cocos2dx creation template unmark every cocos2d library except Simple Audio Engine in Cocos Denshion.

Next up we need to add 3 things to make the Pong project reach the cocos2dx files it needs. Include the source files, link the library files, and copy the dll files. To make this process easier create an environment variable with the root of your cocos2dx installation. I call mine COCOS2DX and it’s defined as C:\eclipse\android\cocos2d-1.0.1-x-0.9.1\cocos2d-1.0.1-x-0.9.1.

NOTE: If you modify this variable, or any other, and want to use it from visual studio, you need to restart visual studio.

Step 4.1: Include the source files

Inside Visual Studio, with your Pong project open, right click on the project and select Properties. At the top make sure you select “Configuration: All Configurations”, otherwise you’ll have to repeat the whole process for the each configuration you’ve got (usually just debug and release).
Go to C/C++ / General /Additional Include Directories, there your template should have 9 includes already. Something like this:

.;
.\win32;
.\Classes;
..\cocos2dx;
..\cocos2dx\include;
..\cocos2dx\platform;
..\cocos2dx\platform\third_party\win32\OGLES;
..\CocosDenshion\Include;
%(AdditionalIncludeDirectories)

The first 3 you can leave as-is, because they reference the project locally (including what’s in the project folder and in the win32 and classes folders. As you need these files, all is good. The next 5 however, all the ones that start with “..\cocos2dx”, assume you’re in the root cocos2dx folder. So we just correct this using our COCOS2DX environment variable.

.;
.\win32;
.\Classes;
$(COCOS2DX)\cocos2dx;
$(COCOS2DX)\cocos2dx\include;
$(COCOS2DX)\cocos2dx\platform;
$(COCOS2DX)\cocos2dx\platform\third_party\win32\OGLES;
$(COCOS2DX)\CocosDenshion\Include;
%(AdditionalIncludeDirectories)

To be honest, I don’t quite know what the AdditionalIncludeDirectories are, so I just leave it there.
With this however, your project knows where the cocos2dx files it needs are.

Step 4.2 : Adding the libraries

You need the .lib files that where created by compiling the cocos2d-win32.vc2010.sln, all the way back at step 2. We are going to store them locally for clarity, though you could just modify the linker path using our COCOS2DX variable.

In the Pong folder, next to the Classes and Resource folders, we create a Libs folder, and inside put two subfolders, Debug and Release.
Next we copy all the .lib files from our COCOS2DX/Debug.win32 and COCOS2DX/Release.win32 folders to the Debug and Release folders respectively.

Inside Visual Studio, with your Pong project open, right click on the project and select Properties. At the top make sure you select “Configuration: All Configurations”, otherwise you’ll have to repeat the whole process for the each configuration you’ve got (usually just debug and release).
Go to Linker / General / Additional Library Directories and you should find something like:

$(OutDir);
%(AdditionalLibraryDirectories)

We need to add the library path, so we make it:

$(OutDir);
$(SolutionDir)\Pong\Libs\$(Configuration);
%(AdditionalLibraryDirectories)

As long as you only have Debug and Release configurations this should work fine. Visual will go to Pong/Libs/Debug or Pong/Libs/Release and get the .lib files from there when needed. If you add more configurations, make sure to add the appropriate folder to Libs. If your project is not named Pong, modify the path accordingly.
Right now it should let you compile the project without errors but not run it. We’re missing the dlls.

Step 4.3: Adding dlls

First build your application both in release and in debug. This should create in your visual studio project debug and release folders with an executable called Pong.exe, and maybe a few other things.

Go back to the COCOS2DX/Debug.win32 and COCOS2DX/Release.win32 folders and fish out all the .dll files copying them to the Debug and Release folders in your Pong project folder respectively.
There. You should be able to build and run, seeing your project on a small window.

Step 5: Use the .bat to create an android project

This is pretty well covered in the original tutorial. Click the create-android-project.bat and fill out the package path (org.cocos2dx.Pong in our case) and the name (Pong) and finally the version to compile to (a list of versions should appear in screen).

NOTE: This step is irrelevant of your visual studio project, you don’t need to copy your Pong visual studio project to the cocos2dx root or anything. The .bat creates a folder all by itself.

Step 6: Fill in the meat

This is the step that really had me stumped until I asked in the forums. The .bat creates a new project based on the HelloWorld example in the root directory, so if you just run the bat and continue to the next step, in the end you’ll have the HelloWorld project in your phone instead of the Pong game.

Once you have the Pong folder created by the .bat in the root cocos2dx folder, you need to copy the content of your Classes folder in your visual studio Pong project to the cocos2dx Pong Classes folder, substituting the contents, and do the same with the Resources folder.

Now the files are in the appropriate place, but we still need to tell tel the makefile to take them into consideration when compiling, so we go to COCOS2DX\Pong\android\jni\helloworld\Android.mk and modify the makefile. You’ll notice that near the top of the file there is a LOCAL_SRC_FILES that already includes the path of the main.cpp and the 2 HelloWorld project files. Leave the main but override the rest so it has the paths of the files you added.

In my case:
LOCAL_SRC_FILES := main.cpp \
../../../Classes/AppDelegate.cpp \
../../../Classes/Elements/Ball.cpp \
../../../Classes/Elements/Stick.cpp \
../../../Classes/Scenes/PlayScene.cpp \
../../../Classes/Scenes/TitleScreen.cpp

Step 6: Run Cygwin to compile

Just like the original tutorial explains

Step 7: Create a project in eclipse and import the Pong project

Just like the original tutorial explains.

Second Part: More advanced concepts of getting cocos2dx working on Android from Windows 7

Wednesday, June 10, 2009

Cocos2D iPhone Research

Cocos2D is one of the top choices when choosing an iPhone game development engine, THE top choice if you're looking for something free. Works great in 2D and has one of the best scene graphs I’ve seen out there.

First up, a list of interesting links to guide the efforts of the aspiring Cocos2D programmer.

For starters, here is monoclestudios. This company decided to give a little bit back to cocos2D, as a thanks for using it for one of their games writing a walk trough that explains how to get a Cocos2D project working.

Once you've got that over with, you still need some preparation before heading on the path to adding cocos2D to your basic arsenal. The class hierarchy of the documentation must be read carefully to get a general idea of the engine works. Making your synapses comprehend the connections between the different classes will give you a good foothold.

With that bit of theory as reference, you can now enjoy the wonderful article written by Will Larson, showing the idea of how to work with the basic pillars of Cocos2D. After that one, you should have enough idea of the engine to draft a basic game architecture.

What our life needs right now, apart of a nice cup of coffee, is a step-by-step, code spiced, dummy game, to show how everything actually works, and to provide some working code for us to play with. Start reading those articles from the bottom, you won't be disappointed. Of special interest, I would point out the detection of user input, physics with chipmunk and a custom made particle effect in that series of tutorials.

That's about it! With that nice collection you can get well on your way with your iPhone game coding skills.

Code hard and have fun!