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 组件的属性进行设置（具体的颜色属性可以根据爱好自由设置）：