Skip to main content

精灵

¥Sprite

精灵是 PixiJS 中的基础视觉元素。它们代表要在屏幕上显示的单个图片。每个 精灵 包含一个要绘制的 质地，以及在场景图中运行所需的所有转换和显示状态。

¥Sprites are the foundational visual elements 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.

import { Assets, Sprite } from 'pixi.js';

const texture = await Assets.load('path/to/image.png');
const sprite = new Sprite(texture);

sprite.anchor.set(0.5);
sprite.position.set(100, 100);
sprite.scale.set(2);
sprite.rotation = Math.PI / 4; // Rotate 45 degrees

更新纹理​

¥Updating the Texture

如果你更改了精灵的纹理，它将自动：

¥If you change the texture of a sprite, it will automatically:

  • 重新绑定纹理更新监听器

    ¥Rebind listeners for texture updates

  • 如果设置了宽度/高度，则重新计算宽度/高度，以使视觉大小保持不变。

    ¥Recalculate width/height if set so that the visual size remains the same

  • 触发视觉更新

    ¥Trigger a visual update

const texture = Assets.get('path/to/image.png');
sprite.texture = texture;

缩放 vs 宽度/高度​

¥Scale vs Width/Height

精灵从 Container 继承了 scale，允许基于百分比调整大小：

¥Sprites inherit scale from Container, allowing for percentage-based resizing:

sprite.scale.set(2); // Double the size

精灵还具有 width 和 height 属性，可根据纹理尺寸方便地为 scale 设置大小：

¥Sprites also have width and height properties that act as convenience setters for scale, based on the texture’s dimensions:

sprite.width = 100; // Automatically updates scale.x
// sets: sprite.scale.x = 100 / sprite.texture.orig.width;

API 参考​

¥API Reference