CocosCreator 起手游戏项目解构

项目文档： http://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html

最近心血来潮，想写个微信小游戏，查阅相关资料后准备从cocos框架入手。下面要分析的游戏项目的所有资源都由从cocos官方提供。当然官方文档已经足够详尽了，我这里只是进行更进一步的解构并适当扩展游戏内容。

 

---

游戏演示

http://fbdemos.leanapp.cn/star-catcher/

 

---

项目架构

从这个游戏项目来看，cocos构造游戏的核心就是在于层级管理器（node tree）。所有的编辑操作都是为了构造游戏的node tree而服务的。关于资源管理器以及属性检查器等界面编辑操作可以查阅官方项目文档，本文不再赘述。
拿当前项目的node tree来说：

Canvas作为根拥有四个子结点。其中结点Player以及Score作为游戏的动态元素添加了用户脚本组件。
 

---

用户脚本组件

API文档： http://docs.cocos.com/creator/api/zh/

基本结构

cc.Class({
    //inheritance
    extends: cc.Component,   

    properties: {        
        //...
        maxStarDuration: 0,
        starPrefab: {
            default: null,
            type: cc.Prefab
        },
        //...
    },

    // use this for initialization
    onLoad: function () {
    },

    // called every frame, uncomment this function to activate update callback
    update: function (dt) {
    },
});

properties

上面代码中的properties里示例了两种属性声明方式。一是简单声明定义default，二是完整声明，可以配置default, type, visible, displayname等属性。所有组件属性都会映射到绑定该组件的结点的属性检查器面板上，开发者可以直接在编辑器上编辑属性，非常方便。

LIFE-CYCLE CALLBACKS

• onLoad()：组件所在节点进行初始化时（节点添加到节点树时）执行
• start()：会在该组件第一次 update 之前执行，通常用于需要在所有组件的 onLoad 初始化完毕后执行的逻辑
• update(dt)：作为组件的成员方法，在组件的 enabled 属性为 true 时，其中的代码会每帧执行。

游戏功能实现

主角持续跳跃

    setJumpAction: function () {
   
   
        // 跳跃上升
        var jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        // 下落
        var jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        // 不断重复
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
    },
    onLoad: function () {
   
   
        // 初始化跳跃动作
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);
    },

function	params	addition
cc.moveBy	(duration, Vec2)	在指定时间内移动到指定坐标
cc.p	(x, y)	指定x，y创建坐标
cc.sequence	(FiniteTimeAction, FiniteTimeAction)	顺序执行动作
cc.repeatForever	(FiniteTimeAction)	永远地重复一个动作
this.node.runAction	(Action)	为当前结点添加动作