超越基础的狡猾：精灵

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

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

加载精灵表

对于不熟悉Sprite Sheet的用户，它们是图像文件，其中包含几个较小的图形，这些图形一起排列在网格中。 这些较小的图形或精灵中的每一个都可以单独使用，也可以与其他图像一起使用以对不同的对象进行动画处理。

您不能直接在Crafty中加载精灵表并开始使用它。 您还必须在子画面表中告诉它不同图块或子画面的宽度和高度。 您还可以为各个图像指定特定的名称。 例如，带有小石头的精灵可以命名为“ small_stone”，以方便参考。 记住磁贴名称比记住不同图像的实际坐标要容易得多。

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

它具有很多图像，可以在播放器行走，跳跃，站着闲置或射击时使用。 在这种情况下，大多数图块的宽度和高度分别为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属性来设置单个子画面的宽度和高度。

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

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

假设您只需要在画布上渲染给定精灵的一部分。 您可以借助.crop(Number x, Number y, Number w, Number h)方法来执行此操作。 前两个参数确定子画面的x和y偏移值。 最后两个参数确定裁剪后的精灵的宽度和高度。 所有值应以像素为单位指定。

动画精灵

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

所有与Sprite相关的动画都要求您将SpriteAnimation组件添加到实体。 该组件将子画面贴图中的不同图像视为动画帧。

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

• id是卷轴的名称
• 一个frames数组，其中包含[xpos, ypos]格式的动画帧列表
• 一个currentFrame属性，该属性返回当前帧的索引
• easing属性，用于确定动画应如何向前移动
• duration属性，用于设置动画持续时间（以毫秒为单位）

Sprite动画可以触发四个不同的事件。 这些是：

• 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将无限期播放动画。

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

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

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

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

结论

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

JavaScript已成为事实上的网络工作语言之一。 这并非没有学习曲线，而且还有许多框架和库让您也很忙。 如果您正在寻找其他资源来学习或在工作中使用，请查看Envato市场中可用的资源 。

在下一个教程中，您将学习如何在游戏中添加声音。

翻译自: https://code.tutsplus.com/tutorials/crafty-beyond-the-basics-sprites--cms-28094