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

Изометрические фигуры — это мощный инструмент для создания 2.5D-графики и стилизованных интерфейсов в ваших играх. Пример с `iso triangle` демонстрирует, как быстро построить динамичные объёмные объекты, управлять их внешним видом и оживлять с помощью встроенной системы анимации Phaser. Освоив этот примитив, вы сможете генерировать пирамиды, стрелки, стилизованные горы или элементы футуристического HUD без использования тяжёлых 3D-движков.

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

Живой запуск

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

Исходный код


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

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

        const t3 = this.add.isotriangle(640, 500, 100, 100, false, 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.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: '#efefef',
    scene: Example
};

const game = new Phaser.Game(config);

Создание изометрического треугольника

Основной метод для добавления изометрического треугольника на сцену — this.add.isotriangle(). Он принимает несколько ключевых параметров, определяющих положение, размеры, ориентацию и цвета граней.

const triangle = this.add.isotriangle(x, y, width, height, isRight, fillTop, fillLeft, fillRight);

- `x,y` — координаты центра треугольника в мире сцены. - width, height — базовая ширина и высота фигуры. - isRight — булевый флаг. Если false, треугольник смотрит остриём влево, если true — вправо. Это меняет расчёт проекции. - fillTop, fillLeft, fillRight — числовые значения цвета (hex) для заливки верхней, левой и правой граней соответственно. Разный цвет для каждой грани создаёт иллюзию объёма.

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

В исходном коде создаются три треугольника с разными параметрами. Давайте разберём первые два, которые остаются статичными до начала анимации.

const t1 = this.add.isotriangle(150, 500, 200, 400, false, 0x00b9f2, 0x016fce, 0x028fdf);
const t2 = this.add.isotriangle(400, 500, 200, 400, true, 0xffe31f, 0xf2a022, 0xf8d80b);

- t1 расположен в точке (150, 500), имеет ширину 200 и высоту 400 пикселей. Параметр isRight: false задаёт ориентацию влево. Цвета граней — разные оттенки синего. - t2 находится в точке (400, 500) и имеет такие же размеры, но ориентацию вправо (isRight: true). Его грани окрашены в оттенки оранжевого и жёлтого. Эти два треугольника демонстрируют, как один набор параметров width и height может давать зеркальные фигуры.

Динамическое изменение свойств

Третий треугольник в примере (t3) изначально создаётся небольшим, но его свойство height становится целью для твина (анимации). Это показывает, что параметры изометрического объекта можно менять после создания, и он будет перерисовываться.

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

Изначальная высота t3 равна 100. Анимация будет циклически увеличивать и уменьшать это значение, заставляя треугольник «расти» и «сжиматься». Важно: изменение таких базовых свойств, как width и height, автоматически пересчитывает изометрическую проекцию.

Анимация с помощью системы Tweens

Phaser предоставляет мощный и простой API this.tweens для создания плавных анимаций. В примере используются два твина.

Первый твин воздействует только на t3, анимируя его высоту от изначальных 100 до 300 пикселей.

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

- targets — объект или массив объектов для анимации. - height: 300 — целевое значение свойства. - ease — функция плавности, определяющая характер движения. - yoyo: true — делает так, что после достижения цели анимация проигрывается в обратном порядке. - repeat: -1 — заставляет анимацию повторяться бесконечно.

Анимация свойства Projection

Второй твин — самый интересный для изометрических фигур. Он анимирует специальное свойство projection сразу для всех трёх треугольников.

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

Свойство projection управляет степенью «изометричности» или углом наклона граней. Изменяя это значение, можно добиться эффекта, когда треугольники динамически меняют свою перспективу, становясь то более плоскими, то более объёмными. Это свойство есть у всех изометрических Game Objects в Phaser.

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

Изометрические треугольники в Phaser — это гибкий и производительный инструмент для создания сложной на вид графики простыми средствами. Вы можете экспериментировать: попробуйте анимировать свойство width или менять цвета граней в реальном времени через setFillStyle. Используйте эти треугольники как строительные блоки для составных фигур (ромбов, шевронов) или как индикаторы направления в играх с видом сверху. Комбинируя статичные и анимированные iso triangle, можно создавать живые, привлекательные визуальные элементы для вашего проекта.