Phaser.js: всё об играх и разработке

О чем этот пример

Tilesprite, или тайл-спрайт, — это мощный объект Phaser, который позволяет заполнить область повторяющимся изображением. В отличие от обычного спрайта, он может быть динамически масштабирован, повернут и «замощен» без потери производительности. Эта техника идеально подходит для создания бесконечных фонов, параллакс-эффектов и анимированных текстур в пиксель-арт играх. В статье мы разберем практический пример управления тайл-спрайтом в реальном времени.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    iter = 0;
    tilesprite;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('mushroom', 'assets/sprites/mushroom16x16.png');
    }

    create ()
    {
        this.tilesprite = this.add.tileSprite(400, 300, 800, 600, 'mushroom');
    }

    update ()
    {
        this.tilesprite.rotation -= 0.01;

        this.tilesprite.tileScaleX = Math.sin(this.iter) * 10;
        this.tilesprite.tileScaleY = Math.sin(this.iter) * 10;

        this.iter += 0.01;
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    backgroundColor: '#2d2d2d',
    scene: Example
};

const game = new Phaser.Game(config);

Что такое TileSprite и зачем он нужен

TileSprite — это игровой объект, который повторяет (заполняет) заданную текстуру по всей своей площади. Это похоже на CSS-свойство background-repeat: repeat. Ключевое преимущество — вы можете управлять масштабом и позицией текстуры внутри области независимо от самого объекта.

В играх это часто используется для: * Фонов, которые нужно плавно сдвигать (например, бегущая дорога). * Динамических текстур (воды, огня), где текстура масштабируется или смещается. * Оптимизации: один небольшой файл изображения может заполнить огромную область экрана.

В нашем примере в качестве текстуры используется маленькое изображение гриба размером 16x16 пикселей.

Настройка сцены и создание TileSprite

В методе preload загружается ресурс. Обратите внимание на pixelArt: true в конфиге — это важная настройка для сохранения четкости пиксельной графики при масштабировании.

В create создается сам тайл-спрайт. Конструктор this.add.tileSprite принимает ключевые параметры: координаты центра (x, y), ширину и высоту самой области (в пикселях) и ключ текстуры.

this.tilesprite = this.add.tileSprite(400, 300, 800, 600, 'mushroom');

Здесь создается объект размером 800x600 пикселей, центрированный на экране, который будет заполнен повторяющимися грибами.

Динамическое управление в методе Update

Вся магия происходит в методе update, который выполняется каждый кадр. Здесь мы анимируем три свойства тайл-спрайта.

1. **Вращение:** Мы плавно вращаем весь объект вокруг его центра.

this.tilesprite.rotation -= 0.01;

2. **Масштаб текстуры:** Свойства tileScaleX и tileScaleY управляют масштабом *самой текстуры* внутри области, а не размерами области. Значение 1 — оригинальный размер. Используя синус от нарастающего значения iter, мы получаем плавное пульсирующее изменение масштаба от -10 до 10.

this.tilesprite.tileScaleX = Math.sin(this.iter) * 10;
    this.tilesprite.tileScaleY = Math.sin(this.iter) * 10;

Отрицательные значения масштаба зеркально отражают текстуру, что добавляет визуально интересный эффект.

3. **Счетчик итераций:** Переменная iter увеличивается каждый кадр, обеспечивая непрерывное изменение аргумента для Math.sin().

this.iter += 0.01;

Ключевые свойства TileSprite для анимации

Для создания сложных эффектов запомните эти свойства:

* tilePositionX / tilePositionY: Смещение начала текстуры. Изменяя их, можно создать эффект прокрутки фона. * tileScaleX / tileScaleY: Масштаб текстуры, как в нашем примере. * rotation и scale: Стандартные свойства любого игрового объекта, влияющие на всю область тайл-спрайта.

Например, для бесконечной горизонтальной прокрутки фона в методе update нужно добавить:

this.tilesprite.tilePositionX += 2;

Что попробовать дальше

TileSprite — это не просто статичный фон, а полноценный анимируемый объект. Он открывает большие возможности для оптимизации (используя маленькие текстуры) и создания динамических визуальных эффектов прямо во время выполнения игры. Поэкспериментируйте: попробуйте анимировать tilePosition для имитации движения воды или параллакса, примените разные текстуры для слоев неба и земли или комбинируйте масштаб и позицию для эффекта «дыхания» фонового узора.