cocos - js (v3.12) 搭建技术文章

下载必备的软件包

1. 下载并安装WebStorm7。​​WebStorm7​​目前的稳定版本是7.0.3。为什么我们选择WebStorm？因为它提供了许多功能，如JavaScript代码的语法完成，调试，语法高亮，版本系统集成等，你可以去WebStorm的更多信息的官方网站。
2. 从Cocos2d-x的官方网站下载Cocos2D-JS 3.0alpha版本。​​点此处下载​​。当你下载了的Cocos2D-JS 3.0alpha版本。你应该把它解压缩到一个合适的位置。在我们的例子中，我把它解压在​​~/work/cocos2d-js-v3.0-alpha2​​. ​​~​​代表你的主目录路径，这在我们的例子中是 ​​/Users/linshun​​。

注意：

你也可以通过GitHub上得到的Cocos2D-JS的前沿版本。这里是的​​Cocos2D-JS GitHub的版本库​​​，最新的开发工作在​​develop​​分支。

1. 下载并安装Chrome34和​​JetBrains-IDE-support​​扩展。

好吧，让我们来看看如何配置WebStorm7开发和调试我们的Cocos2D-JS应用。

如何创建新工程

Cocos2d-JS 提供了一个控制台工具，使​​CH5​​和​​JSB​​应用程序的开发更加简单和方便得多。你可以使用它来创建一个新的项目，其发布到Android，iOS，Mac OS或web，它是非常容易使用。

安装Console工具

第一步，在你使用该工具前需要先安装。 请克隆 Cocos2d-JS仓库并跟新所有子模块。在Cocos2d-JS文件夹下打开控制台工具(console)，然后在控制台上运行./setup.py。在安装期间你可能需要提供你的 NDK, Android SDK 和 ANT的路径。 注意该工具是使用python开发的，所以你需要在你的机子上安装python 2.7.5或以后的版本(但是不支持 python3)。

**注意： ** 请执行 ​​source ~/.bash_profile​​，使环境设置立即生效。

创建新工程

// 创建一个包含 Cocos2d-x JSB 和 Cocos2d-html5 工程:
cocos new -l js

// 创建一个仅包含 Cocos2d-html5 的工程:
cocos new -l js --no-native

// 在指定的目录创建一个指定名字的工程:
cocos new projectName -l js -d ./Projects

在这个教程中，我们使用 ​​cocos new -l js​​

运行该工程

• 使用Websever 运行 Cocos2d-JS 工程

cd ~/work/MyJSGame
cocos run -p web

• 使用Cocos2d-x JSB 编译并运行项目

cd ~/work/MyJSGame
cocos compile -p ios|android|mac
cocos run -p ios|android|mac

• 有用的参数

-p platform : 平台可以是 ios|mac|android|web.
-s source : 你的工程目录, 如果不指定当前目录会被使用.
-q : 静默模式, 移除日志消息.
-m mode : debug 或 release 模式, 默认是debug
--source-map: 普通的 source-map 文件. (仅针对Web 平台)

配置WebStorm 进行Cocos2d-JS开发

首先，你应该启动WebStorm7。如果这是你第一次启动WebStorm，它会要求你选择你的个人偏好，比如选择键盘映射。

这是我的WebStorm启动截图：

图1

​​​​

注意:

如果你是第一次启动WebStorm，最近打开工程部分应该为空。

现在，让我尝试用WebStorm进行Cocos2d-JS开发。

1. 打开已经创建好的项目 MyJSGame
   正如我们可以从上面的图片中看到，你应该选择

​​Create New Project from Exisiting Files​​

1. (从已存在的文件创建新项目)
   然后，它会提示你以下选项：
   图2
   ​​​​​
2. 选择

​​Source files are in a local directory, no Web server is yet configured​​

1. (源文件在本地目录，没有配置web server) 并点击

​​Next​​

1. (下一步)继续
   图3 ​​​​​
2. 在这一步，你应该展开目录树来指定你的MyJSGame源代码放的位置。当你指定了正确的目录，注意Finish按钮仍然是灰色的。
3. 现在，我们应该设置该目录为项目的

​​Project Root​​

1. (根目录)。单击项目根目录按钮，

​​Finish​​

1. (完成)按钮将激活。
   图4 ​​​​​
2. 恭喜你，你已经成功配置了webstorm 开发 Cocos2d-JS 项目。

体验 Cocos2d-JS

当你已经添加了整个的Cocos2D-JS项目目录到WebStorm7。WebStorm将解析所有的Cocos2D-JS源代码。如果你打开​​MyJSGame/src/myApp.js​​，你可以得到的准确的语法自动补全的能力。

图5 ​​​​

如果你有一个第三方JavaScript库在你的Cocos2d-JS游戏应用程序，你也可以把它添加到WebStorm库来解析并启用实时语法自动补全。

下面是说明：

(可选) 添加第三方库进行解析

1. 点击

​​Settings​​

1. (设置)按钮启动你工程的设置对话框:
   图6 ​​​​​
2. 在点击

​​Settings​​

