Crafty教程:如何使用精灵动画为不同的角色设置动画

在到目前为止的所有 Crafty 教程中，您一直在使用方形或矩形框来理解不同的概念，例如动画和键盘或触摸事件。虽然这是快速了解有关库的更多信息的好方法，但您很可能喜欢在实际游戏中使用图像。

在本教程中，您将学习如何加载精灵表以在游戏中使用不同的图像。之后，您将学习如何使用精灵动画为不同的角色设置动画。

加载 Sprite 表

对于那些不熟悉精灵表的人来说，它们是图像文件，其中包含几个以网格排列在一起的较小图形。这些较小的图形或精灵中的每一个都可以单独使用或与其他图像一起使用来为不同的对象设置动画。

您不能直接在 Crafty 中加载精灵表并开始使用它。您还必须告诉它精灵表中不同图块或精灵的宽度和高度。您还可以为单个图像指定特定名称。例如，可以将其中包含小石头的精灵命名为“small_stone”，以便于参考。记住平铺名称比记住不同图像的实际坐标容易得多。 

我们将 在本教程的不同演示中使用 tokka的以下精灵表。

它有很多图像，可以在玩家行走、跳跃、闲置或被射击时使用。在这种情况下，大多数图块的宽度和高度分别为 80 像素和 94 像素。一些精灵表也可能在单个图块或整个精灵表周围有额外的填充。这些可以在使用 、 和 属性加载精灵表 paddingX时 paddingY指定 paddingAroundBorder。 

这是我们在游戏中加载上述精灵表所需的代码：

var game_assets = {
  "sprites": {
    "hero_spritesheet.png": {
      tile: 80,
      tileh: 94,
      map: {
        hero_idle: [0, 0],
        hero_walking: [1, 1],
        hero_jumping: [2, 3],
        hero_sitting: [0, 4]
      }
    }
  }
};

Crafty.load(game_assets);

使用一对数字来引用瓷砖。第一个数字决定了我们的精灵的列，第二个数字决定了它的行。数字是从零开始的。例如，可以使用 访问第一列第一行中的精灵[0, 0]。类似地，可以使用 访问第三列和第四行中的精灵[2, 3]。如前所述，您可以为各个精灵赋予不同的名称以方便使用。

渲染静态精灵

加载精灵表后，您可以使用以下代码在屏幕上渲染图像：

var idle_hero = Crafty.e("2D, canvas, hero_idle")
  .attr({ x: 10, y: 10 });

x 和 属性决定了精灵将被渲染的 y 位置。w您还可以使用和h属性设置单个精灵的宽度和高度 。

See the Pen  Sprites in Crafty by Monty (@Shokeen)  on CodePen.

由于精灵有一个2D组件，您可以将组件的所有属性和属性应用2D到这些图像。例如，您可以使用 水平翻转我们的英雄，使其面向另一个方向 this.flip("X")。同样，您可以使用属性旋转精灵rotation或使用属性使其透明alpha。

var sitting_hero = Crafty.e("2D, Canvas, hero_sitting")
  .attr({ x: 440, y: 250 })
  .flip("X");

See the Pen  Sprites in Crafty - II by Monty (@Shokeen)  on CodePen.

假设您只需要在画布上渲染给定精灵的一部分。您可以在该方法的帮助下做到这一点 .crop(Number x, Number y, Number w, Number h)。前两个参数确定精灵的 x 和 y 偏移值。最后两个参数确定裁剪精灵的宽度和高度。所有值都应以像素为单位指定。

动画精灵

到目前为止，您一直在通过更改它们的x和y属性来移动不同的实体。这不是问题，因为您大部分时间只是移动矩形框。然而，像这样通过滑动来移动我们的主角看起来很不自然。为玩家可以收集的硬币等对象添加动画也会使游戏更加有趣。

所有与精灵相关的动画都需要您将SpriteAnimation组件添加到实体中。该组件将精灵图中的不同图像视为动画帧。

有关动画的信息存储在reel对象中。卷轴对象有五个不同的属性： 

• anid这是卷轴的名称

• 一个frames数组，其中包含格式为动画的帧列表 [xpos, ypos]

• currentFrame返回当前帧索引的属性 

• easing确定动画应该如何向前移动的属性

• duration以毫秒为单位设置动画持续时间的 属性

精灵动画可以触发四种不同的事件。这些是：

• StartAnimation：当动画开始播放或从暂停状态恢复时触发此事件。

• AnimationEnd：动画结束时触发此事件。
  

• FrameChange：每次当前卷轴中的帧发生变化时都会触发此事件。
  

• ReelChange：当卷轴本身改变时触发此事件。
  

所有这些事件都接收reel对象作为参数。

除了reel对象之外，还有一个.reel()用于定义精灵动画的方法。您可以使用该.animate()方法播放任何定义的动画。 

精灵动画的过程从在画布上创建一个静态精灵开始。

var walking_hero = Crafty.e('2D, Canvas, hero_walking, SpriteAnimation')
  .attr({
    x: 40,
    y: 20
  });

上例中的hero_walking图像是用户在动画之前看到的第一张图像。这些属性用于指定当前实体的位置。创建实体后，您可以使用该.reel()方法定义实际动画。

walking_hero.reel("walking", 1000, [
  [0, 1],
  [1, 1],
  [2, 1],
  [3, 1],
  [4, 1],
  [5, 1]
]);

此方法接受三个参数。第一个参数是Id正在创建的动画的。第二个参数用于设置动画的长度，以毫秒为单位，第三个参数是一个数组数组，包含连续帧的列 (x) 和行 (y)位置。在这种情况下，数组包含第二行中所有精灵的位置。

此方法的另一个版本需要五个参数。前两个参数是卷轴Id和动画长度。第三个和第四个参数用于设置动画在精灵贴图上的起始 x 和 y 位置。最后一个参数设置动画中连续帧的数量。当它设置为负值时，动画将向后播放。

也可以使用以下代码创建上述卷轴动画：

walking_hero.reel("walking", 1000, 0, 1, 6);

虽然这个版本很简洁，但它有点局限。仅当您要包含在动画中的所有精灵都在一行中时，此方法才有用。此外，动画将按照它们在精灵表中出现的顺序显示这些图像。 

定义动画后，您可以使用 .animate( reel_Id [, loopCount])方法播放它。第一个参数是你要播放的动画，第二个参数决定你要播放这个动画的次数。动画默认播放一次。设置loopCount为-1将无限期播放动画。

See the Pen  Sprite Animation in Crafty by Monty (@Shokeen)  on CodePen.

在某些情况下，您可能希望根据事件只播放一次动画。例如，当用户按下按钮使玩家跳跃时，应该播放跳跃动画。您可以在上面的演示中尝试一下。按向上箭头键将使第二个精灵跳跃。这是检测按键的代码：

jumping_hero.bind('KeyDown', function(evt) {
  if (evt.key == Crafty.keys.UP_ARROW) {
    jumping_hero.animate("jumping", 1);
  }
});

您还可以使用 .pauseAnimation()and .resumeAnimation()方法在中途暂停和恢复动画。 

如果单个精灵附有多个动画，您可以使用该 .isPlaying([String reelId])方法确定当前是否正在播放特定动画。如果没有Id提供，它将检查是否有任何动画正在播放。

结论

完成本教程后，您应该能够在 Crafty 中加载自己的精灵表，并使用它们来表示不同的游戏实体，而不是各种矩形。您现在还可以根据不同的事件将不同的动画应用于实体。我应该提醒您，我在本教程中使用了 Crafty 版本 0.7.1，并且演示可能不适用于其他版本的库。