Skip to main content

平铺精灵

¥Tiling Sprite

TilingSprite 是一种高性能方法，用于在矩形区域内渲染重复纹理。它不会拉伸纹理，而是重复（平铺）纹理以填充给定空间，这使其成为背景、视差效果、地形和 UI 面板的理想选择。

¥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?

  • 它在定义的区域内重复绘制纹理。

    ¥It draws a texture repeatedly across a defined area.

  • 除非你调整 tileScale，否则纹理默认不会缩放。

    ¥The texture is not scaled by default unless you adjust tileScale.

  • 精灵的整体 width 和 height 决定了图块填充的区域大小，与纹理的原始大小无关。

    ¥The sprite's overall width and height determine how much area the tiles fill, independent of the texture's native size.

  • 图案的偏移、缩放和旋转可以独立于对象的变换进行控制。

    ¥The pattern's offset, scale, and rotation can be controlled independently of the object's transform.

主要属性​

¥Key Properties

属性描述
texture正在重复的纹理
tilePositionObservablePoint 控制平铺图案的偏移量
tileScaleObservablePoint 控制每个平铺图的缩放比例
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 的枢轴/原点。

    ¥anchor sets the pivot/origin point for positioning the TilingSprite.

  • 如果 applyAnchorToTexture 为 true，则锚点还会影响平铺图案的起始位置。

    ¥If applyAnchorToTexture is true, the anchor also affects where the tile pattern begins.

  • 默认情况下，无论锚点如何，图块图案都从本地空间的 (0, 0) 处开始。

    ¥By default, the tile pattern starts at (0, 0) in local space regardless of anchor.

API 参考​

¥API Reference