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

Игровые интерфейсы, меню, карты и фоны часто требуют элементов с повторяющейся структурой. Вместо того чтобы создавать множество отдельных графических объектов, Phaser 3 предоставляет мощный объект `Grid`. Эта статья покажет, как создавать статичные и анимированные сетки, управлять их внешним видом и интегрировать их в игровую сцену. Вы научитесь быстро добавлять структурные элементы, что сэкономит время и упростит код.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('bg', 'assets/skies/background1.png');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

        const g1 = this.add.grid(100, 100, 128, 96, 32, 32, 0x057605);

        const g2 = this.add.grid(300, 340, 512, 256, 64, 64, 0x00b9f2).setAltFillStyle(0x016fce).setStrokeStyle();

        const g3 = this.add.grid(600, 300, 100, 500, 48, 128, 0xc145ea).setAltFillStyle(0xb038d7).setStrokeStyle().setAngle(-20);

        this.tweens.add({

            targets: g1,
            scaleX: 0.25,
            scaleY: 0.5,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut'

        });

        this.tweens.add({

            targets: g3,
            width: 400,
            angle: -90,
            yoyo: true,
            repeat: -1,
            ease: 'Sine.easeInOut'

        });
    }
}

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

const game = new Phaser.Game(config);

Базовое создание сетки

Объект сетки (Grid) создается с помощью метода this.add.grid(). Этот метод принимает ключевые параметры, определяющие положение, размер и визуальный стиль.

const g1 = this.add.grid(100, 100, 128, 96, 32, 32, 0x057605);

Рассмотрим параметры по порядку: 100, 100 — это координаты X и Y центра сетки на сцене. 128, 96 — общая ширина и высота всего прямоугольника сетки. 32, 32 — размер каждой отдельной ячейки по ширине и высоте. Последний аргумент 0x057605 задает основной цвет заливки ячеек в шестнадцатеричном формате. Эта сетка будет статичным зеленым прямоугольником, разделенным на ячейки.

Стилизация: альтернативная заливка и обводка

Для создания более сложных визуальных паттернов, например, шахматной доски, используется метод setAltFillStyle(). Он задает цвет для заливки "альтернативных" ячеек. Метод setStrokeStyle() по умолчанию добавляет черную обводку вокруг каждой ячейки.

const g2 = this.add.grid(300, 340, 512, 256, 64, 64, 0x00b9f2)
    .setAltFillStyle(0x016fce)
    .setStrokeStyle();

В этом примере создается большая сетка с ячейками 64x64 пикселя. Основной цвет ячеек — голубой (0x00b9f2), а альтернативный — темно-синий (0x016fce). Phaser автоматически применяет альтернативную заливку к ячейкам в шахматном порядке, начиная со второй ячейки в первом ряду. Вызов методов можно объединять в цепочку для удобства.

Трансформации: поворот и изменение размеров

Как и любой GameObject в Phaser, сетка поддерживает стандартные трансформации. Метод setAngle() поворачивает сетку вокруг ее центра на заданное количество градусов.

const g3 = this.add.grid(600, 300, 100, 500, 48, 128, 0xc145ea)
    .setAltFillStyle(0xb038d7)
    .setStrokeStyle()
    .setAngle(-20);

Здесь создается высокая и узкая сетка (100x500 пикселей) с нестандартными ячейками (48x128). Сразу после создания она поворачивается на -20 градусов. Это демонстрирует, что сетка — это не просто фон, а полноценный объект, который можно интегрировать в динамичную сцену.

Анимация сеток с помощью Tweens

Настоящая мощь объекта Grid раскрывается в сочетании с системой анимации Phaser — Tweens. Вы можете анимировать любые свойства сетки, включая масштаб, размер, угол поворота и положение.

this.tweens.add({
    targets: g1,
    scaleX: 0.25,
    scaleY: 0.5,
    yoyo: true,
    repeat: -1,
    ease: 'Sine.easeInOut'
});

Этот Tween анимирует первую созданную сетку (g1). Свойства scaleX и scaleY сжимают сетку по горизонтали и вертикали. Параметры yoyo: true и repeat: -1 заставляют анимацию проигрываться вперед-назад бесконечно. ease: 'Sine.easeInOut' задает плавное, синусоидальное изменение скорости.

this.tweens.add({
    targets: g3,
    width: 400,
    angle: -90,
    yoyo: true,
    repeat: -1,
    ease: 'Sine.easeInOut'
});

Второй Tween воздействует на повернутую сетку g3. Он анимирует одновременно два свойства: width (ширина прямоугольника сетки) и angle (угол поворота). Это создает сложный, визуально интересный эффект трансформации.

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

Объект Grid — это эффективный инструмент для создания фонов, карт, интерфейсов и декоративных анимированных элементов. Его сила в простоте генерации сложных структур и полной совместимости с системой трансформаций и анимаций Phaser. Для экспериментов попробуйте: анимировать цвет заливки через setFillStyle, создать сетку с разным размером ячеек по X и Y, использовать сетку в качестве маски для другого графического объекта или динамически менять количество ячеек, изменяя width/height при фиксированном размере ячейки.