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

Визуальные сетки — простой, но мощный инструмент для разработки игр. Они служат основой для построения уровней, выравнивания интерфейсов, создания фоновых текстур или отладки физики. Встроенный метод `this.add.grid()` в Phaser 3 позволяет одним вызовом генерировать такие сетки, не требуя ручного рисования линий или использования внешних изображений. Эта статья разберет, как создавать и настраивать сетки, изменяя их размер, цвет и стиль контуров, что поможет вам быстро визуализировать игровое пространство.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const g1 = this.add.grid(100, 100, 128, 96, 32, 32, 0x057605);

        const g2 = this.add.grid(300, 340, 512, 256, 64, 64, 0x00b9f2, 1, 0xffffff, 1);
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#1d1d1d',
    parent: 'phaser-example',
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: Example
};

const game = new Phaser.Game(config);

Базовый вызов: минимальная сетка

Метод this.add.grid() имеет несколько параметров. Самый простой вызов создает сетку с ячейками по умолчанию.

Рассмотрим первый пример из кода. Он создает зеленую сетку (0x057605) без видимых контуров ячеек, так как параметры outlineColor и outlineAlpha не заданы.

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

**Параметры по порядку:** 1. x=100: Координата X центра сетки на холсте. 2. y=100: Координата Y центра сетки. 3. width=128: Общая ширина сетки в пикселях. 4. height=96: Общая высота сетки. 5. cellWidth=32: Ширина одной ячейки. 6. cellHeight=32: Высота одной ячейки. 7. fillColor=0x057605: Цвет заливки ячеек (в шестнадцатеричном формате).

Эта сетка будет выглядеть как сплошной зеленый прямоугольник, разделенный на 4x3 ячейки (128/32=4, 96/32=3), но без видимых границ.

Стилизация: добавляем контуры ячеек

Чтобы сделать границы ячеек видимыми, используются последние два параметра метода: outlineColor и outlineAlpha. Они определяют цвет и прозрачность линий, разделяющих ячейки.

Второй пример из исходника демонстрирует их использование:

const g2 = this.add.grid(300, 340, 512, 256, 64, 64, 0x00b9f2, 1, 0xffffff, 1);

**Расшифровка новых параметров:** 8. fillAlpha=1: Непрозрачность заливки ячеек (1 = полностью непрозрачно). 9. outlineColor=0xffffff: Цвет контура ячеек (белый). 10. outlineAlpha=1: Непрозрачность контура (1 = полностью непрозрачные линии).

В результате получается бирюзовая сетка (0x00b9f2) с четкими белыми линиями между ячейками. Размер сетки — 512x256 пикселей, каждая ячейка — 64x64 пикселя, что создает сетку 8x4 ячейки.

Практическое применение и настройка

Сетки чаще всего используются на этапе прототипирования. Например, вы можете быстро создать карту на основе тайлов, настроить область появления объектов или визуализировать коллайдеры.

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

Экспериментируйте с альфа-каналом (fillAlpha, outlineAlpha). Установка outlineAlpha в значение меньше 1 (например, 0.3) создаст полупрозрачные, едва заметные линии-подсказки, которые не будут отвлекать от основного геймплея.

// Пример: сетка с полупрозрачными контурами для планирования
const planningGrid = this.add.grid(400, 300, 600, 400, 50, 50, 0x2d2d2d, 0.5, 0xff00ff, 0.2);

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

Метод this.add.grid() — это ваш быстрый путь к созданию структурных и отладочных визуальных элементов. Он избавляет от необходимости создавать текстуры в графических редакторах для базовых задач. Для экспериментов попробуйте

  1. Анимировать цвет заливки или контура в ответ на игровые события
  2. Динамически менять cellWidth и cellHeight для эффекта "зума" камеры
  3. Использовать несколько сеток с разными размерами ячеек для создания сложных разметок уровня