进修 PixiJS — 精灵状况

2019年8月20日 275次阅读 来源: FEWY

精灵状况

假如你有庞杂的游戏角色或交互式对象，你能够愿望该角色依据游戏环境中发作的状况，以差别的体式格局运转。每一个零丁的行动称为状况。假如你在精灵上定义状况，那末只需游戏中涌现与该状况相对应的事宜，就能够触发这些状况。
比方，经由过程键盘的方向键掌握一个游戏角色时，按下左箭头，角色就向左挪动，实在能够理解为，按下左键头时，触发了角色的向左挪动的状况。

假如要最先运用精灵状况，起首须要一个状况播放器。状况播放器用于掌握精灵状况。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 图象，个中包括使角色看起来像是在四个差别方向行走所需的一切帧。

《进修 PixiJS — 精灵状况》

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

静态状况

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

《进修 PixiJS — 精灵状况》

能够看到第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);

下图显现了转变这些状况对精灵表面的影响。

《进修 PixiJS — 精灵状况》

你在能够在任何你须要的处所运用它，让精灵对游戏天下的变化作出反应。比较罕见的一个场景是在键盘按键的时刻，如许你就能够经由过程箭头键的方向转变精灵面向的方向。比方，按下左箭头键时，你能够经由过程以下体式格局将精灵转向左边。

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

只需对其他的箭头键运用雷同的花样，就能够使精灵面向一切的四个方向。

动画状况

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

《进修 PixiJS — 精灵状况》

这些状况中的每一个由​四个帧构成，当在轮回中播放时，将建立一连的步行动画。要定义每一个动画状况，就在 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]
};

如今它的状况都被定义了，让我们做一个会走的精灵。

把制造动画精灵和定义状况另有键盘相应所学到的学问相结合，就能够制造一个步行游戏角色。

《进修 PixiJS — 精灵状况》

检察结果

假如愿望精灵在屏幕上挪动得更快或更慢，就在箭头键要领中变动 vx 和 vy 的值。假如愿望精灵的步行动画结果更快或更慢，就变动精灵的 fps 属性。

制造动画帧的东西

  • 运用 Adobe Illustrator 或 Photoshop 手动绘制每一个帧。
  • Flash Professional 只需将动画导出为雪碧图，就能够在 JavaScript 游戏中运用它。你还能够运用 Shoebox 等东西将 Flash 的 SWF 文件花样转换为纹理图集。
  • Piskel 是一个免费的在线东西，用于制造像素作风的动画游戏角色。
  • Dragon Bones，Spine，和 Creature。这三个东西都异常类似。它们能够建立庞杂的游戏角色，为它们设置动画，并将它们导出为雪碧图和 JSON 文件。
  • Shoebox 是一款基于Adobe Air 的免费应用程序，它的功用挺多，比方能够用来制造雪碧图，也能够拆分雪碧图，还能够检测通明图象中的精灵并将其剪切出来 等。

上一篇 进修 PixiJS — 动画精灵

下一篇 进修 PixiJS — 粒子结果

    原文作者：FEWY
    原文地址: https://segmentfault.com/a/1190000017951826
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