Skip to main content

精灵

🌐 Sprite

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

🌐 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:

  • 重新绑定纹理更新监听器
  • 如果设置了宽度/高度，则重新计算宽度/高度，以使视觉大小保持不变。
  • 触发视觉更新
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