做了3年java开发 实在是太无聊了 想转cocos做做游戏,无奈js不熟,玩不起来,最近在做练习发现 键盘监听事件存在问题,键盘按下和松开会导致动画短暂的卡顿 实在是无解,有老司机带带我吗
动画卡顿是什么意思,看一下你的代码
大概就是我用了 switch 判断按键 按下时 动画移动 松开时移动停止 但是我在左右左右按的时候 节点会在方向移动的时候会有卡顿
cc.Class({
extends: cc.Component,
properties:{
end:cc.SpriteFrame,
speed : 4,
key:’’,
},
onLoad: function () {
// add key down and key up event
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
},
update: function() {
console.log("this.key: " + this.key)
if(this.key=='z') {
console.log("enter Z: ")
var anim = this.getComponent(cc.Animation);
var stateAnimi = anim.getAnimationState('clip');
if(!stateAnimi.isPlaying) {
stateAnimi.speed = 2;
anim.play('clip');
}
} else if(this.key == 'l') {
console.log("enter L: ")
this.node.scaleX = -1;
this.node.x -= this.speed;
var anim = this.getComponent(cc.Animation);
var stateAnimi = anim.getAnimationState('run');
if(!stateAnimi.isPlaying) {
anim.play('run')
}
} else if(this.key == 'r') {
console.log("enter R: ")
this.node.scaleX = 1;
this.node.x += this.speed;
// console.log(this.node.x);
var anim = this.getComponent(cc.Animation);
var stateAnimi = anim.getAnimationState('run');
if(!stateAnimi.isPlaying) {
anim.play('run')
}
} else if(this.key == 'runStop') {
console.log("enter STOP: ")
var anim = this.getComponent(cc.Animation);
anim.setCurrentTime(0);
anim.stop('run');
anim.stop('clip');
this.key = 'stop'
}
},
onKeyDown: function (event) {
switch(event.keyCode) {
case cc.macro.KEY.z:
// var anim = this.getComponent(cc.Animation);
// var stateAnimi = anim.getAnimationState('clip');
// if(!stateAnimi.isPlaying) {
// stateAnimi.speed = 2;
// anim.play('clip');
// }
// console.log("enter Z: ")
this.key = 'z';
break;
case cc.macro.KEY.right:
//console.log(">>>>")
// this.node.scaleX = 1;
// this.node.x += this.speed;
// console.log(this.node.x);
// var anim = this.getComponent(cc.Animation);
// var stateAnimi = anim.getAnimationState('run');
// if(!stateAnimi.isPlaying) {
// anim.play('run')
// }
// console.log("enter R: ")
this.key = 'r'
break;
case cc.macro.KEY.left:
// console.log("<<<<")
// this.node.scaleX = -1;
// this.node.x -= this.speed;
// console.log(this.node.x);
// var anim = this.getComponent(cc.Animation);
// var stateAnimi = anim.getAnimationState('run');
// if(!stateAnimi.isPlaying) {
// anim.play('run')
// }
// console.log("enter L: ")
this.key = 'l';
break;
}
},
onKeyUp: function (event) {
switch(event.keyCode) {
case cc.macro.KEY.right:
case cc.macro.KEY.left:
case cc.macro.KEY.z:
// var anim = this.getComponent(cc.Animation);
// anim.setCurrentTime(0);
// anim.stop('run');
console.log("enter STOP: ")
this.key = 'runStop';
break;
}
}
});
卡顿的意思就是响应没那么及时吧,你放update里会差1帧时间
你可以直接在事件回调函数里控制动画,则不是在update里,欢迎关注「Creator星球游戏开发社区」微信公众号,上面有很多教程文章、源码工程、视频演示,可供你学习。

update里面不适合做频繁的动画调用吧
其实一开始的 时候 我直接放到键盘监听事件里面的,但是也还是卡顿 所以我把他放到update里 结果发现 居然还是一样卡顿 就很奇怪不知道哪里出的问题
学习学习
放到键盘监听里也是一样 会有点延迟
看你的代码,update的执行间隔如果不等于帧动画的整体时长的话,可能会出现动画跳帧的感觉。
帧动画本身也是靠系统的循环回调来驱动动画播放的。
精灵的移动你直接修改position中的x或者y,这是最简单高效的,靠系统定时器update或者用组件定时器component.scheduler();来操作都行。
1赞