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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    lineRectangle;
    starGraphics;

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('pic', 'assets/sprites/phaser2.png');
    }

    create ()
    {

        this.add.image(400, 300, 'pic');

        this.starGraphics = this.add.graphics({x: 400, y: 300});
        this.drawStar(this.starGraphics, 0, 0, 5, 200, 100, 0xFFFF00, 0xFF0000);
        this.starGraphics.rotation = Math.random();
        this.lineRectangle = this.add.graphics({x: 400, y: 300});
        this.lineRectangle.lineStyle(5, 0x0000FF, 1.0);
        this.lineRectangle.fillStyle(0x0000FF, 1.0);
        this.lineRectangle.strokeRect(-100, -100, 200, 200);
    }

    update ()
    {
        this.lineRectangle.rotation += 0.01;
        this.starGraphics.rotation -= 0.01;
        this.starGraphics.scaleX = 0.8 + Math.abs(Math.sin(this.starGraphics.rotation));
        this.starGraphics.scaleY = 0.8 + Math.abs(Math.sin(this.starGraphics.rotation));
    }

    drawStar (graphics, cx, cy, spikes, outerRadius, innerRadius, color, lineColor)
    {
        let rot = Math.PI / 2 * 3;
        let x = cx;
        let y = cy;
        const step = Math.PI / spikes;
        graphics.lineStyle(5, lineColor, 1.0);
        graphics.fillStyle(color, 1.0);
        graphics.beginPath();
        graphics.moveTo(cx, cy - outerRadius);
        for (let i = 0; i < spikes; i++)
        {
            x = cx + Math.cos(rot) * outerRadius;
            y = cy + Math.sin(rot) * outerRadius;
            graphics.lineTo(x, y);
            rot += step;

            x = cx + Math.cos(rot) * innerRadius;
            y = cy + Math.sin(rot) * innerRadius;
            graphics.lineTo(x, y);
            rot += step;
        }
        graphics.lineTo(cx, cy - outerRadius);
        graphics.closePath();
        graphics.strokePath();
        graphics.fillPath();
    }
}

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

const game = new Phaser.Game(config);

Инициализация и настройка сцены

Код начинается с определения класса сцены, который наследуется от Phaser.Scene. В preload загружается фоновое изображение, которое будет служить статичным задним планом. Ключевой момент — использование this.load.setBaseURL, что позволяет указывать относительные пути к ресурсам от общего базового URL.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('pic', 'assets/sprites/phaser2.png');
}

Создание графических объектов в create()

Метод create вызывается один раз при старте сцены. Здесь создаются три основных объекта: фоновое изображение и два графических объекта (Graphics).

this.add.image(400, 300, 'pic');

Затем создается первый графический объект для звезды. Обратите внимание, что при создании через this.add.graphics сразу задается позиция {x: 400, y: 300}. Это означает, что точка (0,0) контекста рисования этого объекта будет находиться в центре сцены. Для рисования звезды вызывается пользовательская функция drawStar.

this.starGraphics = this.add.graphics({x: 400, y: 300});
this.drawStar(this.starGraphics, 0, 0, 5, 200, 100, 0xFFFF00, 0xFF0000);
this.starGraphics.rotation = Math.random();

Второй графический объект lineRectangle отвечает за синий прямоугольник. Стили линий и заливки задаются методами lineStyle и fillStyle, а сама фигура рисуется с помощью strokeRect. Координаты (-100, -100) указывают от центра объекта, поэтому прямоугольник размером 200x200 будет центрирован.

this.lineRectangle = this.add.graphics({x: 400, y: 300});
this.lineRectangle.lineStyle(5, 0x0000FF, 1.0);
this.lineRectangle.fillStyle(0x0000FF, 1.0);
this.lineRectangle.strokeRect(-100, -100, 200, 200);

Алгоритм рисования звезды

Функция drawStar — это пользовательская утилита, которая использует API Graphics для рисования многоугольника в форме звезды. Принцип работы основан на пошаговом вычислении вершин внешнего и внутреннего радиусов с использованием тригонометрии.

drawStar (graphics, cx, cy, spikes, outerRadius, innerRadius, color, lineColor)
{
    let rot = Math.PI / 2 * 3;
    let x = cx;
    let y = cy;
    const step = Math.PI / spikes;
    graphics.lineStyle(5, lineColor, 1.0);
    graphics.fillStyle(color, 1.0);
    graphics.beginPath();
    graphics.moveTo(cx, cy - outerRadius);
    for (let i = 0; i < spikes; i++)
    {
        x = cx + Math.cos(rot) * outerRadius;
        y = cy + Math.sin(rot) * outerRadius;
        graphics.lineTo(x, y);
        rot += step;

        x = cx + Math.cos(rot) * innerRadius;
        y = cy + Math.sin(rot) * innerRadius;
        graphics.lineTo(x, y);
        rot += step;
    }
    graphics.lineTo(cx, cy - outerRadius);
    graphics.closePath();
    graphics.strokePath();
    graphics.fillPath();
}

Ключевые шаги: 1. Устанавливаются стили линии и заливки для конкретной фигуры. 2. Начинается новый путь (beginPath) и курсор перемещается в стартовую точку (moveTo). 3. В цикле вычисляются координаты вершин по внешнему и внутреннему радиусу, после чего путь строится командой lineTo. 4. В конце путь закрывается (closePath), обводится (strokePath) и заливается (fillPath).

Динамическая анимация в update()

Метод update выполняется каждый кадр игры (обычно 60 раз в секунду). Здесь происходит анимация созданных графических объектов путем изменения их свойств.

update ()
{
    this.lineRectangle.rotation += 0.01;
    this.starGraphics.rotation -= 0.01;
    this.starGraphics.scaleX = 0.8 + Math.abs(Math.sin(this.starGraphics.rotation));
    this.starGraphics.scaleY = 0.8 + Math.abs(Math.sin(this.starGraphics.rotation));
}

- rotation: Прямоугольник и звезда вращаются в противоположных направлениях, прибавляя и вычитая небольшой угол за кадр. - scaleX и scaleY: Масштаб звезды привязан к абсолютному значению синуса ее текущего угла вращения. Это создает эффект пульсации — звезда ритмично увеличивается и уменьшается. Константа 0.8 задает минимальный базовый масштаб.

Конфигурация и запуск игры

Объект config содержит основные настройки игры Phaser. Важные параметры: - type: Phaser.WEBGL обеспечивает аппаратное ускорение рендеринга. - width и height: Размер игрового холста. - scene: Указание на основной класс сцены.

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

const game = new Phaser.Game(config);

Создание экземпляра Phaser.Game с этой конфигурацией инициирует запуск игрового цикла.

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

Графический API Phaser — это гибкий инструмент для создания динамических визуальных элементов без использования внешних текстур. Вы можете рисовать сложные формы, анимировать их свойства (позицию, вращение, масштаб) и комбинировать их для создания сложных эффектов. Для экспериментов попробуйте: изменить форму звезды через параметры spikes и радиусы, добавить цветовую анимацию, изменяя fillStyle в update, или создать композицию из множества вращающихся фигур с разной скоростью.