javascript 动画_将死亡动画添加到javascript中的可移动角色

javascript 动画

This is a continuation of another blogpost about how to animate a spritesheet in javascript. Read part one here.

这是关于如何在javascript中为Spritesheet制作动画的另一篇博客文章的延续。 在这里阅读第一部分。

Right now, we have a spritesheet with 8 rows, 1 for each direction of movement. We’re now going to add another row which has a death animation.

现在，我们有一个Spritesheet，它有8行，每个运动方向1行。 现在，我们将添加另一行具有死亡动画的行。

The new animation is highlighted at the bottom.

新动画在底部突出显示。

The new animation has 5 frames. The last frame is repeated to fill the empty spaces but we won’t be using those frames.

新动画有5帧。 重复最后一帧以填充空白，但我们不会使用这些帧。

The first thing to do is add this last row to the constants for referencing it later. We’ll call this last row “DEATH”:

首先要做的是将最后一行添加到常量中以供以后引用。 我们将最后一行称为“死亡”：

//rows of spritesheet
const SOUTH = 0;
const SOUTHEAST = 1;
const EAST = 2;
const NORTHEAST = 3;
const NORTH = 4;
const NORTHWEST = 5;
const WEST = 6;
const SOUTHWEST = 7;
const DEATH = 8;

We’ll need a couple new variables as well.

我们还将需要几个新变量。

//whether the character is alive or dead
let deathState = false;
let reviveState = false;

The reviveState isn’t strictly necessary, but for this little project I want to animate a revival sequence. It is an undead skeleton, after all.

reviveState不是严格必需的，但是对于这个小项目，我想为复兴序列设置动画。 毕竟，这是一个不死的骨架。

We’ll add a new event listener for if there’s a click within a certain radius of the character’s head. Fortunately, there’s already a variable, “hypotenuse”, which I’m using to determine distance from mouse to character. If the character is already dead, clicking will trigger the revive state to become true. If the character is alive, they will become dead and the current keyframe will be set back to 0.

我们将添加一个新的事件侦听器，用于在角色头部的一定半径范围内单击的情况。 幸运的是，已经有一个变量“斜边”，我正在使用它来确定鼠标到角色的距离。 如果角色已经死亡，则单击将触发恢复状态为真。 如果角色还活着，则它们将变为死亡，并且当前关键帧将被设置回0。

//Listen for clicking
canvas.addEventListener('click', clickListener)
function clickListener(e) {
  if (hypotenuse < SCALED_WIDTH) {
    if (deathState) {
      reviveState = true;
    } else {
      deathState = true;
      currentLoopIndex = 0;
    }
  } 
}

I added a couple of circles just to make it visually clear when you’re close enough to click with an effect, and when you’re close enough to make the character stop moving. This is very much optional, but if you want to draw some indicators like this, just put them within the draw loop but before the character is drawn.

我添加了几个圆圈，目的是使您在离得足够近以单击效果时以及离得足够近以使角色停止移动时在视觉上清晰可见。 这是非常可选的，但是如果要绘制这样的指示符，只需将它们放在绘制循环中但在绘制字符之前。

if (hypotenuse < SCALED_WIDTH) {
    ctx.beginPath();
    ctx.arc(positionX+(SCALED_WIDTH/2), positionY+(SCALED_HEIGHT/8), SCALED_WIDTH, 0, 2 * Math.PI);
    ctx.fillStyle = "#81B048";
    ctx.fill();
  }
  if (hypotenuse < SCALED_WIDTH/4) {
    ctx.beginPath();
    ctx.arc(positionX+(SCALED_WIDTH/2), positionY+(SCALED_HEIGHT/8), SCALED_WIDTH/4, 0, 2 * Math.PI);
    ctx.fillStyle = "#578B28";
    ctx.fill();
  }

For the code that switches the row of the spritesheet, I added a new case to check the death state as the first case to check so that I don’t trigger any other rows to appear unless the character is alive.

对于切换Spritesheet的行的代码，我添加了一个新的案例来检查死亡状态，这是第一个要检查的案例，因此除非角色还活着，否则我不会触发任何其他行的出现。

//switch row of spritesheet for proper direction
  switch (true) {
    case (deathState):
        currentDirection = DEATH;
        break;
    case (angle <= 22.5 && angle > -22.5):
        //east
        currentDirection = EAST;
        break;
    case (angle <= 67.5 && angle > 22.5):
        //southeast
        currentDirection = SOUTHEAST;
        break;
    case (angle <= 112.5 && angle > 67.5): 
        //south
        currentDirection = SOUTH;
        break;
    case (angle <= 157.5 && angle > 112.5):
        //southwest
        currentDirection = SOUTHWEST;
        break;
    case (angle <= -157.5 || angle > 157.5):
        //west
        currentDirection = WEST;
        break;
    case (angle <= -112.5 && angle > -157.5):
        //northwest
        currentDirection = NORTHWEST;
        break;
    case (angle <= -67.5 && angle > -112.5):
        //north
        currentDirection = NORTH;
        break;
    case (angle <= -22.5 && angle > -67.5):
        //northeast
        currentDirection = NORTHEAST;
        break;
  }

When the character is dead, I need them to stop moving, so I added another “or” statement to the cases for when the character should not be moving.

当角色死了时，我需要它们停止移动，因此我在角色不应该移动的情况下添加了另一个“或”语句。

//character stops when touching mouse or when dead
  switch(true) {
    case (hypotenuse <= SCALED_WIDTH/4 || !mousePresent || deathState):
      moving = false;
      break;
    case (hypotenuse > SCALED_WIDTH/4 && mousePresent):
      moving = true;
      break;
  }

Finally, here’s where the magic happens! Before if the character was not moving, I just had to make sure the animation didn’t progress in keyframes. Now, if the character is dead but not revived, it triggers a death animation one time only. If you click again to trigger the revive state, the revive animation will run the death animation in reverse, and then set the death state and revive state back to false.

最后，这就是魔术发生的地方！ 在角色不动之前，我只需要确保动画不会在关键帧中进行。 现在，如果角色已死亡但尚未恢复，则仅触发一次死亡动画。 如果再次单击以触发恢复状态，则恢复动画将反向运行死亡动画，然后将死亡状态和恢复状态设置为false。

if (!moving) {
    //dying
    if (deathState && !reviveState) {
      frameCount++;
      if (frameCount >= FRAME_LIMIT/MOVEMENT_SPEED) {
        frameCount = 0;
        currentLoopIndex++;
        if (currentLoopIndex >= 4) {
          currentLoopIndex = 4;
        }
      }
    //reviving
    } else if (deathState && reviveState) {
      frameCount++;
      if (frameCount >= FRAME_LIMIT/MOVEMENT_SPEED) {
        frameCount = 0;
        currentLoopIndex--;
        if (currentLoopIndex <= 0) {
          currentLoopIndex = 0;
          reviveState = false;
          deathState = false;
        }
      }
    //just not moving
    } else {
      currentLoopIndex = 0;
    }
  }

And now we have another way to interact with the character!

现在我们有了另一种与角色互动的方式！

演示地址

翻译自: https://medium.com/@cantwell.tom/adding-a-death-animation-to-a-movable-character-in-javascript-7ebc13b11f85

javascript 动画