TileSprite: повторяющийся спрайт

TileSprite в Phaser — это специализированный спрайт, текстура которого автоматически повторяется по горизонтали и вертикали, создавая бесшовный фон или эффект движения. Он позволяет экономить ресурсы, так как используется один небольшой фрагмент изображения вместо многократного размещения одинаковых объектов на сцене.

Создание TileSprite

Создание TileSprite производится с использованием метода this.add.tileSprite внутри сцены:

const tile = this.add.tileSprite(x, y, width, height, 'textureKey');

Параметры:

  • x и y — координаты центра TileSprite.
  • width и height — размеры области, которую занимает TileSprite.
  • textureKey — ключ загруженной текстуры, используемой для повторения.

Например:

this.load.image('ground', 'assets/ground.png');

const ground = this.add.tileSprite(400, 300, 800, 600, 'ground');

В этом примере текстура ground.png будет повторяться по всей области 800x600 пикселей.

Свойства TileSprite

1. tilePositionX и tilePositionY Эти свойства отвечают за смещение текстуры внутри TileSprite. Изменение значений позволяет создавать эффект движения фона:

ground.tilePositionX += 2;
ground.tilePositionY += 1;

2. tileScaleX и tileScaleY Позволяют масштабировать повторяющуюся текстуру, не изменяя размер самого TileSprite:

ground.tileScaleX = 2; // текстура будет повторяться с увеличением в 2 раза
ground.tileScaleY = 0.5; // по вертикали уменьшение в 2 раза

3. setOrigin(x, y) TileSprite наследует стандартные свойства спрайта. Изменение точки привязки влияет на позиционирование:

ground.setOrigin(0, 0);

Движение и анимация

TileSprite широко используется для создания параллакса или бесконечно движущихся фонов. Основная идея — изменять tilePositionX или tilePositionY в методе update:

update() {
    ground.tilePositionX -= 3; // движение фона влево
}

Для создания сложного параллакса можно использовать несколько TileSprite с разной скоростью смещения:

this.backgroundFar = this.add.tileSprite(400, 300, 800, 600, 'sky');
this.backgroundNear = this.add.tileSprite(400, 300, 800, 600, 'mountains');

update() {
    this.backgroundFar.tilePositionX -= 0.5;
    this.backgroundNear.tilePositionX -= 2;
}

Коллизии и физика

TileSprite не поддерживает физические коллайдеры для повторяющихся текстур напрямую, так как это просто графический элемент. Для взаимодействия с объектами нужно создавать отдельные невидимые физические объекты (например, статические спрайты или тайлы) и синхронизировать их с TileSprite визуально.

Применение TileSprite

1. Фоны и уровни TileSprite идеально подходит для создания бесконечных фоновых текстур, например, земли, воды, облаков или звездного неба.

2. Параллакс-эффекты Разделение сцен на несколько слоев с разной скоростью смещения усиливает ощущение глубины.

3. Паттерны и интерфейс Можно использовать TileSprite для динамически повторяющихся UI-элементов, таких как полосы загрузки или текстурированные панели.

Рекомендации по производительности

  • Использовать TileSprite вместо множества отдельных спрайтов при повторяющихся изображениях.
  • Минимизировать размер текстуры — TileSprite растягивает её, но маленькая текстура повторяется быстрее.
  • Для плавной анимации фона изменять tilePosition в методе update, избегая изменения самого спрайта (x, y), так как это более ресурсоёмко.

Примеры расширенного использования

Прокрутка фона с ускорением:

let speed = 2;

update() {
    speed += 0.01; // ускорение
    ground.tilePositionX -= speed;
}

Динамическая смена текстуры:

ground.setTexture('newTexture');
ground.tileScaleX = 1.5;

TileSprite обеспечивает гибкость в работе с графикой, позволяя создавать визуально насыщенные сцены без чрезмерного расхода ресурсов. Его использование в Phaser является стандартной практикой при работе с повторяющимися или движущимися фоновыми элементами.

Оглавление