精灵动画#

基于精灵的可灵活过渡动画

#精灵引擎

Qt Quick精灵引擎是一个结合了切割含有多个动画帧图像能力的随机状态机。

#状态机

精灵引擎的主要功能是其内部状态机。这不同于Qt Quick中的状态和过渡，更像是传统状态机。精灵可以具有到其他精灵或自身的加权过渡。

您可以以两种方式影响正在播放的精灵。您可以强制它立即开始播放任何精灵，或告诉它逐渐过渡到指定的精灵。如果您指示它逐渐过渡，则它将通过使用最少的干预精灵进行有效的状态转换来达到目标精灵（但忽略相对权重）。这允许您轻松地在两个不同精灵之间插入过渡动画。

../_images/spriteenginegraph.png

例如，考虑上面的图表，它显示了假设的2D平台游戏角色的精灵。角色从显示“站立”状态开始。从这个状态开始，除非有外部输入，否则他将会过渡到“等待”动画、“行走”动画或再次播放“站立”动画。因为那些过渡的权重分别为1、0和3，所以在“站立”动画结束时，他播放“等待”动画的概率是四分之一，再次播放“站立”动画的概率是四分之三。这允许角色在等待时有轻微动态和可变的行为。

由于存在指向“行走”动画的零权重过渡，所以“站立”动画通常会跳过那里。但如果你将目标动画设置为“行走”动画，当“站立”动画结束时，它将播放“行走”动画。如果之前处于“等待”动画中，则先播放完“等待”动画，然后播放“站立”动画，再播放“行走”动画。然后，它会继续播放“行走”动画，直到目标动画被取消设置，此时在播放完“行走”动画后，它会切换到“站立”动画。

如果您然后将目标状态设置为“跳跃”动画，它将先播放完“行走”动画，然后再播放“跳跃”动画。因为“跳跃”动画不会过渡到其他状态，所以它将一直播放“跳跃”动画，直到强制改变状态。在这个示例中，您可以将其设置回“行走”，并将目标动画更改为“行走”或什么都没有（这将导致它在播放完“行走”动画后播放“站立”动画）。请注意，通过强制设置动画，您可以立即开始播放动画。

输入格式#

精灵引擎接受的文件格式与QML其他类型接受的文件格式相同，例如Image。然而，为了动化图像，精灵引擎需要图像文件包含所有动画帧。这些帧应按连续行排列，可以从文件的右边缘回绕到从文件左边缘开始的更低的一行（并且放置在上一行的直接下方）。

../_images/spritecutting.png

例如，看看上面的图像。现在，只考虑黑色数字，并假设方块大小为40x40像素。通常，图像是从左上角读取的。如果你指定帧大小为40x40像素，帧数为8，则它会以它们的编号顺序读取帧。左上角的帧是第一帧，右上角的帧是第五帧，然后它会回绕到下一行（在文件中的像素位置0,40）以读取第六帧。它会停止读取到标记为8的帧之后，如果有任何图像数据在第四帧下面的方块中，则它将不被包括在动画中。

可以从任何任意偏移加载动画，但它们仍会遵循相同的模式。现在考虑红色数字。如果我们指定动画从像素位置120,0开始，帧数为5，帧大小与之前相同，则它将按红色的编号顺序加载帧。图像的第一个120x40区域将不会被使用，因为它从位置120,0开始读取40x40的块。当它到达文件末端的160,0时，它然后从头文件中的40,0开始读取下一行。

蓝色数字显示如果尝试从40,40开始加载两个相同大小的帧的帧号。请注意，可以从一个图像文件中加载多个精灵。红色、蓝色和黑色数字都可以作为单独的动画加载到同一个精灵引擎中。以下代码按图像加载动画。它还指定动画要以每秒20帧的速度播放。

Sprite {
    name: "black"
    source: "image.png"
    frameCount: 8
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "red"
    source: "image.png"
    frameX: 120
    frameCount: 5
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "blue"
    source: "image.png"
    frameX: 40
    frameX: 40
    frameCount: 2
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}

一个动画中的帧必须具有相同的大小。然而，同一文件中的多个动画并不需要。没有指定frameCount的精灵假定它们是整个文件的一部分，你必须指定帧大小。没有指定帧大小的精灵假定它们是正方形并占据整个文件而不回绕，你必须指定帧数。

精灵引擎在内部复制并切割图像以便于以更容易读取的内部格式，这导致了某些图形内存限制。因为它要求单一带一个精灵到的纹理是相同的，所以尝试加载许多不同的动画可能会在嵌入式设备上遇到纹理内存限制。在这种情况下，会在控制台中输出最大纹理大小警告。

有一些工具可以帮助将一组图像转换为精灵网格。以下是一些示例：

使用精灵引擎的QML类型#

可以为精灵引擎定义精灵，使用的是 Sprite 类型。此类型包括输入参数、动画长度以及加权过渡到其他动画。它是一个纯粹的数据类，不渲染任何内容。

SpriteSequence 是一种类型，它使用精灵引擎来绘制其中定义的精灵。它是一个单一且自包含的精灵引擎，不与其他精灵引擎交互。Sprite 类型可以在使用精灵引擎的类型间共享，但这是手动完成的。因此，如果您在一个 SpriteSequence 中定义了精灵，则需要在另一个 SpriteSequence 的精灵属性中重新定义它（或引用相同的 Sprite 类型），以便过渡到该动画。

此外，ImageParticle 可以使用 Sprite 类型为每个粒子定义精灵。这同样是每个类型一个单一的精灵引擎。它与 SpriteSequence 工作方式类似，但它还具备了 ImageParticle 类型提供的参数化可变特性。

动画精灵类型#

对于不需要在动画间进行过渡的使用案例，可以考虑使用 AnimatedSprite 类型。此类型使用相同的输入格式来显示精灵动画，但一次只显示一个。它还提供了更细粒度的手动控制，因为没有精灵引擎在幕后管理时间和过渡。