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

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

Статичные фоны остались в прошлом. В современных играх даже задний план может быть живым и динамичным, создавая глубину и вовлечённость. Техника TileSprite в Phaser позволяет легко реализовать такие эффекты, как бесконечно прокручивающиеся облака, движущиеся звёздные поля или колышущиеся воды, без необходимости вручную управлять сотнями спрайтов. В этой статье мы разберём пример, где два тайловых спрайта с разными текстурами и размерами вращаются в противоположных направлениях, создавая гипнотический параллакс-эффект. Вы научитесь создавать, настраивать и анимировать объекты `TileSprite`, понимая их ключевые свойства.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    iter = 0;
    image1;
    image0;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('image0', 'assets/pics/ra-einstein.png');
        this.load.image('image1', 'assets/sprites/mushroom2.png');
    }

    create ()
    {
        this.image0 = this.add.tileSprite(400, 300, 500, 500, 'image0');

        this.image0.setAngle(25);
        this.image0.setScale(0.5);

        this.image1 = this.add.tileSprite(400, 300, 150, 150, 'image1');
    }

    update ()
    {
        this.image0.tilePositionX = Math.cos(this.iter) * 400;
        this.image0.tilePositionY = Math.sin(this.iter) * 400;
        this.image1.tilePositionX = Math.cos(-this.iter) * 400;
        this.image1.tilePositionY = Math.sin(-this.iter) * 400;
        this.iter += 0.01;
    }
}

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

const game = new Phaser.Game(config);

Что такое TileSprite?

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

Ключевые свойства для анимации — tilePositionX и tilePositionY. Изменяя их, вы двигаете саму текстуру внутри спрайта, в то время как позиция объекта на сцене (`x,y`) остаётся неизменной. Это похоже на перемещение полотна за статичной рамкой.

Загрузка ресурсов и создание спрайтов

В методе preload загружаются две текстуры, которые будут использоваться как плитки.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('image0', 'assets/pics/ra-einstein.png');
    this.load.image('image1', 'assets/sprites/mushroom2.png');
}

В методе create создаются сами объекты TileSprite. Конструктор принимает координаты центра (x, y), ширину, высоту и ключ текстуры.

create ()
{
    // Создаём большой фоновый TileSprite
    this.image0 = this.add.tileSprite(400, 300, 500, 500, 'image0');
    // Поворачиваем и масштабируем его
    this.image0.setAngle(25);
    this.image0.setScale(0.5);
    // Создаём маленький TileSprite поверх первого
    this.image1 = this.add.tileSprite(400, 300, 150, 150, 'image1');
}

Обратите внимание: оба спрайта созданы с одним центром (400, 300), но имеют разные размеры. Методы setAngle и setScale применяются только к первому спрайту, демонстрируя, что TileSprite поддерживает все стандартные трансформации.

Магия анимации в update()

Динамика достигается в методе update, который вызывается каждый кадр. Мы изменяем свойства tilePositionX и tilePositionY, используя тригонометрические функции Math.cos и Math.sin. Это заставляет текстуру плавно двигаться по круговой траектории.

update ()
{
    this.image0.tilePositionX = Math.cos(this.iter) * 400;
    this.image0.tilePositionY = Math.sin(this.iter) * 400;
    this.image1.tilePositionX = Math.cos(-this.iter) * 400;
    this.image1.tilePositionY = Math.sin(-this.iter) * 400;
    this.iter += 0.01;
}

Переменная this.iter выступает в роли угла и инкрементируется на 0.01 каждый кадр, обеспечивая плавное изменение. Умножение на 400 определяет радиус движения текстуры. Ключевой момент — для второго спрайта (image1) используется -this.iter, что заставляет его текстуру двигаться в противоположном направлении, создавая эффект вращения или сложного параллакса.

Настройка игры (Config)

Конфигурация игры стандартна. Важный параметр — type: Phaser.WEBGL, который обеспечивает аппаратное ускорение рендеринга. Это критично для плавной анимации тайловых спрайтов, особенно если их несколько или они большие.

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

const game = new Phaser.Game(config);

Тёмный фон (#2d2d2d) хорошо контрастирует с текстурами спрайтов.

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

TileSprite — мощный инструмент для создания динамичных фонов и спецэффектов с минимальными затратами ресурсов. Вы можете экспериментировать: попробуйте менять не tilePosition, а свойство tileScale для эффекта "приближения" текстуры, наложите на спрайт маску или смешивайте несколько слоёв с разной скоростью движения для настоящего 2D-параллакса. Используйте эту технику для анимации воды, огня, движущихся туч или бесконечных космических просторов.