Рисование прямоугольников, окружностей, линий

Для работы с графикой в Phaser необходимо создать экземпляр игры и сцену. Конфигурация игры включает размеры канваса, тип рендеринга и объект сцены:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: 0x1d1d1d,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

function preload() {
    // Здесь можно загружать ресурсы
}

function create() {
    // Основная логика рисования
}

function update(time, delta) {
    // Логика обновления сцены
}

Ключевым элементом является метод create, в котором создаются графические объекты.

Использование Graphics для рисования

Phaser предоставляет объект Phaser.GameObjects.Graphics, который используется для рисования примитивов: прямоугольников, окружностей, линий, эллипсов и сложных форм. Создание графики выполняется через метод this.add.graphics() внутри сцены:

const graphics = this.add.graphics();

Graphics поддерживает методы для заливки (fill), обводки (lineStyle) и построения фигур с помощью координат. Объект можно многократно использовать для добавления новых фигур на сцену.

Рисование прямоугольников

Прямоугольники создаются с использованием метода fillRect или комбинации fillStyle и strokeRect.

Пример заливки:

graphics.fillStyle(0xff0000, 1); // красный цвет, непрозрачность 1
graphics.fillRect(50, 50, 200, 100); // x, y, ширина, высота

Пример обводки:

graphics.lineStyle(4, 0x00ff00, 1); // толщина, цвет, непрозрачность
graphics.strokeRect(300, 50, 200, 100);

Комбинированный вариант: сначала заливка, затем обводка:

graphics.fillStyle(0x0000ff, 0.5);
graphics.fillRect(50, 200, 200, 100);
graphics.lineStyle(3, 0xffffff, 1);
graphics.strokeRect(50, 200, 200, 100);

Прямоугольники можно трансформировать с помощью методов setRotation и setScale, что позволяет создавать динамичные анимации.

Рисование окружностей

Окружности создаются методом fillCircle или strokeCircle:

graphics.fillStyle(0xffff00, 1);
graphics.fillCircle(400, 300, 50); // x, y, радиус

Для обводки:

graphics.lineStyle(2, 0xff00ff, 1);
graphics.strokeCircle(400, 300, 50);

Эллипсы и дуги также поддерживаются через fillEllipse, strokeEllipse и beginPath с arc, что позволяет строить сложные кривые.

graphics.lineStyle(2, 0xffffff, 1);
graphics.beginPath();
graphics.arc(600, 300, 50, Phaser.Math.DegToRad(0), Phaser.Math.DegToRad(270), false);
graphics.strokePath();

Рисование линий

Линии в Phaser создаются с использованием методов lineBetween и цепочек moveTo / lineTo:

graphics.lineStyle(3, 0x00ffff, 1);
graphics.beginPath();
graphics.moveTo(100, 400);
graphics.lineTo(300, 500);
graphics.strokePath();

Для построения сложной формы:

graphics.lineStyle(2, 0xff8800, 1);
graphics.beginPath();
graphics.moveTo(400, 400);
graphics.lineTo(500, 450);
graphics.lineTo(550, 500);
graphics.closePath();
graphics.strokePath();

closePath замыкает линию, соединяя последнюю точку с первой.

Заливка и обводка одновременно

Для комплексных фигур можно комбинировать fillStyle и lineStyle. Порядок имеет значение: сначала выполняется заливка, затем обводка.

graphics.fillStyle(0x123456, 0.7);
graphics.fillRect(600, 100, 150, 80);
graphics.lineStyle(5, 0xffffff, 1);
graphics.strokeRect(600, 100, 150, 80);

Для кривых и сложных контуров используется комбинация beginPath, moveTo, lineTo, arc и fillPath.

Работа с прозрачностью и цветами

Цвет задается в шестнадцатеричном формате 0xRRGGBB, а прозрачность — вторым параметром alpha в методах fillStyle и lineStyle.

graphics.fillStyle(0xffaa00, 0.5); // полупрозрачный оранжевый
graphics.lineStyle(4, 0x00aaff, 0.8); // слегка прозрачная голубая линия

Graphics позволяет изменять свойства динамически и обновлять сцены в update, создавая анимации с изменением цвета, формы и положения.

Оптимизация и очистка графики

Для удаления всех фигур используется метод clear():

graphics.clear();

Это освобождает память и позволяет рисовать новые фигуры без наложений. При динамических сценах рекомендуется очищать старые графические объекты перед перерисовкой, чтобы избежать падения производительности.

Преобразования и анимации

Графические объекты можно перемещать и трансформировать через методы сцены:

graphics.x = 50;
graphics.y = 100;
graphics.rotation = Phaser.Math.DegToRad(45);
graphics.scaleX = 1.5;
graphics.scaleY = 1.5;

Для анимации используется tween:

this.tweens.add({
    targets: graphics,
    x: 400,
    y: 300,
    duration: 2000,
    ease: 'Power2',
    yoyo: true,
    repeat: -1
});

Это позволяет создавать динамические сцены с движущимися и изменяющимися фигурами без необходимости вручную пересчитывать координаты.

Комбинирование фигур и слоев

Несколько графических объектов можно объединять на одной сцене для создания сложных интерфейсов или игр. Каждый объект Graphics можно помещать на отдельный слой, управлять их видимостью через setVisible, прозрачностью через alpha и порядком рендеринга через depth.

graphics.setDepth(1);
graphics.setVisible(true);
graphics.alpha = 0.8;

Такая организация особенно полезна для HUD, игровых эффектов и визуализации данных.

Оглавление