简单易懂Cocos2D-JS基础入门教程与实例

作者:课课家教育更新于： 2016-04-14 10:57:28

　　估计很多初学Cocos2D-JS者对Cocos2D-JS的了解还不是很深，接下来本教程将带大家深入了解Cocos2D-JS。

　　cocos2d-js是Cocos2d-x的javaScript版本，真正跨全平台的游戏引擎，采用原生Javascript语言，可发布到包括Web平台，iOS，Android，WindowsPhone8，Mac，Windows等平台。

　　先说说SDK的开发步骤：

　　1、安装Python

　　2、解压SDK，运行setup.py

　　3、运行cmd，新建cocos2d-js项目：cocosnew–ljsproject_name

　　4、使用webStorm等IDE打开项目目录，新建的项目已经有现成HelloWorld例子

　　5、了解一下main.js的说明（关于project.json），然后打开resource.js和app.js阅读代码

　　6、在app.js中正式开始自己的代码编写。当然，这里可以增加新的js文件，需要修改project.json。

　　再说说js类库的开发步骤：

　　1、下载类库

　　2、新建HTML页面，引入相应类库

　　3、在onload之后，编写cocos2d-js代码，从cc.game.run()开始。入口代码其实跟SDK开发方式的main.js一样。这里更推荐使用SDK方式，因为可以通过阅读源代码获取API的使用说明。

　　开始cocos2d-js开发前，需要洗洗脑，知道cocos2d-js的平面坐标情况。这跟HTML和canvas的布局都不一样。

　　在cocos2d-js游戏中，画面的左下角是(0,0)，x从左往右递增，而y是从下往上递增的，跟数学的二维坐标系一致。

　　Cocos2d-js框架把游戏拆分为很多个场景，当玩家在不同界面切换的时候，框架实际上就是让游戏画面在不同场景中切换。跟Flash一样，cocos2d-js也有最基本的元素——节点Node。节点可以包含子节点，形成树形结构：

　　然后，Layer、Sprite继承了节点，实现了更多功能，例如Layer用于表示一个面板一个层，Sprite精灵用于加载图片表示人物。而场景本身也是节点，所以场景中可以添加层，层中可以添加层，也可以添加精灵。

　　接着基于刚新建的HelloWorld，做一个简单的例子。

　　首先解释一下main.js几行代码。

　　接着修改app.js：

　　利用Webstorm的服务器功能，右击index.html使用chrome运行：

　　可以看到一堆小人：

　　通过这个简单例子，我们对cocos2d-js制作HTML5有了初步印象。后续就可以继续学习官方SDK中附带的samples了，里边的js-tests项目中包含了几乎全部cocos2d-js功能的实例程序，例如：定时器、精灵动作、帧动画、骨骼动画、粒子系统、界面编辑器等等。

　　后边，笔者把原来starling的小游戏Hungryhero改造一下，使用cocos2d-js重新实现。这是一个跑酷游戏，玩家需要控制超人不断吃食物，同时避开障碍物。

　　游戏中使用到：

　　1、基本：鼠标事件、帧动画、声音（cc.audioEngine）

　　2、平行背景（自行实现）

　　3、对象池（cc.pool）

　　4、粒子系统（cc.ParticleSystem）

　　5、位图字体（cc.LabelBMFont）

　　6、批量渲染层（cc.SpriteBatchNode）