1. (设置)菜单后，它将弹出如下的对话框:
   图7：
   ​​​​​
2. 现在你可以点击 

​​Add...​​

1. 图8 ​​​​

在WebStorm中调试Cocos2d-JS javascript

是时候学习调试Cocos2d-JS代码了。

使用JB chrome 扩展连接WebStorm 到 Chrome

1. 右键点击 

​​~/work/MyJSGame​​

1. 下的index.html文件，并选择 

​​Debug 'index.html'​​

1. 图9
   ​​​​​
2. 现在，它会自动打开你的Chrome浏览器。如果你把你的鼠标chrome上面的JB插件， 它会告诉你，它已经连接上WebStrom7.0.3：
   图10 ​​​​​

注意：

这一步很简单，一旦你已经安装了插件 - ​​“JetBrains IDE support”​​。当你单击WebStorm调试菜单，它会自动连接到浏览器。它是相当的方便啊！你也可以点击右侧Chrome浏览器的侧边栏的JB图标，它会立即把你带到WebStorm的IDE界面。

在WebStorm中调试javascript代码

返回到WebStorm界面，并双击 ​​MyJSGame/src/myApp.js​​

1. 设置断点。用鼠标右键单击myApp.js源代码视窗左边的侧栏。
   图11
   ​​​​​
2. 开始调试。 WebStorm会自动启动你的chrome浏览器，并运行示例项目。然后通过点击JB图标回到你的WebStorm。程序将停止在我们刚才设置的断点处。且编辑器将切换到Debug视图：
   图12
   ​​​​​
3. 现在你可以做调试之类的事情，单步跳出，单步进入入，单步跳过，继续执行等。

总结

在本教程中，向你展示了基本的步骤来配置WebStorm7进行Cocos2d-HTML5的开发工作，包括配置语法感知自动补全和调试。过程是相当简单明了。如果你对这个教程有任何疑问或建议，请告诉我们。我们将非常感谢你的贡献。

何去何从

在接下来的教程中，我们将通过内置的Cocos2d-JS测试和示例游戏，告诉你如何设置一个新的Cocos2d-JS项目。

cocos2d-js 3.0 RC0 手动绑定 C++调用js，js调用C++ jsbinding

1 JS调用C++

3.0中写这个绑定比较简单，跟ANE调用java如出一辙，一个JSContext，一个jsval，使用cocos2d提供的c++和js变量转换的函数做好转换即可。

cocos2d-js原来就定义好了代码风格：

sc->addRegisterCallback(MinXmlHttpRequest::_js_register); 
    sc->addRegisterCallback(register_jsb_websocket); 
    sc->addRegisterCallback(register_jsb_socketio); 
    
    #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID) 
    sc->addRegisterCallback(JavascriptJavaBridge::_js_register); 
    #endif 
    
    sc->addRegisterCallback(register_jsb_kenko_all); 
    
    sc->start();

我们也顺着这个风格，添加一个函数：register_jsb_kenko_all，这是一个全局函数。

jsb_kenko_auto.h

#ifndef jsb_jsb_kenko_auto_h 
#define jsb_jsb_kenko_auto_h#include "cocos2d.h"std::string os_info(); 
bool jsb_os_info(JSContext *cx, uint32_t argc, JS::Value *vp); 
bool jsb_callback(JSContext *cx, uint32_t argc, JS::Value *vp); 
void register_jsb_kenko_all(JSContext* cx, JSObject* obj);#endif

jsb_kenko_auto.cpp

#include "jsb_kenko_auto.h" #include "cocos2d_specifics.hpp"std::string os_info() { 
    CCLOG("it's c++ os_info here"); 
    return "os_info"; 
}  bool jsb_os_info(JSContext *cx, uint32_t argc, JS::Value *vp) { 
    jsval ret = std_string_to_jsval(cx, os_info()); 
    JS_SET_RVAL(cx, vp, ret); 
  
    return true; 
} 
  void register_jsb_kenko_all(JSContext *cx, JSObject *obj) { 
    JS_DefineFunction(cx, obj, "osInfo", jsb_os_info, 0, 0);  //生成名为osInfo的js全局函数}

把h和cpp文件都放到AppDelegate.cpp同一个地方。上述的c++代码会在spidermonkey运行环境中生成相应的js接口，所以，我们不需要自己额外写对应的js接口。

然后就可以写js代码试试了。从运行结果可以看到，js调用成功，并获取到返回值。

cc.game.onStart = function(){ 
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL); 
    cc.view.resizeWithBrowserSize(true); 
    cc.director.runScene(new MainScene()); 
    
    cc.log("js get from c++: " + osInfo()); 
}; 
cc.game.run();

2 C++回调

关键在于使用ScriptingCore提供的方法，调用js。首先来看看ScriptingCore的源代码，都有些什么方法可以用。

executeFunctionWithOwner可以实现类似cc.sprite之类的c++对象和js对象的调用，没有深究。这里演示的是如何做全局调用。

evalString对任何一个前端开发来说都不会太陌生，毕竟这里不是浏览器，排除各种乱七八糟的安全问题，我们直接用这个函数。

