Skip to main content

平铺精灵

🌐 Tiling Sprite

TilingSprite 是一种高性能的方法，用于在矩形区域上渲染重复的纹理。它不是拉伸纹理，而是重复（平铺）纹理以填充给定空间，非常适合用于背景、视差效果、地形和用户界面面板。

🌐 A TilingSprite is a high-performance way to render a repeating texture across a rectangular area. Instead of stretching the texture, it repeats (tiles) it to fill the given space, making it ideal for backgrounds, parallax effects, terrain, and UI panels.

import { TilingSprite, Texture } from 'pixi.js';

const tilingSprite = new TilingSprite({
  texture: Texture.from('assets/tile.png'),
  width: 400,
  height: 300,
});

app.stage.addChild(tilingSprite);

什么是 TilingSprite？​

🌐 What is a TilingSprite?

  • 它在定义的区域内重复绘制纹理。
  • 除非你调整 tileScale，否则纹理默认不会缩放。
  • 精灵的整体 width 和 height 决定了瓦片填充的区域大小，与纹理的原生尺寸无关。
  • 图案的偏移、缩放和旋转可以独立于对象的变换进行控制。

主要属性​

🌐 Key Properties

属性描述
texture被重复的纹理
tilePosition控制平铺图案偏移的 ObservablePoint
tileScale控制每个瓦片缩放的 ObservablePoint
tileRotation控制瓦片图案旋转的数字
width / height由瓦片填充的区域大小
anchor调整 TilingSprite 的原点
applyAnchorToTexture如果为 true，锚点会影响平铺图案的起始点
clampMargin边距调整以避免边缘伪影（默认值：0.5）

宽度和高度 vs 缩放比例​

🌐 Width & Height vs Scale

与 Sprite 不同，在 TilingSprite 中设置 width 和 height 会直接改变可见的平铺区域。它 不会影响 瓷砖的缩放。

🌐 Unlike Sprite, setting width and height in a TilingSprite directly changes the visible tiling area. It does not affect the scale of the tiles.

// Makes the tiling area bigger
tilingSprite.width = 800;
tilingSprite.height = 600;

// Keeps tiles the same size, just tiles more of them

要缩放瓷砖图案本身，请使用 tileScale：

🌐 To scale the tile pattern itself, use tileScale:

// Makes each tile appear larger
tilingSprite.tileScale.set(2, 2);

锚点和 applyAnchorToTexture​

🌐 Anchor and applyAnchorToTexture

  • anchor 设置 TilingSprite 的定位枢轴/原点。
  • 如果 applyAnchorToTexture 是 true，锚点也会影响瓷砖图案的起始位置。
  • 默认情况下，无论锚点如何，图块图案都从本地空间的 (0, 0) 处开始。

API 参考​

🌐 API Reference