学习 PixiJS — 精灵状态

精灵状态

如果你有复杂的游戏角色或交互式对象，你可能希望该角色根据游戏环境中发生的情况，以不同的方式运行。每个单独的行为称为状态。如果你在精灵上定义状态，那么只要游戏中出现与该状态相对应的事件，就可以触发这些状态。

比如，通过键盘的方向键控制一个游戏角色时，按下左箭头，角色就向左移动，其实可以理解为，按下左键头时，触发了角色的向左移动的状态。

如果要开始使用精灵状态，首先需要一个状态播放器。状态播放器用于控制精灵状态。 Pixi 精灵没有自己的状态播放器，但你可以使用 SpriteUtilities 库中的 sprite 的方法，该方法将创建一个内置状态播放器的精灵。

SpriteUtilities 库的使用上一篇提到过了，可以看 学习 PixiJS — 动画精灵 这篇文章。

sprite

定义：

使用 sprite 函数制作任何类型的 Pixi 精灵。

用法：

let anySprite = su.sprite(frameTextures, xPosition, yPosition);

参数：

第一个参数 frameTextures 可以是以下任何一个：

PNG
Pixi
id
PNG
Pixi

如果你为 sprite 方法提供一个数组，它将返回一个动画精灵，这个动画精灵会内置了一个状态播放器。

状态播放器只是四个新属性和方法的集合，用于控制精灵动画状态。

stopAnimation
show

第二个参数 xPosition 和 第三个参数 yPosition 表示创建的精灵的 x 和 y 坐标。

什么是精灵状态？

下图是一个游戏角色的 PNG 图像，其中包含使角色看起来像是在四个不同方向行走所需的所有帧。

这个雪碧图中实际上有八个精灵状态：四个静态状态和四个动画状态。让我们看看这些状态是什么以及如何定义它们。

静态状态

精灵的静态状态定义精灵在不移动时的四个位置。这些状态是： down ， left ， right ，和 up 。下图显示了雪碧图上的状态以及标识这些状态的帧号。

可以看到第0帧是向下状态，第4帧是左侧状态，第8帧是右侧状态，第12帧是向上状态。怎么定义这些状态呢？首先，创建精灵，以下代码展示了如何使用 sprite 方法创建精灵。

let frames = su.filmstrip("images/adventuress.png", 32, 32);
let adventuress = su.sprite(frames);

接下来，在精灵上创建一个名为 states 的对象字面量属性。并在 states 对象中创建 down ， left ， right ，和 up 的键。将每个键的值设置为与状态对应的帧编号。

adventuress.states = {
    down: 0,
    left: 4,
    right: 8,
    up: 12
};

接下来就是使用精灵的 show 方法来显示正确的状态。例如，以下代码展示如何显示精灵的 left 状态：

adventuress.show(adventuress.states.left);

下图显示了改变这些状态对精灵外观的影响。

你在可以在任何你需要的地方使用它，让精灵对游戏世界的变化作出反应。比较常见的一个场景是在键盘按键的时候，这样你就可以通过箭头键的方向改变精灵面向的方向。例如，按下左箭头键时，你可以通过以下方式将精灵转向左侧。

//左箭头按下
left.press = () => {
 //显示`left`状态
 adventuress.show(adventuress.states.left);
};

只需对其余的箭头键使用相同的格式，就可以使精灵面向所有的四个方向。

动画状态

精灵的动画状态定义了精灵移动时的四个动作序列。这些状态是： walkDown ， walkLeft ， walkRight ，和 walkUp 。下图显示了这些状态在雪碧图上的位置。

这些状态中的每一个由​四个帧组成，当在循环中播放时，将创建连续的步行动画。要定义每个动画状态，就在 states 对象中创建描述该状态的键。键的值应该是一个包含两个元素的数组：起始帧编号和结束帧编号。例如，以下是如何定义 walkLeft 状态：

//3是动画序列 开始的帧编号，5是结束的帧编号
walkLeft: [3, 5]

以下是如何将这四种新动画状态添加到 adventuress 精灵中：

adventuress.states = {
    down: 0,
    left: 4,
    right: 8,
    up: 12,
    walkDown: [0, 3],
    walkLeft: [4, 7],
    walkRight: [8, 11],
    walkUp: [12, 15]
};

现在它的状态都被定义了，让我们做一个会走的精灵。

把制作动画精灵和定义状态还有 键盘响应 所学到的知识相结合，就可以制作一个步行游戏角色。

查看效果

如果希望精灵在屏幕上移动得更快或更慢，就在箭头键方法中更改 vx 和 vy 的值。如果希望精灵的步行动画效果更快或更慢，就更改精灵的 fps 属性。

制作动画帧的工具

• 使用 Adobe Illustrator 或 Photoshop 手动绘制每个帧。
• Flash Professional 只需将动画导出为雪碧图，就可以在 JavaScript 游戏中使用它。你还可以使用 Shoebox 等 工具 将 Flash 的 SWF 文件格式转换为纹理图集。
• Piskel 是一个免费的在线工具，用于制作像素风格的动画游戏角色。
• Dragon Bones ， Spine ，和 Creature 。这三个工具都非常相似。它们可以创建复杂的游戏角色，为它们设置动画，并将它们导出为雪碧图和 JSON 文件。
• Shoebox 是一款基于 Adobe Air 的免费应用程序，它的功能挺多，比如可以用来制作雪碧图，也可以拆分雪碧图，还可以检测透明图像中的精灵并将其剪切出来 等。