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:

?

1 2 3 4 5 6 7 8 9

> 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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160

#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<std::string> resDirOrders;       TargetPlatform platform = CCApplication::sharedApplication()->getTargetPlatform();     if (platform == kTargetIphone || platform == kTargetIpad)     {         std::vector<std::string> 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(); } </std::string></std::string>

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:

?

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

and line:

?

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

replace with:

?

1	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!