Question

我正在玩easyljs库。我设法创建了一个小的精灵，每次按下键盘上的向右箭头时，该精灵都会移动。现在，我要提出的问题是，如果我没有任何按键操作，则精灵会给人以它移动的印象（基本上是从图1变为图2）

我在代码笔中有一个演示：https://codepen.io/diegotc/pen/qKezQB
我认为问题是我如何使用图像来管理跑步。

 spriteSheet = new createjs.SpriteSheet({
        framerate: 5,
        "images": ["https://preview.ibb.co/eLKC7T/man2_rt1.gif","https://preview.ibb.co/ccR3E8/man2_rt2.gif"],
        "frames": {"regX": 82, "height": 32, "count": 2, "regY": 0, "width": 32},
        "animations": {
            "run": [0,1,"run",1],
            "stop": [0,"stop",0]
        }
    });

还是我应该在调用run之后的中间调用stop吗？

Answer 1

有些事情阻止了您想要的效果。

您可以控制SpriteSheets。与其拥有“ Grant”和“ Begin”，不如拥有一个。您可以告诉Sprite转到gotoAndStop / gotoAndPlay以使其更改状态。这就是精灵表格具有多个动画的原因。
按下该键时，每次要发生的唯一动作就是移动精灵。首次开始移动时，您只应该一次呼叫gotoAndPlay()（或像您一样交换精灵）。然后，当您停止移动（抠像）时，停止精灵。
仅添加一次滴答侦听器。您已经在init（）中拥有了全局变量，那就足够了，它会持续运行。
在“按键按下”上移动并不理想，因为按下按键事件会触发一次，然后在短暂的延迟后开始重复。最好在印刷机上触发动画循环，而不是仅在印刷机上移动。

示例：

createjs.Ticker.addEventListener("tick", tickFn);
document.addEventListener('keydown' ,(event) =>{
    const keyName = event.key;

    let wasMoving = moving;
    if (keyName == 'ArrowRight') {
        moving = true;
    }

    if (moving != wasMoving) {
      grant.gotoAndPlay("run");
    }
});

document.addEventListener('keyup', e => {
  const keyName = event.key;
  if (keyName === 'ArrowRight') {
    moving = false;
    grant.gotoAndStop("stop");
  }
});

// Instead of ticking the stage, tick this function. Then update the stage yourself
function tickFn(event) {
  if (moving) {
    if(grant.x > stage.canvas.width){
      grant.x = 50;
    }
    grant.x += 10;
  }
  stage.update(event);
};

我更新了您的codepen to do the above，还添加了其他一些修改：

修复了Spritesheet上的regX。它设置为82，将您的精灵向右推近3倍。我将其设置为宽度的50％，因此位于中间。然后，我将其移至50px
我在关键事件上添加了preventDefault，以防止页面滚动
我通过设置scaleX=-1添加了向左移动，然后为移动进行乘法设置了“方向”。
我为您“运行”（to complex）更改了Spritesheet动画格式，以使第一帧为1，而不是0。这使您的Sprite立即开始行走，而不是先播放停止帧。 / li>

我希望这能回答您的问题，并为您的下一步工作提供一些启示。干杯！

如何阻止精灵移动？

1 个答案: