学习 PixiJS — 精灵状态

Tonny 发布于2019-08-23 14:49 / 2172人阅读

摘要：每个多带带的行为称为状态。状态播放器用于控制精灵状态。这个雪碧图中实际上有八个精灵状态四个静态状态和四个动画状态。下图显示了雪碧图上的状态以及标识这些状态的帧号。将每个键的值设置为与状态对应的帧编号。

精灵状态

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

如果要开始使用精灵状态，首先需要一个状态播放器。状态播放器用于控制精灵状态。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 。下图显示了这些状态在雪碧图上的位置。

这些状态中的每一个由四个帧组成，当在循环中播放时，将创建连续的步行动画。要定义每个动画状态，就在 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 — 粒子效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101203.html

学习 PixiJS — 动画精灵

摘要：也就是说用这种图片做出这样的效果要制作动画精灵我们需要用到的方法。定义使用纹理数组创建动画精灵的方法。返回值返回一个对象，对象会有一些属性和方法，用于控制动画精灵。下一篇学习精灵状态说明看完官方教程中提到的这本书 — Learn Pixi.js ，准备写写读后感了，官方教程中所说的内容，基本上就是书的前4章，所以我就从第5章开始写写吧。动画精灵指的是按顺序使用一系列略有不同的图像...

PrototypeZ 2019-08-23 14:42 评论0 收藏0
学习 PixiJS — 交互工具

摘要：设置缩放比例的构造函数还可以传入第三个参数，这个可选的参数用来确保使用的坐标将匹配画布的缩放像素坐标。将其设置为将再次启用拖动。说明 Pixi 内置一组功能有限的用于鼠标交互和触摸交互的方法，但是对于游戏和应用程序所需的丰富交互性，建议使用第三方库来简化操作，这篇文章介绍的是 Tink 库，它有通用的指针对象、拖放精灵、按钮对象、键盘控制等一些有用的功能。使用 Tink 库要...

zlyBear 2019-08-23 15:38 评论0 收藏0
学习 PixiJS — 粒子效果

摘要：使用粒子发射器方法会产生一次粒子爆发，但通常你必须产生连续的粒子流。发射器具有和方法，可让打开和关闭粒子流，并可以定义粒子的创建间隔。你如何创造火，烟，魔法和爆炸等效果？你制作了许多小精灵，几十，几百，甚至上千个精灵。然后对这些精灵应用一些物理效果，使它们的行为类似于你尝试模拟的元素。你还必须给他们一些关于它们应该如何出现和消失以及应该形成什么样的模式的规则。这些微小的精灵被称为粒子...

chanjarster 2019-08-23 14:53 评论0 收藏0
开始学习 PixiJS

摘要：它自动侦测使用或者。开发者无需专门学习就能感受到强大的硬件加速的力量。要注意的是，虽然非常适合制作游戏，但它并不是一个游戏引擎，它的核心本质是尽可能快速有效地在屏幕上移动物体。可以被处理的图像被称作纹理。 PixiJS 介绍 PixiJS 是一个超快的2D渲染引擎。它自动侦测使用 WebGL 或者 Canvas。开发者无需专门学习 WebGL 就能感受到强大的硬件加速的力量。 Pixi...

fredshare 2019-08-23 13:42 评论0 收藏0
学习 PixiJS — 小精灵冒险

摘要：说明小精灵冒险是一书中最后一个案例。在游戏循环中，通过减小平铺精灵的值，使其向左移动。如果方法返回，则退出循环，表示小精灵碰撞到柱子了。重置游戏如果小精灵碰撞到柱子，则在秒钟延迟后重置游戏。说明小精灵冒险是 Learn Pixi.js 一书中最后一个案例。点击屏幕让小精灵飞起来，小精灵上升时，会拍打翅膀，并且会有小星星产生。如果她撞到柱子上，她会爆炸成一堆小星星。帮助她通过15个...

dmlllll 2019-08-26 13:35 评论0 收藏0