cocos学习笔记：快速上手

cc.Class({
    //奇怪的语法风格，cc.class，
    extends: cc.Component, //扩展自cc.Component

    properties: {
        //类的属性设置
        jumpHeight: 0, //在这里可以在属性检察器里面设置，很奇怪的实现机制
        jumpDuration: 0, //但是图形化的操作也很方便了，开发人员定义，动画人员
        maxMoveSpeed: 0, //根据实际修改
        accel: 0, //加速度
        // foo: { //默认的属性等，不知道这种是如何呈现的呢
        //    default: null,
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
    },
    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));
    },
    setInputControl: function () {
        var self = this;
        //this指向哪里呢？？？？
        // 添加键盘事件监听
        cc.eventManager.addListener({
            event: cc.EventListener.KEYBOARD,  //时间字符串常量
            // 有按键按下时，判断是否是我们指定的方向控制键，并设置向对应方向加速
            onKeyPressed: function(keyCode, event) {
                switch(keyCode) {
                    case cc.KEY.a:
                        self.accLeft = true;
                        self.accRight = false;
                        break;
                    case cc.KEY.d:
                        self.accLeft = false;
                        self.accRight = true;
                        break;
                }
            },
            // 松开按键时，停止向该方向的加速
            onKeyReleased: function(keyCode, event) {
                switch(keyCode) {
                    case cc.KEY.a:
                        self.accLeft = false;
                        break;
                    case cc.KEY.d:
                        self.accRight = false;
                        break;
                }
            }
        }, self.node);
    },

    // use this for initialization
    onLoad: function () {
        this.jumpAction = this.setJumpAction();  //类本身没有定义jumpAction啊，这种写法是？
        //是cc本来的语法，还是触控科技自己定义的呢？
        //触控科技，隐藏了诸如场景等的实现
        //鼠标事件，然后响应鼠标事件
        //对于原件的操作
        this.node.runAction(this.jumpAction);
        
        this.accLeft = false;
        this.accRight = false;
        // 主角当前水平方向速度
        this.xSpeed = 0;

        // 初始化键盘输入监听
        this.setInputControl();
    },
    update: function (dt) {
        // 根据当前加速度方向每帧更新速度
        if (this.accLeft) {
            this.xSpeed -= this.accel * dt;
        } else if (this.accRight) {
            this.xSpeed += this.accel * dt;
        }
        // 限制主角的速度不能超过最大值
        if ( Math.abs(this.xSpeed) > this.maxMoveSpeed ) {
            // if speed reach limit, use max speed with current direction
            this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);
        }

        // 根据当前速度更新主角的位置
        this.node.x += this.xSpeed * dt;
    },

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

    // },
});

cc.moveBy
cc.jumpAction
cc.onLoad
cc.Update
cc.eventManager.addListener
event: cc.EventListener.KEYBOARD,
cc.p
cc.easing

2016年4月26日14:28:39

使用模拟器运行游戏时，脚本中的日志信息（使用 cc.log 打印的内容）和报错信息会出现在 控制台 面板中。

2016年4月26日14:44:44

在场景中修改了预置对象后，在 属性检查器 中直接点击 应用，即可保存对应的预置资源：

我们前面提到了组件式的结构是以组合方式来实现功能的扩展的，下图中就展示了节点和 Sprite 组件的组合。

s2016年4月26日15:01:09

上面的例子里，我们先是将 Sprite 组件和节点组合，有了可以指定渲染图片资源的场景图像，接下来我们通过修改节点属性，能够对这个图像进行缩放和颜色等不同方式的显示。现在我们又为这个节点添加了 Button 组件，让这个节点具有了根据按钮的不同状态（普通、悬停、按下等）的行为。这就是 Cocos Creator 中组件式开发的工作流程，我们可以用这样的方式将不同功能组合在一个节点上，实现如主角的移动攻击控制、背景图像的自动卷动、UI 元素的排版和交互功能等等复杂目标。

在一个节点上可以添加多个组件，来为节点添加更多功能。在上面的例子中，我们可以继续选中 New Sprite 这个节点，点击 属性检查器 面板下面的 添加组件 按钮，选择 添加 UI 组件/Button 来添加一个 Button（按钮）组件。

之后按照下图对 Button 组件的属性进行设置（具体的颜色属性可以根据爱好自由设置）：