Cocos2d-HTML5 学习

1-手把手，快速搭建 Cocos2d-HTML5 开发调试环境

http://www.ityran.com/archives/4857

这个教程使用的是WebStorm ,IDE很大，个人比较厌烦；

2-Cocos2D-HTML5开发环境搭建

http://xiandanboke.com.cn/cocos2d-html5dev.html

开发工具：sublime Text2，自动提示挺好的，而且仅是个文本编辑器;

3-【cocos2d-x从c++到js】01：迎接脚本时代的到来

http://4137613.blog.51cto.com/4127613/1113786

cocos2d-x for js是cocos2d-x的一部分，他使用js做脚本，底层使用c++运行，在提升开发速度同时，保证了执行效率。

对于cocos2d-x的开发者来说，手头最现成的工具就是vs。用vs2010打开工程，蛋疼的发现，里面既没有js代码，也没有c++代码。只有一个spidermonkey的js解释器，还有一个win32版cocos2d-x的壳。

好吧，首先我们需要导入js的源代码，很不幸，这个项目的js源码也没有放在MoonWarriors的目录下，而是在

cocos2d-2.1beta3-x-2.1.0\samples\TestJavascript\cocos2d-js-tests\games\MoonWarriors这个文件夹中

我们把这里面的代码导入到MoonWarriors项目中。

cocos2d-x-2.1.4\samples\Javascript\Shared\games\MoonWarriors

但是又遇到了另外一个问题，我们在js源代码中，没法.出来代码，自动完成功能几乎是无效的。番茄只能提示出当前js文件中的代码，在其他文件中的代码，没法提示出来。尤其是引擎中的js接口。这个实在太要命了。

我查了半天，发现cocos2d-2.1beta3-x-2.1.0引擎中，根本没有js版本的代码。也就是说，他们只是用spidermonkey把js的接口绑定成了c++的。这可如何是好呢？没代码就没法使用自动完成。

呵呵，之前我们说过，这次是一次联合发布，也就是说各个版本的js接口应该是一致的，也就是说我们可以使用html5版本的js代码，来协助完成代码提示。

去下一个html5引擎

打开后发现，我们要的代码在这四个文件夹里

然后，我们随便打开一个项目源代码，就可以.出来了。自动完成可以使用，哦也

 

4-vs2010如何导入js源码所在的文件夹

只能一个个创建，然后在添加

先ADD NEW FILTER 然后在ADD EXISTING ITEM 单个的js

http://zhidao.baidu.com/link?url=g1ZGpFDX1DcNuz82VGaEREYBpOZ_VRsiPD_X4NhFBA7e_sgTKigxn8C8Ks_FeIPHYNgzChDYpl1YtO3EIU4Bmq

 

5-【cocos2d-x从c++到js】02：解决在vs中修改js源文件无效

http://4137613.blog.51cto.com/4127613/1114959\

用VS真的很麻烦，自动提示sublime Text2就能解决，更能用IDE--WebStorm---好像收费

 

6-【cocos2d-x从c++到js】03：hybrid开发模式

因为苹果是不允许app下载可执行代码的，所以用动态链接库构建插件式引擎并通过网络下载在iOS上是无法实现的。但有一种方式是，在引擎内部集成一个脚本解释器，然后把脚本作为资源来下载（脚本是加密的），如此规避苹果的审核条款。这个方式就叫Hybrid。但这么做没法做到不露痕迹，深层原因应该是，Hybrid牵扯利益太大，苹果也算睁一只眼闭一只眼。

在cocos2d引擎的众多分支中，cocos2d-x的开发是以C++为核心的。而cocos2d-x引擎，就是通过hybrid方式来执行js代码的。为了执行js代码，引擎本身需要一个脚本解释器，引擎集成的脚本解释器就叫：spidermonkey。

spidermonkey是一个历史悠久的基于c/c++编写的js脚本解释器，由Mozilla提供，非常有名的firefox和thunderbird都在用。cocos2d-x集成spidermonkey的开源协议是MPL2.0，没有什么限制，你可以放心使用它

 

AppDelegate::applicationDidFinishLaunching()函数中，我们可以找到启动脚本引擎的代码：

ScriptingCore* sc = ScriptingCore::getInstance(); 
sc->addRegisterCallback(register_all_cocos2dx); 
sc->addRegisterCallback(register_cocos2dx_js_extensions); 
sc->addRegisterCallback(register_CCBuilderReader); 
sc->addRegisterCallback(jsb_register_chipmunk); 
sc->start(); 
 
CCScriptEngineProtocol *pEngine = ScriptingCore::getInstance(); 
CCScriptEngineManager::sharedManager()->setScriptEngine(pEngine); 
ScriptingCore::getInstance()->runScript("MoonWarriors-jsb.js"); 

ScriptCore是脚本的核心，他就是我们说的那个JS解释器。cocos2d-x把spidermonkey的解释器封装了一下，以提供对cocos2d-x引擎的相关支持，并简化相应的调用接口。

addRegisterCallback接口用于添加注册函数，注册函数用于在引擎执行时，绑定相应的代码（从JS往C++的映射代码）。每一个注册函数，对应一个库。现在cocos2d-x提供了四个库支持，分别是cocos2d-x核心库，cocos2d-x扩展库，cocosbuilder支持库，clipmunk物理引擎库。将来你可以在这里添加注册自己实现的JS绑定库，来直接扩展这个JS引擎。

start启动脚本引擎。

CCScriptEngineManager::sharedManager()->setScriptEngine 这句是将脚本引擎绑定到引擎管理器上，引擎管理器提供对脚本引擎的一个全局访问点，并且也负责对脚本引擎的卸载。

最后就是运行游戏的主脚本了。

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

 

7-【cocos2d-x从c++到js】04：cocos2d-x for js中的继承

对于面向对象语言来说，继承机制是代码复用的基础，很不幸的是javascript作为一个基于原型继承的语言，并没有在本身语言层面上直接作出对类继承的支持。

但是js语言拥有很强大的表现力。所以一般是js的使用者自行设计一套继承机制，这个机制必须包括几个点，对私有访问权限的模拟，对属性和类属性的不同实现，对方法覆盖的支持，对父类被覆盖方法的访问等。

cocos2d-x中，整合了两套继承机制，看《MoonWarriors》例子中的源码SysMenu.js文件 

 

这个extend继承写法由John Resig创造，John Resig是JS领域的大神，而且网上有很多粉丝给他编的段子，非常有趣。

例子中使用父类cc.Layer.extend方法来启动继承，传入一个对象字面量{}，这个字面量可以包含对象属性和对象方法，最终由extend来完成接口绑定，返回一个构造函数赋值给SysMenu。

对于类方法（也就是通常意义上的静态方法），使用的是js最传统的方式，直接给构造函数指定属性即可。

这种编写代码的方式非常简单，而且也很优美。更重要的是，这种写法，非常符合C++或java程序员的排版审美。

关于继承的理解。js里面的原型继承和基于类的继承方式截然不同，内部是在维护一个原型链，链上的节点与节点之间是链接关系（注意：不是赋值，也不是拷贝）。可以先看一下《权威指南》那本书是怎么讲的，不过很遗憾，那本书关于原型继承的图解画的不太好……千万不要搞代数式的替换和死记硬背，那样你很难掌握原型链的本质。

另外，强烈推荐三生石上的系列文章《JavaScript继承详解》

 

JavaScript继承详解

JavaScript继承详解（二）

JavaScript继承详解（三）

JavaScript继承详解（四）

JavaScript继承详解（五）

JavaScript继承详解（六）