快速入门cocos2d-x jsbinding

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

如果你是一个cocos2d-x的老手，那你可以忽略这篇博文，如果你是一个接触过javascript，想通过HTML5做游戏的，但是苦于不知道如何下手，那么这篇博文可能会帮到你。

cocos2dx-jsb的主要运用的语言是javascript，其实简单的说jsb就是cocos2d-x提供的C++ -> javascript的一系列接口，通过编写js的脚本来调动C++的接口做一系列的动作。实际的运行顺序是:js执行接口->spidermonkey解析js，判断调用了哪个C++接口->执行2dx的相应的接口->opengl 渲染... 知道了这个顺序以后，关键是怎么来写js呢？那下面来认识下cocos2d-html5

Cocos2D-HTML5是基于HTML5规范集的Cocos2D引擎的分支，于2012年5月发布,到现在差不多有1年多了，功能，API已经趋向于稳定，基本上每个月都有大的版本迭代更新，现在同时支持canvas和webgl渲染，有些功能比如批渲染，这个canvas是不能做的，如果浏览器支持webgl就可以运行。cocos2d-html5的API是向下兼容jsb的，也就是说有些api在jsb里面是执行不了的，但是90%以上的canvasAPI都是一致的，这一块的话jsb开发者和cocos2d-h5开发者两边都在不断的同步。绝大部分常用的API都是足够使用的，等熟悉了这两个框架以后就可以做到用cocos2d-h5在浏览器中调试一遍，然后在用jsb在手机上运行是一样的效果，也就是我们所说的一套代码，跨平台运行。但是要达到这样一个效果，需要了解这两个框架，了解的越深入，碰到问题处理起来越是游刃有余。

coding的最好的学习就是实践，jsb入门可以先从cocos2d-h5入门做起，首先需要配置一下web开发环境，这个比手机开发环境搭建简单多了，你需要一个web服务器，apache或者tomcat都可以（个人推荐apache）,一个chrome最新的浏览器(当然firefox也可以，chrome调试，性能最好),然后从cocos2d-x官网(http://www.cocos2d-x.org/)中下载最新的cocos2d-h5压缩包，解压以后放到apache或者tomcat对应的资源目录下面，然后输入URL指向到cocos2d-h5包里面对应的index.html,如果没有什么问题的话就可以看到cocos2d-h5的页面了，到此你已经完成了h5环境的搭建，如果你对此还有疑问，可以看官方的详细H5入门上手说明 http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Getting_Started_with_Cocos2d-html5。

如果你完成了上述HelloWorld的创建后，那就可以试着创建jsb的环境了，mac版的ios环境和android环境都非常容易，平时开发可以用chrome浏览器跑通功能->ios模拟器验证原生环境->做完一个模块用iphone真机测试性能效率，这里重点说一下window环境，jsb的环境其实就是cocos2dx的环境，官方有一篇win7下如何配置android环境的wiki http://www.cocos2d-x.org/projects/cocos2d-x/wiki/How_to_set_up_the_android_cocos2d-x_development_environment_on_Windows_7

基本上把会遇到的问题都详细描述清楚了，除此之外官方wiki还有个问题没有写到，某些win7系统编译工程的时候会发现无法把资源目录拷贝到assets目录下面，原因是cygwin的权限不够，需要把cygwin的权限设为root权限，然后重启电脑，应该就可以了，修改cygwin Root方法请自行百度。

完成windows下面android配置后，我们用创建工程工具脚本创建一个跨平台的工程。在cygwin中执行脚本

cd /cocos2d-x/tools/project-createor/

#其中Clams是project名,com.supersell.crash是安卓中主Activity所在的package名，这两个名字都可以根据项目来改,language对应的是变成语言，jsb项目就是javascript

python create_project.py -project Clams -package com.supersell.crash -language javascript

创建完工程以后，会在cocos2d-x/projects 下面生成Clams目录，打开目录结构如下

Classes目录，存放了AppDelegate.cpp和AppDelegate.h文件这两个文件，这两个文件是项目的C++入口，jsb接口的引入，加载入口js都是在这里，具体请看

 #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());

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

 　　 // 实例化脚本核心类，这个类封装了spidermonkey的一些接口，基本上所有的js脚本处理都由这个类来执行

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

     // main.js就是js的入口文件，存放在Resources下面，换新的js需要注意路径

     ScriptingCore::getInstance()->runScript("main.js");

     return true;

 }

 void handle_signal(int signal) {

     static int internal_state = ;

     ScriptingCore* sc = ScriptingCore::getInstance();

     // should start everything back

     CCDirector* director = CCDirector::sharedDirector();

     if (director->getRunningScene()) {

         director->popToRootScene();

     } else {

         CCPoolManager::sharedPoolManager()->finalize();

         if (internal_state == ) {

             //sc->dumpRoot(NULL, 0, NULL);

             sc->start();

             internal_state = ;

         } else {

             sc->runScript("hello.js");

             internal_state = ;

         }

     }

 }

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

 }