雪碧动画

雪碧引擎

精灵引擎 Qt Quick精灵引擎是一种随机状态机，可对包含多帧动画的图像进行切分。

状态机

精灵引擎的一个主要功能是其内部状态机。这与Qt Quick 中的状态和转换不同，更像是传统的状态机。精灵可以加权过渡到其他精灵，也可以返回到自身。当一个精灵动画结束时，精灵引擎会根据刚刚结束的精灵的加权转换，随机选择下一个精灵。

您可以通过两种方式影响当前播放的精灵。你可以任意强迫它立即开始播放任何精灵，也可以让它逐渐过渡到指定的精灵。如果您指示它逐步过渡，那么它将通过有效的状态转换，使用最少的精灵（但忽略相对权重）到达目标精灵。这样就可以在两个不同的精灵之间轻松插入过渡动画。

举例来说，上图展示了一个假定的 2D 平台游戏角色的精灵。角色一开始显示的是站立状态。从这个状态开始，如果没有外部输入，他将过渡到等待动画、行走动画或再次播放站立动画。由于这些转换的权重分别为 1、0 和 3，因此当站立动画结束时，他有四分之一的机会播放等待动画，有四分之三的机会再次播放站立动画。这样，角色在等待时就会有轻微的动画效果和多变的行为。

由于行走动画的权重为零，因此站立动画通常不会过渡到行走动画。但如果将目标动画设置为行走动画，那么当它完成站立动画后，就会播放行走动画。如果之前是在等待动画中，它会先播放等待动画，然后播放站立动画，接着播放行走动画。然后它将继续播放行走动画，直到目标动画取消设置，此时它将在完成行走动画后切换到站立动画。

如果将目标状态设置为跳跃动画，则会在播放跳跃动画之前完成行走动画。由于跳跃动画不会过渡到其他状态，因此它仍将继续播放跳跃动画，直到状态被迫改变为止。在这个示例中，你可以将它设置回行走状态，并将目标动画更改为行走或无目标动画（这将导致它在行走动画后播放站立动画）。请注意，通过强制设置动画，可以立即开始播放动画。

输入格式

精灵引擎接受的文件格式与其他 QML 类型（如Image ）接受的文件格式相同。不过，为了制作图像动画，精灵引擎要求图像文件包含动画的所有帧。这些帧应排列在连续的一行中，可以从文件的右边边缘绕到从文件左边边缘开始的下一行（直接位于前一行的下方）。

以上图为例。现在，只考虑黑色数字，并假设方格为 40x40 像素。通常，图像是从左上角读取的。如果指定帧大小为 40x40 像素，帧数为 8，那么就会按照帧的编号读入。左上角的帧是第一帧，右上角的帧是第五帧，然后换行（文件中 0,40 像素位置）读取第六帧。如果在第四帧下面的方格中存在任何图像数据，那么动画中将不会包含这些数据。

我们可以从任意偏移量加载动画，但它们仍将遵循相同的模式。现在来看看红色数字。如果我们指定动画从像素位置 120,0 开始，帧数为 5，帧大小与之前相同，那么动画将按照红色编号加载帧。由于动画会从 120,0 位置开始读取 40x40 的图块，因此不会使用图像的第一个 120x40 图块。当读取到文件末尾 160,0 处时，就会从 0,40 开始读取下一行。

蓝色数字显示的是从 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 的精灵会占用整个文件，因此必须指定帧大小。没有指定帧大小的动画假定为正方形，占用整个文件而不包边，因此必须指定帧数。

精灵引擎会在内部复制和裁剪图像，使其符合更易于读取的内部格式，这就导致了一些图形内存限制。由于它要求单个引擎的所有精灵都在同一个纹理中，因此在嵌入式设备上尝试加载许多不同的动画可能会遇到纹理内存限制。在这种情况下，控制台会输出包含最大纹理大小的警告。

有几种工具可以帮助将一组图像转化为精灵表。下面是一些示例：

• Photoshop 插件：http://www.johnwordsworth.com/projects/photoshop-sprite-sheet-generator-script
• Gimp 的 SpriteSheet 插件
• Cmd-line 工具：http://www.imagemagick.org/script/montage.php

使用精灵引擎的 QML 类型

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

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

此外，ImageParticle 可以使用Sprite 类型为每个粒子定义精灵。同样，每个类型只有一个精灵引擎。其工作原理与SpriteSequence 类似，但也具有ImageParticle 类型提供的参数化可变性。

动画精灵类型

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