学习 PixiJS — 精灵状态

精灵状态

如果你有复杂的游戏角色或交互式对象，你可能希望该角色根据游戏环境中发生的情况，以不同的方式运行。每个单独的行为称为状态。如果你在精灵上定义状态，那么只要游戏中出现与该状态相对应的事件，就可以触发这些状态。
比如，通过键盘的方向键控制一个游戏角色时，按下左箭头，角色就向左移动，其实可以理解为，按下左键头时，触发了角色的向左移动的状态。

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

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

sprite

定义：

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

用法：

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

参数：

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

• 一个 PNG 图像字符串
• 一个Pixi 纹理对象
• 纹理图集帧 id 数组
• 一个 PNG 图像字符串的数组
• 一个 Pixi 纹理对象数组

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

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

• fps：用于设置精确的动画速度的属性，以每秒帧数为单位。它的默认值是12，fps 与游戏循环 fps 无关，这意味着你可以让精灵动画以独立于游戏或应用程序速度的速度播放。

• playAnimation：一种播放精灵动画的方法。如果要播放帧的子集，就传入开始帧编号和结束帧编号两个参数。默认情况下，动画将循环播放，除非你将精灵的 loop 属性值设置为 false 。

• stopAnimation：一种在当前帧停止精灵动画的方法。

• show：接受参数是一个数字，用来显示特定帧编号的方法。

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

什么是精灵状态？

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

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

静态状态

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

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

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

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

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

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

Iori.show(Iori.states.left);

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

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

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

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

动画状态

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

[外链图片转存中…(img-VSoCxozn-1712410142452)]

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

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

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

Iori.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 的免费应用程序，它的功能挺多，比如可以用来制作雪碧图，也可以拆分雪碧图，还可以检测透明图像中的精灵并将其剪切出来 等。

上一篇 学习 PixiJS — 动画精灵

下一篇 学习 PixiJS — 粒子效果