/** 
     @brief Execute a scripted global function. 
     @brief The function should not take any parameters and should return an integer. 
     @param functionName String object holding the name of the function, in the global script environment, that is to be executed. 
     @return The integer value returned from the script function. 
     */ 
    virtual int executeGlobalFunction(const char* functionName) { return 0; }    virtual int sendEvent(cocos2d::ScriptEvent* message) override; 
    
    virtual bool parseConfig(ConfigType type, const std::string& str) override;    virtual bool handleAssert(const char *msg) { return false; }    virtual void setCalledFromScript(bool callFromScript) { _callFromScript = callFromScript; }; 
    virtual bool isCalledFromScript() { return _callFromScript; }; 
    
    bool executeFunctionWithObjectData(void* nativeObj, const char *name, JSObject *obj); 
    bool executeFunctionWithOwner(jsval owner, const char *name, uint32_t argc = 0, jsval* vp = NULL, jsval* retVal = NULL);    void executeJSFunctionWithThisObj(jsval thisObj, jsval callback, uint32_t argc = 0, jsval* vp = NULL, jsval* retVal = NULL);    /** 
     * will eval the specified string 
     * @param string The string with the javascript code to be evaluated 
     * @param outVal The jsval that will hold the return value of the evaluation. 
     * Can be NULL. 
     */ 
    bool evalString(const char *string, jsval *outVal, const char *filename = NULL, JSContext* cx = NULL, JSObject* global = NULL);

修改jsb_kenko_auto.cpp：

#include "jsb_kenko_auto.h" #include "cocos2d_specifics.hpp"std::string os_info() { 
    CCLOG("it's c++ os_info here"); 
    return "os_info"; 
}bool jsb_callback(JSContext *cx, uint32_t argc, JS::Value *vp) { 
    CCLOG("it's c++ testCallback here"); 
    JSContext* jc = ScriptingCore::getInstance()->getGlobalContext(); 
    // 注释部分适合有对象化的调用 
    // 参考：http://www.tairan.com/archives/4902 
    //jsval v[2]; 
    //v[0] = int32_to_jsval(jc, 32); 
    //v[1] = int32_to_jsval(jc, 12); 
    
    // 通过 ScriptingCore 封装好的方法实现回调，可以帮助我们节省很多细节上的研究 
    //js_proxy_t * p = jsb_get_native_proxy(); 
    //return ScriptingCore::getInstance()->executeFunctionWithOwner(OBJECT_TO_JSVAL(p->obj), "cpp_callback", 2, v);        //2是参数个数，v是参数列表 
    
    //找到一个更适合全局函数的方法     jsval ret; 
    return ScriptingCore::getInstance()->evalString("cpp_callback(2,3)", &ret); 
} 
  bool jsb_os_info(JSContext *cx, uint32_t argc, JS::Value *vp) { 
    jsval ret = std_string_to_jsval(cx, os_info()); 
    JS_SET_RVAL(cx, vp, ret); 
  
    return true; 
} 
  void register_jsb_kenko_all(JSContext *cx, JSObject *obj) { 
    JS_DefineFunction(cx, obj, "osInfo", jsb_os_info, 0, 0);  
    JS_DefineFunction(cx, obj, "test_cpp_callback", jsb_callback, 0, 0);  
}

相应在js侧添加一个全局函数，给c++调用。

cc.game.onStart = function(){ 
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL); 
    cc.view.resizeWithBrowserSize(true); 
    cc.director.runScene(new MainScene()); 
    
    cc.log("js get from c++: " + osInfo()); 
    test_cpp_callback(); 
}; 
cc.game.run();

function cpp_callback(a, b) { 
    cc.log("cpp return two integer: " + a + " " + b); 
}

看输出结果：

3 各种变量转换函数

都在js_manual_conversions.h这里了，真是应有尽有。下边只列出一部分。

bool jsval_to_ushort( JSContext *cx, jsval vp, unsigned short *ret ); 
bool jsval_to_int32( JSContext *cx, jsval vp, int32_t *ret ); 
bool jsval_to_uint32( JSContext *cx, jsval vp, uint32_t *ret ); 
bool jsval_to_uint16( JSContext *cx, jsval vp, uint16_t *ret ); 
bool jsval_to_long( JSContext *cx, jsval vp, long *out); 
bool jsval_to_ulong( JSContext *cx, jsval vp, unsigned long *out); 
bool jsval_to_long_long(JSContext *cx, jsval v, long long* ret); 
bool jsval_to_std_string(JSContext *cx, jsval v, std::string* ret);

jsval int32_to_jsval( JSContext *cx, int32_t l); 
jsval uint32_to_jsval( JSContext *cx, uint32_t number ); 
jsval ushort_to_jsval( JSContext *cx, unsigned short number ); 
jsval long_to_jsval( JSContext *cx, long number ); 
jsval ulong_to_jsval(JSContext* cx, unsigned long v); 
jsval long_long_to_jsval(JSContext* cx, long long v); 
jsval std_string_to_jsval(JSContext* cx, const std::string& v);