О чем этот пример
Изометрические блоки (isobox) в Phaser 3 — мощный инструмент для быстрого прототипирования и создания стилизованной 2.5D графики. Они позволяют рисовать объёмные фигуры, используя всего один вызов метода, что идеально подходит для создания персонажей, объектов окружения и UI-элементов в изометрических проектах или играх с псевдо-3D видом. В этой статье мы разберём пример построения сложной сцены из простых изоблоков, научимся управлять их визуальными свойствами, группировать в контейнеры и анимировать. Этот подход экономит время художника и позволяет программисту гибко управлять графикой прямо из кода.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
create ()
{
const container = this.add.container();
const leg1 = this.add.isobox(415, 340, 10, 50, 0xffe31f, 0xf2a022, 0xf8d80b);
const leg2 = this.add.isobox(390, 350, 10, 50, 0xffe31f, 0xf2a022, 0xf8d80b);
const body1 = this.add.isobox(360, 288, 50, 22, 0x00b9f2, 0x016fce, 0x028fdf);
const body2 = this.add.isobox(400, 300, 80, 80, 0x00b9f2, 0x016fce, 0x028fdf);
const beak = this.add.isobox(430, 270, 40, 10, 0xffe31f, 0xf2a022, 0xf8d80b);
const eye = this.add.isobox(394, 255, 30, 15, 0xffffff, 0xffffff, 0xffffff).setFaces(false, true, false);
const pupil = this.add.isobox(391, 255, 15, 10, 0x000000, 0x000000, 0x000000).setFaces(false, true, false);
const wing = this.add.isobox(366, 300, 50, 10, 0x00b9f2, 0x016fce, 0x028fdf);
container.add([ leg1, leg2, body1, body2, beak, eye, pupil, wing ]);
container.x -= 400;
container.y -= 200;
container.setScale(2);
this.tweens.add({
targets: container,
y: '-=160',
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});
const pear1 = this.add.isobox(100, 200, 40, 25, 0x8dcb0e, 0x3f8403, 0x63a505);
const pear2 = this.add.isobox(100, 172, 30, 15, 0x8dcb0e, 0x3f8403, 0x63a505);
const stalk = this.add.isobox(100, 156, 5, 8, 0x936e06, 0x5d3e00, 0x8c5829);
}
}
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() создаёт один изометрический блок. Это примитив, который выглядит как трёхмерный параллелепипед, нарисованный в изометрической проекции.
Ключевые параметры метода: - **x, y**: Координаты центра блока на экране. - **size**: Ширина и высота «верхней» грани блока. - **height**: Высота блока, создающая эффект объёма. - **fillTop, fillLeft, fillRight**: Цвета заливки для верхней, левой и правой граней соответственно.
const block = this.add.isobox(400, 300, 80, 80, 0x00b9f2, 0x016fce, 0x028fdf);В примере выше создаётся синий блок шириной и высотой 80 пикселей, с высотой (объёмом) 80 пикселей. Разные цвета для граней (fillLeft и fillRight) создают эффект освещения и объёма.
Сборка сложного объекта из примитивов
Сложный объект, например персонажа, можно собрать как конструктор, располагая простые изоблоки друг относительно друга. В исходном примере так создаётся стилизованная птица.
const leg1 = this.add.isobox(415, 340, 10, 50, 0xffe31f, 0xf2a022, 0xf8d80b);
const body2 = this.add.isobox(400, 300, 80, 80, 0x00b9f2, 0x016fce, 0x028fdf);
const beak = this.add.isobox(430, 270, 40, 10, 0xffe31f, 0xf2a022, 0xf8d80b);Каждая часть тела (лапы, туловище, клюв, глаз, крыло) — это отдельный изоблок. Подбирая координаты, размеры и цвета, можно сформировать целостный образ. Этот подход даёт полный контроль над формой и цветом каждой детали прямо из кода.
Управление видимостью граней
По умолчанию у изоблока отрисовываются все три видимые грани. Метод .setFaces() позволяет скрыть любую из них, что полезно для создания плоских или частично невидимых форм.
const eye = this.add.isobox(394, 255, 30, 15, 0xffffff, 0xffffff, 0xffffff).setFaces(false, true, false);В данном коде создаётся белый блок для глаза. Вызов .setFaces(false, true, false) отключает отрисовку верхней и правой граней, оставляя только левую. Это создаёт плоскую, «срезанную» форму, идеальную для имитации блика в глазу или других плоских деталей на объёмном объекте.
Параметры метода: setFaces(showTop, showLeft, showRight).
Группировка и трансформация с помощью Container
Phaser Container — это специальный игровой объект, который может выступать в роли родителя для других объектов. Это позволяет управлять всей группой объектов как единым целым: перемещать, масштабировать, вращать.
const container = this.add.container();
container.add([ leg1, leg2, body1, body2, beak, eye, pupil, wing ]);
container.x -= 400;
container.y -= 200;
container.setScale(2);В примере все части птицы добавляются в контейнер. Затем контейнер смещается влево и вверх, а также масштабируется в 2 раза. Все эти трансформации автоматически применяются ко всем дочерним объектам (isobox), что очень удобно для позиционирования сложного составного объекта на сцене и управления его размером.
Анимация составного объекта
Поскольку контейнер — это обычный игровой объект Phaser, к нему можно применять твины (плавные анимации). Анимируя контейнер, мы анимируем всю группу объектов внутри него.
this.tweens.add({
targets: container,
y: '-=160',
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});Этот твин заставляет контейнер с птицей перемещаться вверх на 160 пикселей от исходной позиции, а затем возвращаться обратно (yoyo: true). Анимация повторяется бесконечно (repeat: -1) с плавным синусоидальным ускорением (ease: 'Sine.easeInOut'). В результате птица плавно «парит» на месте.
Создание объектов окружения
Тот же принцип сборки из примитивов применим и для создания статических объектов окружения или декораций.
const pear1 = this.add.isobox(100, 200, 40, 25, 0x8dcb0e, 0x3f8403, 0x63a505);
const pear2 = this.add.isobox(100, 172, 30, 15, 0x8dcb0e, 0x3f8403, 0x63a505);
const stalk = this.add.isobox(100, 156, 5, 8, 0x936e06, 0x5d3e00, 0x8c5829);Здесь из трёх изоблоков (два зелёных разного размера и один коричневый) собирается простая стилизованная груша. Располагая блоки один над другим и подбирая цвета, можно быстро создавать деревья, камни, строения и другие элементы игрового мира без использования внешних изображений.
Что попробовать дальше
Изометрические блоки в Phaser — это гибкий инструмент для программируемой графики. Они отлично подходят для прототипирования, создания уникального стиля или динамической генерации контента. Экспериментируйте: попробуйте создать интерфейс здоровья из stacked isobox, анимировать изменение цвета граней в зависимости от состояния объекта или сгенерировать целый изометрический городской квартал, расставляя блоки в цикле. Комбинируя этот подход с контейнерами и твинами, вы сможете оживить свою сцену с минимальными затратами ресурсов.