Cocos 入门，分两篇文章讲解，第一篇介绍 Cocos2d-js，第二篇介绍 Cocos Creator。两者关系像是 Vue 用 <script> 引入和命令行工具（CLI）的关系。

整体介绍

Cocos 的逻辑结构跟拍电影很像，分为：导演——场景——精灵（层）

导演：控制游戏的开始和结束以及场景加载切换。
场景：游戏根据具体内容可以分为一个场景或多个场景，比如：一个背景下的游戏操作都可以放到一个场景里；如果游戏有多个背景画面，可以分成多个场景来依次展示。
精灵：游戏的主要部分，好比电影里的演员。一个场景下的精灵一般可以分成没有交互的静态精灵和有交互的动态精灵两类。动态精灵，需要绑定事件，添加动画等操作。当场景里精灵很多时，我们可以把精灵分层，方便控制操作。比如：把背景等静态精灵放到一层里，把需要交互的精灵放到一层里。当很多精灵做整体动画时，我们也可以把精灵放到一个层里，给层加动画，不用给每个精灵添加一样的动画。

快速上手

了解这些后，我们通过一个简单小游戏《图形配对》的讲解快速上手。游戏地址：github.com/puqinsi/sha… ，开始下面内容前大家需要先下载下来。《图形配对》玩法：将相同的图形拖到一起，会正确提示并得到一颗星，不同的图形拖到一起回错误提示。

项目结构

首先看一下项目结构，了解一下项目组成以及文件功能：

11616570314_.pic.jpg

res文件夹里存放游戏资源，如：图片，音频；
src文件夹里存放游戏脚本，控制游戏；
cocos2d-js.js 游戏引擎；
index.html

只有一个 canvas dom（cocos是基于canvas的游戏引擎），然后是加载游戏引擎（cocos2d-js.js）和游戏入口（main.js）。

main.js 游戏入口

包括游戏设置，资源加载和游戏开始。 资源路径，在加载资源时以此路径为根路径： cc.loader.resPath = "res"
设置游戏的设计尺寸和适配方案：

cc.view.setDesignResolutionSize(
  designSize.width,
  designSize.height,
  cc.ResolutionPolicy.SHOW_ALL
)

SHOW_ALL 按比例缩放，内容不会超出屏幕，宽高长的充满屏幕，短的保留黑边。FIXED_HEIGHT 高充满屏幕，宽按照设计尺寸比例缩放，宽有可能存在黑边和超出屏幕。FIXED_WIDTH 同理，宽充满屏幕，高按比例缩放。 预加载资源：

cc.LoaderScene.preload(
  g_resources,
  function () {
    cc.director.runScene(new StartScene());
  },
  this
)

g_resources 是一个包含所有需要预加载资源的数组。第二个参数是回调函数运行第一个场景。

project.json 游戏配置

包括：帧率、webGL、游戏脚本依赖等；

游戏场景

开始介绍游戏场景创建和游戏内容交互，首先处理游戏资源，在 resource.js 文件里，定义一个全局对象 res 存放资源，方便我们后面使用，然后把资源添加到 g_resources 里，用于预加载。资源有了之后开始创建场景（本游戏比较简单，只创建了一个场景）。在StartScene.js文件里，创建了叫 StartScene 的场景（main.js 里通过 cc.director 运行），把场景里的内容分了三层，分别是：BgLayer 背景层，静态没有交互的部分； StarLayer 飞星层，游戏公共部分，包括正确错误反馈，获得星星，返回，结束等操作； MainLayer 主要交互层，游戏玩法交互都在这一层。通过 this.addChild() 添加到场景里，第一个参数是添加到场景的元素；第二个参数是层级，展示先后顺序；第三个参数是 tag，可以通过 tag 获取到该元素。

背景层（src/StartScene.js 里）：通过 cc.Sprite.create(res.Bg) 创建背景精灵，res.Bg 是背景图，设置精灵属性，然后添加到层里。cocos的坐标系与页面的坐标系不用，是笛卡尔坐标系，以左下角为原点。精灵的锚点默认是（0.5，0.5）即精灵的中点。我们在设置精灵位置的时候需要考虑到坐标系和锚点。背景精灵添加到背景层，背景层添加到运行的场景，背景就展示到游戏画面了。
飞星层（src/public/common.js）：包括星数展示、游戏返回、正确反馈、错误反馈、游戏结束和重玩，将游戏公共逻辑抽离到一层。内容不再展开讲解，留给大家去探索。
主交互层（src/mainLayer.js）：游戏的主要操作部分。

主交互层

先了解两个文件 src/data.js 和 src/public/audio.js。

data.js 里存放游戏数据，有点数据驱动视图的意思，把游戏星数，可以批量操作的精灵数据（甚至全部精灵数据）都放到这个文件里。
audio.js 把游戏中用到的音频，统一到 sound 对象里，方便管理和调用。注意：背景音用 cc.audioEngine.playMusic() 播放，音效用cc.audioEngine.playEffect()播放，都接收两个参数，第一个参数音频资源，第二个参数 Boolean，控制是否循环播放。

开始主交互层的介绍：通过 ctor 定义构造函数，ctor 中的 this.count、this.touchFlag 为实例变量。init、dragAction、judgeEach等为实例方法。 this.count 记录获得的星数，this.touchFlag 防止多个图形同时操作。init方法里通过data数据，批量创建了画面中的图形精灵。cc.Sprite.create(item.src) 创建图形精灵； shape.id = item.id， shape.audio = item.audio 手动添加的属性，方便操作；setAnchorPoint 设置锚点；setPosition 设置精灵的位置；setScale 设置缩放； this.addChild(shape, 1) 添加到层里面。然后通过 dragAction 创建事件监听器，包括 onTouchBegan，onTouchMoved，onTouchEnded。onTouchBegan中播放音效；onTouchMoved中控制拖拽边界；onTouchEnded中检测碰撞，是否发生碰撞，碰撞的是否是正确选项，并作出响应反馈；在 judgeEach方法里处理碰撞事件，拖拽元素和其他图形依次判断，如果发生碰撞，再判断发生碰撞的两个图形id是否相同，相同则匹配正确，做出正确反馈并获得一颗星，不同则匹配错误，做出错误反馈通过 cc.director.getRunningScene().getChildByTag(2) 获取到飞星层。subAction为正确后的动画处理， new cc.LayerColor(cc.color(16, 16, 16), 736, 414)，创建一个颜色层，第一个参数为颜色，第二个参数为width，第三个参数为height； this.schedultOnce() 为定时器，相当于js中的setTimeout,时间以秒为单位。介绍一下用到的动作， cc.moveTo() 移动动作，第一个参数时间，第二三参数为x,y的坐标；cc.easeOut(2) 为缓冲动作，由快到慢； cc.fadeOut() 为淡出，一个参数时间； cc.callFunc() 为动作的回调函数； cc.sequence() 为顺序执行的动作，参数为动作一，动作二，动作三等；精灵通过 runAction (动作)来执行动作。正确动画完成后，通过 review 方法判断游戏是否结束。到这里，游戏大概内容就介绍完了，在写法和玩法上还有很多可以改进的地方，大家可以优化代码和增进玩法。剩下的交给大家去探索了。

总结

现在 Cocos 官网已经不更新 cocos2d-js 了，Cocos 开发转向了Cocos Creator，不过大部分 api 是通用的，可以参考 Cocos Creator 的 api。使用 Cocos Creator 工具，可以发挥 Cocos 强大的游戏制作能力和提升游戏制作效率。下一篇我们用同一个游戏《图形配对》来介绍 Cocos Creator。

Cocos 入门（上）