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

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

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

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

Живой запуск

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

Исходный код

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

function create()
{
    this.add.text(10, 10, 'Phaser', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });

    this.add.circle(200, 300, 100, 0x6666ff);
    this.add.rectangle(300, 300, 64, 128, 0x6666ff);
    var t1 = this.add.isobox(150, 500, 200, 400, 0x00b9f2, 0x016fce, 0x028fdf);
    var t3 = this.add.isotriangle(640, 500, 100, 100, false, 0x8dcb0e, 0x3f8403, 0x63a505);
}

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

const game = new Phaser.Game(config);

Настройка сцены и загрузка

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

Функция preload используется для установки базового URL и загрузки ассетов. Хотя в данном примере текстура яблока загружается, для рисования примитивов она не требуется — это демонстрация типичного сценария, где примитивы могут соседствовать с загруженными спрайтами.

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

Создание базовых фигур: текст, круг, прямоугольник

Основная отрисовка происходит в функции create. Phaser позволяет добавлять графические примитивы через фабричные методы объекта this.add.

Сначала создается текстовый объект. Обратите внимание, что для него используется отдельный API.

Затем создаются простейшие залитые фигуры: круг и прямоугольник. Методы this.add.circle и this.add.rectangle принимают координаты (x, y), размеры и цвет заливки в числовом формате (HEX). Цвет указывается как 0xRRGGBB.

this.add.text(10, 10, 'Phaser', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' });

this.add.circle(200, 300, 100, 0x6666ff);
this.add.rectangle(300, 300, 64, 128, 0x6666ff);

Рисование изометрических фигур: изобокс и изотреугольник

Phaser также поддерживает создание изометрических фигур, что полезно для игр с видом сверху или проекцией 2.5D.

this.add.isobox создает изометрический параллелепипед (куб). Он принимает координаты, ширину, высоту и три цвета: для левой, правой и верхней граней соответственно. Это создает иллюзию объема.

this.add.isotriangle создает изометрический треугольник. Пятый параметр (false в примере) определяет, направлен ли треугольник влево (false) или вправо (true). Как и у изобокса, у него три цвета для разных граней.

var t1 = this.add.isobox(150, 500, 200, 400, 0x00b9f2, 0x016fce, 0x028fdf);
var t3 = this.add.isotriangle(640, 500, 100, 100, false, 0x8dcb0e, 0x3f8403, 0x63a505);

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

Весь код объединяется в конфигурационный объект config, который передается конструктору Phaser.Game. Это стандартный способ инициализации игры в Phaser 3.

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

const game = new Phaser.Game(config);

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

Phaser 3 предоставляет простой и эффективный API для программного создания графики. Используйте примитивы для быстрого прототипирования игровых механик, визуализации зон столкновений или создания простого UI. Для экспериментов попробуйте анимировать параметры фигур (координаты, размеры, цвета) внутри функции update, создавая движущиеся платформы или меняющиеся индикаторы. Также можно комбинировать примитивы со спрайтами и частицами для создания сложных визуальных эффектов.