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

概述下载必备的软件包下载并安装WebStorm7。WebStorm7目前的稳定版本是7.0.3。为什么我们选择WebStorm？因为它提供了许多功能，如JavaScript代码的语法完成，调试，语法高亮，版本系统集成等，你可以去WebStorm的更多信息的官方网站。从Cocos2d-x的官方网站下载Cocos2D-JS 3.0alpha版本。点此处下载。当你下载了的Cocos2D-JS 3.0al 下载必备的软件包

下载并安装WebStorm7。WebStorm7目前的稳定版本是7.0.3。为什么我们选择WebStorm？因为它提供了许多功能，如JavaScript代码的语法完成，调试，语法高亮，版本系统集成等，你可以去WebStorm的更多信息的官方网站。

从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分支。

下载并安装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在当前目录创建一个MyJsGame工程。

运行该工程

使用Websever 运行 Cocos2d-Js 工程

cd ~/work/MyJsGamecocos run -p web

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

cd ~/work/MyJsGamecocos compile -p ios|androID|maccocos 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开发。

打开已经创建好的项目 MyJsGame

正如我们可以从上面的图片中看到，你应该选择Create New Project from Exisiting files(从已存在的文件创建新项目)

然后，它会提示你以下选项：

图2

选择Source files are in a local directory,no Web server is yet configured(源文件在本地目录，没有配置web server) 并点击Next(下一步)继续

图3

在这一步，你应该展开目录树来指定你的MyJsGame源代码放的位置。当你指定了正确的目录，注意Finish按钮仍然是灰色的。

现在，我们应该设置该目录为项目的Project Root(根目录)。单击项目根目录按钮，Finish(完成)按钮将激活。

图4

恭喜你，你已经成功配置了webstorm 开发 Cocos2d-Js 项目。

体验 Cocos2d-Js

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

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

下面是说明：

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

点击Settings(设置)按钮启动你工程的设置对话框:

图6

在点击Settings(设置)菜单后，它将d出如下的对话框:

图7：

现在你可以点击Add...按钮，然后会提示你指定你的JavaScript库的路径。

图8

在WebStorm中调试Cocos2d-Js JavaScript

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

使用JB Chrome 扩展连接WebStorm 到 Chrome

右键点击~/work/MyJsGame下的index.HTML文件，并选择DeBUG 'index.HTML'

图9

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

图10

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

在WebStorm中调试JavaScript代码

返回到WebStorm界面，并双击MyJsGame/src/myApp.Js在代码区展示。

设置断点。用鼠标右键单击myApp.Js源代码视窗左边的侧栏。

图11

开始调试。 WebStorm会自动启动你的Chrome浏览器，并运行示例项目。然后通过点击JB图标回到你的WebStorm。程序将停止在我们刚才设置的断点处。且编辑器将切换到DeBUG视图：

图12

现在你可以做调试之类的事情，单步跳出，单步进入入，单步跳过，继续执行等。

总结

在本教程中，向你展示了基本的步骤来配置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,255); line-height: 1.5 !important;">voID register_Jsb_kenko_all(jscontext* cx,JsObject* obj);#endif

Jsb_kenko_auto.cpp#include Jsb_kenko_auto.h" #include cocos2d_specifics.hppstring os_info() {   cclOG(it's c++ os_info here");   return os_info"; } 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,128); line-height: 1.5 !important;">0); //生成名为osInfo的Js全局函数

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

然后就可以写Js代码试试了。从运行结果可以看到，Js调用成功，并获取到返回值。
cc.game.onStart = function(){   cc.vIEw.setDesignResolutionSize(800,128); line-height: 1.5 !important;">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) { 0; }  int sendEvent(cocos2d::ScriptEvent* message) overrIDe;     bool parseConfig(ConfigType type,const std::string& str) overrIDe;  bool handleAssert(char *msg) { false; }  voID setCalledFromScript(bool callFromScript) { _callFromScript = callFromScript; };   bool isCalledFromScript() { return _callFromScript; };     bool executeFunctionWithObjectData(voID* nativeObj,255); line-height: 1.5 !important;">char *name,JsObject *obj);   bool executeFunctionWithOwner(Jsval owner,uint32_t argc =  NulL);  voID executeJsFunctionWithThisObj(Jsval thisObj,Jsval callback,0); line-height: 1.5 !important;">*    * 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(char *string,Jsval *outVal,255); line-height: 1.5 !important;">char *filename = NulL,jscontext* cx = NulL,JsObject* global = NulL);

修改Jsb_kenko_auto.cpp：

#include "; }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); }  0);   Js_defineFunction(cx,0); line-height: 1.5 !important;">test_cpp_callback0); }

相应在Js侧添加一个全局函数，给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,int32_t *ret ); bool Jsval_to_uint32( jscontext *cx,uint32_t *ret ); bool Jsval_to_uint16( jscontext *cx,uint16_t *ret ); bool Jsval_to_long( jscontext *cx,255); line-height: 1.5 !important;">long *out); bool Jsval_to_ulong( jscontext *cx,255); line-height: 1.5 !important;">bool Jsval_to_long_long(jscontext *cx,Jsval v,255); line-height: 1.5 !important;">long long* ret); bool Jsval_to_std_string(jscontext *cx,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,255); line-height: 1.5 !important;">short number ); Jsval long_to_Jsval( jscontext *cx,255); line-height: 1.5 !important;">long number ); Jsval ulong_to_Jsval(jscontext* cx,255); line-height: 1.5 !important;">long v); Jsval long_long_to_Jsval(jscontext* cx,255); line-height: 1.5 !important;">long v); Jsval std_string_to_Jsval(jscontext* cx,255); line-height: 1.5 !important;">string& v);