萌新入坑,求大佬一枚

做了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赞