How to create multiplatform Cocos2d-x-JSB project with CocosBuilder, Eclipse ADT and XCode on Mac?

Welcome to the Galante Games devblog! We will post game development-related topics here. Hope you’ll find this useful and please feel free to comment and/or contact the team.

Today I'll show you how to create Cocos2d-x-JSB (ver. 2.2.3) project which you will be able to run both on Android and iOS devices.

0. Prerequisites (you will need):

• CocosBuilder (If you are new with CocosBuilder, try this great tutorial)
• Eclipse ADT with Android SDK
• Android NDK ver r8e
• XCode

1. Creating new project:

> cd DEV/cocos2d-x-2.2.3/tools/project-creator/
> ./create_project.py -project FindOut -package com.GalanteLabs.FindOut -language javascript
proj.ios                : Done!
proj.android            : Done!
proj.win32              : Done!
New project has been created in this path: /Users/tobiasz/DEV/cocos2d-x-2.2.1/projects/FindOut
Have Fun!
> cd ../../projects/FindOut/
> rm -rf Resources/

2. New CocosBuilder project:

• File > New > Project
• go to the "projects" folder in your COCOS2DX_HOME location
• enter the same project name as before
• click Save and next Replace

3. CocosBuilder project configuration:

• first create 4 folders in Resources dir in our project: interface, images, js, sounds
• File > Project Settings
• remove Resources dir from list
• add 4 created folders in this order: interface, js, images, sounds
• Done

4. CocosBuilder publishing configuration:

• File > Publish settings
• in iOS section unmark iPad
• mark section Android and next medium field
• unmark section HTML5
• Done

5. AppDelegate.cpp configuration:

• modify AppDelegate.cpp file located in Classes folder:

#include "AppDelegate.h"

#include "cocos2d.h"
#include "SimpleAudioEngine.h"
#include "ScriptingCore.h"
#include "generated/jsb_cocos2dx_auto.hpp"
#include "generated/jsb_cocos2dx_extension_auto.hpp"
#include "jsb_cocos2dx_extension_manual.h"
#include "cocos2d_specifics.hpp"
#include "js_bindings_chipmunk_registration.h"
#include "js_bindings_system_registration.h"
#include "js_bindings_ccbreader.h"
#include "jsb_opengl_registration.h"
#include "XMLHTTPRequest.h"
#include "jsb_websocket.h"

USING_NS_CC;
using namespace CocosDenshion;

AppDelegate::AppDelegate()
{
}

