精灵

精灵是 PixiJS 中最简单且最常见的可渲染对象。它们表示要显示在屏幕上的一个图像。每个 Sprite 包含一个需绘制的 Texture，以及在场景图中发挥作用所需的所有变换和显示状态。

创建精灵

要创建 Sprite，你需要的是一个 Texture（检出 Texture 指南）。使用 Assets 类加载 PNG 的 URL，然后调用 Sprite.from(url)，设置全部即可。与 v7 不同，现在你必须在使用纹理之前加载它，这是为了确保最佳实践。

查看 精灵示例代码。

使用精灵

在我们的 容器指南中，我们了解了 Container 类及其定义的各种属性。由于 Sprite 对象也是容器，所以你可以移动精灵、旋转它以及更新任何其他显示属性。

Alpha、Tint 和混合模式

Alpha 是标准显示对象属性。你可以通过逐渐让每个精灵的 alpha 从 0.0 变成 1.0 的方式使精灵逐渐融入场景中。

染色允许你用一种颜色值将每一个像素的颜色值相乘。例如，如果你有一个地牢游戏，你可以通过设置 obj.tint = 0x00FF00 来显示一个角色的中毒状态，这会给该角色一个绿色的色调。

混合模式改变了在渲染时像素颜色如何添加到屏幕上的方式。有三种主要模式：add，它将每个像素的 RGB 通道添加到精灵下方的内容中（适用于发光和照明）；multiply，其工作方式类似于 tint，但以逐个像素为基础；以及screen，它覆盖像素，从而提亮像素下方的内容。

Scale 缩放相对于 Width 宽和 Height 高

在使用精灵时，一个常见的混乱之处在于缩放和尺寸。Container 容器类允许你为任何对象设置 x 和 y 缩放。作为容器的精灵也支持缩放。此外，精灵还支持显式 width 和 height 属性，可用于实现相同的效果，但它们是以像素值而不是百分比来表示的。之所以这样做，是因为 Sprite 精灵对象拥有一个 Texture 纹理，Texture 纹理具有显式宽和高。当你设置一个精灵的宽时，PixiJS 会在内部将该宽转换为底层纹理宽的一个百分比，并更新对象 x 的缩放。因此，宽和高实际上只是用于更改缩放的便捷方法，它们基于像素尺寸而不是百分比。

Pivot 轴点相对于 Anchor 锚点

如果你将一个精灵添加到舞台并旋转它，它默认将围绕图像的左上角进行旋转。在某些情况下，这是你想要的。但在许多情况下，你希望精灵围绕其包含的图像的中心或某个任意点进行旋转。

有两种方法可以实现这一点：枢轴点和锚点

一个对象pivot 枢轴点是从 Sprite 精灵的左上角开始向像素外延伸的一个偏移量。其默认为 (0, 0)。如果你有一个纹理为 100px x 50px 的 Sprite 精灵，且要将轴点设置为图像的中心，那么你需要将轴点设置为 (50, 25) - 即宽度的二分之一和高度的二分之一。请注意，轴点可以设置在图像外部，这意味着轴点可能小于零或大于宽/高。例如，这在设置复杂的动画层次时很有用。每个 Container 容器都有一个轴点。

相比之下，锚点仅适用于 Sprite 精灵。锚点以百分比形式指定，范围从 0.0 到 1.0，以 每个维度一种方式。若要使用锚点围绕纹理的中心点旋转，你需要将精灵的锚点设置为 (0.5, 0.5) - 宽和高的 50%。虽然不常见，但锚点也可以超出标准的 0.0 到 1.0 范围。

锚点的优点在于它们与分辨率和维度无关。如果将Sprite的锚点设置在中间，那么之后改变贴图大小，对象仍会正确旋转。而如果使用基于像素的计算设置了一个轴心，那么改变贴图大小就需要改变轴心点。

因此，一般而言，在使用Sprite时需要使用锚点。

最后一点提示：与CSS不同，在CSS中，设置图像的转换中心点并不会移动图像，而在PixiJS中，设置锚点或轴心会移动屏幕上的对象。换句话说，设置锚点或轴心不仅会影响旋转中心点，还会影响Sprite相对于其父级的位置。