Skip to main content

精灵

¥Sprites

Sprites 是 PixiJS 中最简单、最常见的可渲染对象。它们代表要在屏幕上显示的单个图片。每个 精灵 包含一个要绘制的 质地，以及在场景图中运行所需的所有转换和显示状态。

¥Sprites are the simplest and most common renderable object in PixiJS. They represent a single image to be displayed on the screen. Each Sprite contains a Texture to be drawn, along with all the transformation and display state required to function in the scene graph.

创建精灵​

¥Creating Sprites

要创建精灵，你只需要一个纹理（查看纹理指南）。使用 Assets 类加载 PNG 的 URL，然后调用 Sprite.from(url) 就完成了。与 v7 不同，你现在必须在使用纹理之前加载纹理，这是为了确保最佳实践。

¥To create a Sprite, all you need is a Texture (check out the Texture guide). Load a PNG's URL using the Assets class, then call Sprite.from(url) and you're all set. Unlike v7 you now must load your texture before using it, this is to ensure best practices.

看看 精灵示例代码。

¥Check out the sprite example code.

使用精灵​

¥Using Sprites

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

¥In our Container guide, we learned about the Container class and the various properties it defines. Since Sprite objects are also containers, you can move a sprite, rotate it, and update any other display property.

Alpha、色调和混合模式​

¥Alpha, Tint and Blend Modes

Alpha 是标准显示对象属性。你可以使用它在一段时间内将每个精灵的 Alpha 从 0.0 设置为 1.0，从而将精灵淡入场景中。

¥Alpha is a standard display object property. You can use it to fade sprites into the scene by animating each sprite's alpha from 0.0 to 1.0 over a period of time.

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

¥Tinting allows you multiply the color value of every pixel by a single color. For example, if you had a dungeon game, you might show a character's poison status by setting obj.tint = 0x00FF00, which would give a green tint to the character.

混合模式改变渲染时像素颜色添加到屏幕的方式。三种主要模式是添加，将每个像素的 RGB 通道添加到精灵下的任何内容（对于发光和照明有用），乘法，其工作方式类似于 tint，但基于每个像素，以及屏幕，覆盖像素，增亮 无论它们下面是什么。

¥Blend modes change how pixel colors are added to the screen when rendering. The three main modes are add, which adds each pixel's RGB channels to whatever is under your sprite (useful for glows and lighting), multiply which works like tint, but on a per-pixel basis, and screen, which overlays the pixels, brightening whatever is underneath them.

比例与宽度和高度​

¥Scale vs Width & Height

使用精灵时，一个常见的混淆字段在于缩放和尺寸。Container 类允许你设置任何对象的 x 和 y 比例。精灵作为容器，也支持缩放。然而，此外，Sprite 支持显式 width 和 height 属性，可用于实现相同的效果，但以像素为单位而不是百分比。这是可行的，因为 Sprite 对象拥有一个具有明确宽度和高度的纹理。当你设置 Sprite 的宽度时，PixiJS 在内部将该宽度转换为基础纹理宽度的百分比并更新对象的 x 比例。因此，宽度和高度实际上只是基于像素尺寸而不是百分比来更改比例的便捷方法。

¥One common area of confusion when working with sprites lies in scaling and dimensions. The Container class allows you to set the x and y scale for any object. Sprites, being Containers, also support scaling. In addition, however, Sprites support explicit width and height attributes that can be used to achieve the same effect, but are in pixels instead of a percentage. This works because a Sprite object owns a Texture, which has an explicit width and height. When you set a Sprite's width, internally PixiJS converts that width into a percentage of the underlying texture's width and updates the object's x-scale. So width and height are really just convenience methods for changing scale, based on pixel dimensions rather than percentages.

枢轴与锚点​

¥Pivot vs Anchor

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

¥If you add a sprite to your stage and rotate it, it will by default rotate around the top-left corner of the image. In some cases, this is what you want. In many cases, however, what you want is for the sprite to rotate around the center of the image it contains, or around an arbitrary point.

有两种方法可以实现此目的：枢轴和锚点

¥There are two ways to achieve this: pivots and anchors

对象的轴心点是距 Sprite 左上角的偏移量（以像素表示）。默认为 (0, 0)。如果你有一个纹理为 100px x 50px 的精灵，并且想要将枢轴点设置为图片的中心，则可以将枢轴设置为 (50, 25) - 宽度的一半，高度的一半。请注意，枢轴可以设置在图片外部，这意味着枢轴可能小于零或大于宽度/高度。例如，这对于设置复杂的动画层次结构非常有用。每个容器都有一个枢轴。

¥An object's pivot is an offset, expressed in pixels, from the top-left corner of the Sprite. It defaults to (0, 0). If you have a Sprite whose texture is 100px x 50px, and want to set the pivot point to the center of the image, you'd set your pivot to (50, 25) - half the width, and half the height. Note that pivots can be set outside of the image, meaning the pivot may be less than zero or greater than the width/height. This can be useful in setting up complex animation hierarchies, for example. Every Container has a pivot.

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

¥An anchor, in contrast, is only available for Sprites. Anchors are specified in percentages, from 0.0 to 1.0, in each dimension. To rotate around the center point of a texture using anchors, you'd set your Sprite's anchor to (0.5, 0.5) - 50% in width and height. While less common, anchors can also be outside the standard 0.0 - 1.0 range.

锚点的好处是它们与分辨率和尺寸无关。如果你将精灵设置为锚定在中间，然后更改纹理的大小，你的对象仍将正确旋转。如果你使用基于像素的计算设置枢轴，则更改纹理大小将需要更改枢轴点。

¥The nice thing about anchors is that they are resolution and dimension agnostic. If you set your Sprite to be anchored in the middle then later change the size of the texture, your object will still rotate correctly. If you had instead set a pivot using pixel-based calculations, changing the texture size would require changing your pivot point.

因此，一般来说，在使用 Sprite 时你需要使用锚点。

¥So, generally speaking, you'll want to use anchors when working with Sprites.

最后一点：与 CSS 不同，在 CSS 中设置图片的变换原点不会移动图片，而在 PixiJS 中，设置锚点或枢轴将在屏幕上移动对象。换句话说，设置锚点或枢轴不仅会影响旋转原点，还会影响精灵相对于其父级的位置。

¥One final note: unlike CSS, where setting the transform-origin of the image doesn't move it, in PixiJS setting an anchor or pivot will move your object on the screen. In other words, setting an anchor or pivot affects not just the rotation origin, but also the position of the sprite relative to its parent.