随后几天我们学习了Cocos Creator官方文档中的一个坑爹小游戏
这是我们的第一个主角。运行游戏发现,主角跳跃频率偏快,高度太高,星星出现的位置太高而且超出了画布。
先从人物入手,在人物节点的属性检查器中找到用户自定义脚本组件,点击脚本,顺着提示打开脚本文件。
JS文件中有几个方法需要记录一下(个人理解,可能有错误):
在该脚本挂载的节点被加载时,脚本中的onLoad函数会首先被执行,随后是start函数;在节点加载完毕后update函数会根据设置的帧率自动刷新画面; onDestory函数则会在节点销毁的时候自动调用。
在游戏设定中,purperMonster是会一直跳跃的,因此先为其创建一个控制跳跃的函数。
具体实现部分官方已经给出了。
setJumpAction: function () {
// 跳跃上升
var jumpUp = cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
// 下落
var jumpDown = cc.moveBy(this.jumpDuration, cc.v2(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
// 不断重复
return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
},
值得解释一下的是cc.moveBy这个API,它的第一个参数是跳跃间隔时间,第二个参数是一个cc.v2对象,也就是需要到达的位置。后半部分的.easing,是用来控制移动速度曲线的,为了让跳跃更像跳跃。
onLoad: function () {
// 初始化跳跃动作
this.jumpAction = this.setJumpAction();
this.node.runAction(this.jumpAction);
// 加速度方向开关
this.accLeft = false;
this.accRight = false;
// 主角当前水平方向速度
this.xSpeed = 0;
// 初始化键盘输入监听
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
},
在这段代码中,设置了键盘的监听,据官方文档中描述,cc.systemEvent目前支持按键事件和重力感应事件。
cc.systemEvent.on的第一个参数是系统时间类型,第二个是监听到该事件发生后的回调函数(这里是自定义的onKeyDown和onKeyUp函数),第三个参数是监听目标,可以是null
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;
},
这里的this.accel是通过参数列表在属性检查器中设置的,方便后期改动。
Game.js是一个统筹全局的角色,它控制了整个游戏的运行、暂停、结束、开始。在ccc中,可以将节点挂载到脚本上来获取该节点的内部信息。
如果其他脚本需要控制全局,可通过构造一个init函数把game传递给该脚本,这样该脚本就可以使用game.js中的资源。
比如这样:
init: function (game) {
this.game = game;
},
在game.js中,可在onLoad中调用该脚本中的init函数,同时将自身(this)传入该函数。
为了让purperMonster的跳跃更加有弹性,官方例子中为其加上了形变的效果
setJumpAction: function () {
// 跳跃上升
var jumpUp = cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
// 下落
var jumpDown = cc.moveBy(this.jumpDuration, cc.v2(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
// 形变
var squash = cc.scaleTo(this.squashDuration, 1, 0.6);
var stretch = cc.scaleTo(this.squashDuration, 1, 1.2);
var scaleBack = cc.scaleTo(this.squashDuration, 1, 1);
// 添加一个回调函数,用于在动作结束时调用我们定义的其他方法
var callback = cc.callFunc(this.playJumpSound, this);
// 不断重复,而且每次完成落地动作后调用回调来播放声音
return cc.repeatForever(cc.sequence(squash, stretch, jumpUp, scaleBack, jumpDown, callback));
},
cc.sequence 顺序执行动作,创建的动作将按顺序依次运行。