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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {
        const t1 = this.add.isobox(150, 500, 200, 400, 0x00b9f2, 0x016fce, 0x028fdf);

        const t2 = this.add.isobox(400, 500, 200, 400, 0xffe31f, 0xf2a022, 0xf8d80b);

        const t3 = this.add.isobox(640, 500, 100, 100, 0x8dcb0e, 0x3f8403, 0x63a505);

        this.tweens.add({
            targets: t3,
            height: 300,
            ease: 'Sine.easeInOut',
            yoyo: true,
            repeat: -1
        });

        this.tweens.add({
            targets: [ t1, t2, t3 ],
            projection: 30,
            ease: 'Sine.easeInOut',
            yoyo: true,
            repeat: -1
        });
    }
}

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

const game = new Phaser.Game(config);

Создание статичного изобокса

Изобокс (isobox) — это графический примитив, имитирующий трёхмерный параллелепипед в изометрической проекции. Он рисуется как фигура с тремя видимыми гранями, каждая из которых заливается своим цветом, создавая эффект освещения и объёма.

Для создания изобокса используется метод this.add.isobox(). Рассмотрим первый аргумент из примера.

const t1 = this.add.isobox(150, 500, 200, 400, 0x00b9f2, 0x016fce, 0x028fdf);

Здесь: * 150, 500 — координаты `xиy` центра изобокса на игровом холсте. * 200 — ширина фигуры. * 400 — высота фигуры. * Последние три числа — это цветовые коды для левой, правой и верхней граней соответственно в формате HEX (0xRRGGBB). Такой порядок цветов является фиксированным в API.

Настройка внешнего вида и композиции

Используя разные параметры, можно создавать разнообразные объекты: от высоких колонн до небольших кубов. В примере создаются три блока разного размера и цвета, формируя простую композицию.

const t2 = this.add.isobox(400, 500, 200, 400, 0xffe31f, 0xf2a022, 0xf8d80b);
const t3 = this.add.isobox(640, 500, 100, 100, 0x8dcb0e, 0x3f8403, 0x63a505);

Блок t2 такой же по размеру, как и t1, но с тёплой, «песочной» палитрой. Блок t3 в два раза меньше по ширине и в четыре раза — по высоте, что делает его похожим на куб или невысокий постамент. Играя с соотношением ширины и высоты, можно имитировать объекты разной формы.

Анимация высоты объекта

Phaser Tweens — система анимации свойств объектов. Её можно использовать для плавного изменения параметров изобокса. В первом твине анимируется только третий блок (t3).

this.tweens.add({
    targets: t3,
    height: 300,
    ease: 'Sine.easeInOut',
    yoyo: true,
    repeat: -1
});

* targets: t3 — указывает, какой объект анимировать. * height: 300 — целевое значение высоты. Блок будет «расти» от 100 до 300 пикселей. * ease: 'Sine.easeInOut' — функция плавности, которая обеспечивает мягкий старт и завершение анимации. * yoyo: true — после достижения цели анимация проиграется в обратном порядке. * repeat: -1 — анимация будет повторяться бесконечно.

Этот приём можно использовать для создания «пульсирующих» кристаллов, двигающихся платформ или индикаторов.

Анимация проекции для всех объектов

Самая интересная возможность — анимация свойства projection. Оно управляет углом наклона изометрической проекции, позволяя объекту «заваливаться» вперёд или назад, динамически меняя перспективу.

this.tweens.add({
    targets: [ t1, t2, t3 ],
    projection: 30,
    ease: 'Sine.easeInOut',
    yoyo: true,
    repeat: -1
});

* targets: [ t1, t2, t3 ] — массив объектов для анимации. Все три блока будут анимироваться синхронно. * projection: 30 — целевое значение угла проекции.

Когда свойство projection меняется, весь изобокс визуально перекашивается, как если бы менялся угол зрения камеры. Это создаёт гипнотический эффект «живого» ландшафта или нестабильной иллюзии.

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

Изобоксы в Phaser — это быстрый способ добавить объём и стиль в 2D-игру. С их помощью можно строить элементы окружения, мистические артефакты или абстрактный фон. Для экспериментов попробуйте: привязать анимацию высоты к клику мыши, изменять цвета граней во время твина или комбинировать изобоксы с тайловыми картами для создания сложных изометрических сцен.