AppDelegate::~AppDelegate()
{
    CCScriptEngineManager::purgeSharedManager();
}

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

    CCSize designSize = CCSizeMake(480, 320);
    CCSize resourceSize = CCSizeMake(480, 320);
    CCSize screenSize = CCEGLView::sharedOpenGLView()->getFrameSize();

    std::vector resDirOrders;

    TargetPlatform platform = CCApplication::sharedApplication()->getTargetPlatform();
    if (platform == kTargetIphone || platform == kTargetIpad)
    {
        std::vector searchPaths = CCFileUtils::sharedFileUtils()->getSearchPaths();
        searchPaths.insert(searchPaths.begin(), "Published-iOS");
        CCFileUtils::sharedFileUtils()->setSearchPaths(searchPaths);

        if (screenSize.height > 768)
        {
            resourceSize = CCSizeMake(2048, 1536);
            resDirOrders.push_back("resources-ipadhd");
        }
        else if (screenSize.height > 640)
        {
            resourceSize = CCSizeMake(1024, 768);
            resDirOrders.push_back("resources-iphonehd");
        }
        else if (screenSize.width > 960)
        {
            resourceSize = CCSizeMake(1136, 640);
            resDirOrders.push_back("resources-iphonehd");
        }
        else if (screenSize.width > 480)
        {
            resourceSize = CCSizeMake(960, 640);
            resDirOrders.push_back("resources-iphonehd");
        }
        else
        {
            resDirOrders.push_back("resources-iphone");
        }
    }
    else if (platform == kTargetAndroid || platform == kTargetWindows)
    {
        if (screenSize.width > 920)
        {
            resourceSize = CCSizeMake(800, 480);
            resDirOrders.push_back("resources-medium");
        }
        else if (screenSize.width > 720)
        {
            resourceSize = CCSizeMake(800, 480);
            resDirOrders.push_back("resources-medium");
        }
        else
        {
            resourceSize = CCSizeMake(720, 480);
            resDirOrders.push_back("resources-medium");
        }
    }

    CCFileUtils::sharedFileUtils()->setSearchResolutionsOrder(resDirOrders);

    pDirector->setContentScaleFactor(resourceSize.width/designSize.width);

    CCEGLView::sharedOpenGLView()->setDesignResolutionSize(designSize.width, designSize.height, kResolutionFixedWidth);

    // 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);

    ScriptingCore* sc = ScriptingCore::getInstance();
    sc->addRegisterCallback(register_all_cocos2dx);
    sc->addRegisterCallback(register_all_cocos2dx_extension);
    sc->addRegisterCallback(register_all_cocos2dx_extension_manual);
    sc->addRegisterCallback(register_cocos2dx_js_extensions);
    sc->addRegisterCallback(register_CCBuilderReader);
    sc->addRegisterCallback(jsb_register_chipmunk);
    sc->addRegisterCallback(jsb_register_system);
    sc->addRegisterCallback(JSB_register_opengl);
    sc->addRegisterCallback(MinXmlHttpRequest::_js_register);
    sc->addRegisterCallback(register_jsb_websocket);

    sc->start();

    CCScriptEngineProtocol *pEngine = ScriptingCore::getInstance();
    CCScriptEngineManager::sharedManager()->setScriptEngine(pEngine);
    ScriptingCore::getInstance()->runScript("main.js");

    return true;
}

void handle_signal(int signal) {
    static int internal_state = 0;
    ScriptingCore* sc = ScriptingCore::getInstance();
    // should start everything back
    CCDirector* director = CCDirector::sharedDirector();
    if (director->getRunningScene()) {
        director->popToRootScene();
    } else {
        CCPoolManager::sharedPoolManager()->finalize();
        if (internal_state == 0) {
            //sc->dumpRoot(NULL, 0, NULL);
            sc->start();
            internal_state = 1;
        } else {
            sc->runScript("hello.js");
            internal_state = 0;
        }
    }
}

// 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();
    SimpleAudioEngine::sharedEngine()->pauseBackgroundMusic();
    SimpleAudioEngine::sharedEngine()->pauseAllEffects();
}

// this function will be called when the app is active again
void AppDelegate::applicationWillEnterForeground()
{
    CCDirector::sharedDirector()->startAnimation();
    SimpleAudioEngine::sharedEngine()->resumeBackgroundMusic();
    SimpleAudioEngine::sharedEngine()->resumeAllEffects();
}

6. Publishing our project with CocosBuilder:

• Come back to CocosBuilder and press File > Publish

7. Android (Eclipse ADT):

• File > Import > Android > Existing Android Code Into Workspace > Next
• Browse > select COCOS2DX_HOME location
• Select created project and libcocos2dx project > Finish
• Expand your project in project explorer view and 2x click on "build_native.sh" to edit it
• Add path to Android NDK in second line in file:

NDK_ROOT="/Users/tobiasz/DEV/android/android-ndk-r8e"

and line:

cp -rf "$APP_ROOT"/Resources/* "$APP_ANDROID_ROOT"/assets

replace with:

cp -rf "$APP_ROOT"/Published-Android/* "$APP_ANDROID_ROOT"/assets

• Next connect Android device to your Mac and click on your project > Run as > Android Application. Build and run. First compilation may take from 5 to 10 minutes so be patient :)

8. iOS (XCode):

• open project proj.ios/FindOut.xcodeproj with XCode
• remove unused references from Resources dir

• drag Published-iOS dir from your CocosBuilder project location to this XCode project. Select option "Create folder references...".

• it should look like this:

• Build and run! :)

Finished! Now you can continue developing your first own game with Cocos2dx :)

To be up to date with our posts and apps, please follow us on Facebook and Twitter.

Check out our games!