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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();
        graphics.lineStyle(128, 0x00ff00, 1);
        graphics.lineBetween(100, 100, 600, 500);
    }
}

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

const game = new Phaser.Game(config);

Создание контекста для рисования: Объект Graphics

Перед тем как начать рисовать, необходимо получить инструмент. В Phaser за рисование примитивов (линий, фигур, заливок) отвечает класс Graphics. Он создается через фабричный метод сцены this.add.graphics().

const graphics = this.add.graphics();

Этот объект graphics становится нашим холстом. Все последующие операции рисования будут применены к нему. Важно, что объект Graphics сам является игровым объектом (Game Object), а значит, его можно перемещать, масштабировать, задавать ему глубину (depth) и другие стандартные свойства.

Настройка стиля линии: Метод lineStyle()

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

graphics.lineStyle(128, 0x00ff00, 1);

Разберем аргументы по порядку: 1. **Толщина (width):** 128 — ширина линии в пикселях. Именно этот параметр делает линию «жирной». 2. **Цвет (color):** 0x00ff00 — шестнадцатеричный код цвета. В данном случае это ярко-зеленый. 3. **Прозрачность (alpha):** `1` — значение от 0 (полностью прозрачно) до 1 (полностью непрозрачно). Метод lineStyle() не рисует ничего сам, он лишь устанавливает текущие настройки пера для всех последующих операций рисования линий.

Рисование отрезка: Метод lineBetween()

Когда стиль задан, можно непосредственно нарисовать отрезок между двумя точками. Метод lineBetween() принимает координаты начала и конца линии.

graphics.lineBetween(100, 100, 600, 500);

Аргументы метода: - 100, 100 — координаты X и Y начальной точки отрезка. - 600, 500 — координаты X и Y конечной точки отрезка. Линия будет нарисована с центром по указанным координатам. То есть при большой толщине (как в нашем примере — 128px) визуально линия «расползется» в обе стороны от воображаемой центральной оси, соединяющей точки (100,100) и (600,500).

Сборка всей сцены

Весь код по созданию и настройке графики размещается в методе create() сцены, который выполняется один раз при ее инициализации. Конфигурация игры (config) определяет базовые параметры, такие как размер холста и тип рендерера.

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();
        graphics.lineStyle(128, 0x00ff00, 1);
        graphics.lineBetween(100, 100, 600, 500);
    }
}

const config = {
    width: 800,
    height: 600,
    type: Phaser.WEBGL, // Используется WebGL рендерер
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Обратите внимание на type: Phaser.WEBGL. Объект Graphics может работать как в Canvas, так и в WebGL-режиме, но последний часто обеспечивает более высокую производительность при отрисовке большого количества примитивов.

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

Всего три строчки кода внутри create() дают вам мощный инструмент для динамического рисования. Объект Graphics с методами lineStyle() и lineBetween() — это фундамент для создания множества визуальных эффектов. **Идеи для экспериментов:** 1. Анимируйте линию, меняя ее конечные точки в методе update(). 2. Создайте несколько объектов Graphics с разными стилями линий. 3. Используйте lineBetween() в цикле для рисования графиков или сложных ломаных линий (контуров). 4. Исследуйте другие методы Graphics, такие как strokeRect() для прямоугольников или strokeCircle() для окружностей.