О чем этот пример
В разработке игр часто возникает необходимость генерировать контент на лету. Динамические текстуры в Phaser предоставляют мощный инструмент для создания и модификации изображений прямо во время выполнения игры. Эта технология особенно полезна для генерации уникальных предметов, интерфейсов, эффектов или, как в нашем примере, персонализированных баннеров для игроков. Освоив работу с динамическими текстурами, вы сможете значительно разнообразить контент вашей игры без необходимости готовить сотни заранее нарисованных ассетов. Это экономит время художника и ресурсы игры, позволяя создавать вариативный визуальный контент программным способом.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
constructor ()
{
super();
}
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.atlas('banner', 'assets/atlas/banners.png', 'assets/atlas/banners.json');
}
create ()
{
this.createBanner('player1Banner', 'flag_01_red', 390);
this.createBanner('player2Banner', 'flag_02_green');
this.createBanner('player3Banner', 'flag_02_violet');
const player1 = this.add.sprite(150, 260, 'player1Banner').setScale(0.5);
const player2 = this.add.sprite(400, 340, 'player2Banner').setScale(0.5);
const player3 = this.add.sprite(650, 260, 'player3Banner').setScale(0.5);
}
createBanner (key, flag, runeY = 100)
{
const GetRandom = Phaser.Utils.Array.GetRandom;
// Create our Dynamic Texture which is 512x512 in size
const banner = this.textures.addDynamicTexture(key, 512, 512)
// Draw a flag to our texture
banner.stamp('banner', flag, 256, 256);
// Draw a random crest - there are 10 available, from Banner_01 to Banner_10
const crests = [ '01', '02', '03', '04', '05', '06', '07', '08', '09', '10' ];
banner.stamp('banner', `Banner_${GetRandom(crests)}`, 256, 256, { alpha: 0.3, blendMode: Phaser.BlendModes.ADD });
// Draw 3 random runes across the flag - these are frames 'Badges_01' to 'Badges_24' in the atlas
const runes = [
'01', '02', '03', '04', '05', '06', '07', '08', '09', '10',
'11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
'21', '22', '23', '24'
];
// By using the 'stamp' config we can scale and offset the frame
banner.stamp('banner', `Badges_${GetRandom(runes)}`, 256, runeY, { scale: 0.5, originX: 1 });
banner.stamp('banner', `Badges_${GetRandom(runes)}`, 256, runeY, { scale: 0.5, originX: 0.5 });
banner.stamp('banner', `Badges_${GetRandom(runes)}`, 256, runeY, { scale: 0.5, originX: 0 });
banner.render();
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
backgroundColor: '#2d2d6d',
scene: Example
};
const game = new Phaser.Game(config);
Что такое динамическая текстура
Динамическая текстура (DynamicTexture) в Phaser — это специальный тип текстуры, которая создаётся и может быть изменена во время выполнения игры. В отличие от статических текстур, загруженных из файлов, динамическая текстура представляет собой пустой холст заданного размера, на который можно рисовать другие графические элементы.
В нашем примере создаётся несколько таких текстур для баннеров игроков. Ключевой метод для создания — this.textures.addDynamicTexture(key, width, height).
const banner = this.textures.addDynamicTexture(key, 512, 512)Эта строка создаёт новую динамическую текстуру с уникальным ключом key и размерами 512x512 пикселей. После создания текстура становится доступной в менеджере текстур сцены и может быть использована для создания спрайтов, как и любая другая текстура.
Метод stamp — основа композиции
Основной инструмент для рисования на динамической текстуре — метод stamp. Он позволяет «штамповать» один графический элемент (фрейм из текстуры) на холст динамической текстуры в заданной позиции.
banner.stamp('banner', flag, 256, 256);Параметры метода:
1. Ключ атласа или текстуры-источника (в нашем случае 'banner').
2. Имя фрейма из этого атласа (например, 'flag_01_red').
3. Координата X для размещения штампа (центр — 256).
4. Координата Y для размещения штампа (центр — 256).
Метод также принимает необязательный пятый параметр — объект конфигурации, который позволяет управлять отрисовкой. В примере используются свойства alpha, blendMode, scale и originX.
{ alpha: 0.3, blendMode: Phaser.BlendModes.ADD }
{ scale: 0.5, originX: 1 }Эти настройки позволяют, например, сделать герб полупрозрачным и наложить его в режиме сложения (ADD), а также уменьшить размер рун и изменить точку их привязки по оси X.
Случайный выбор и параметризация
Чтобы баннеры были уникальными, в коде используется случайный выбор элементов из массивов. Для этого задействуется утилита Phaser.Utils.Array.GetRandom.
const GetRandom = Phaser.Utils.Array.GetRandom;
const crests = [ '01', '02', '03', ... ];
banner.stamp('banner', `Banner_${GetRandom(crests)}`, ... );Этот подход позволяет из набора заранее подготовленных элементов (10 гербов, 24 руны) генерировать огромное количество комбинаций. Функция createBanner также параметризована: она принимает ключ для текстуры, имя флага и вертикальную позицию для рун (runeY). Это делает код гибким и переиспользуемым.
this.createBanner('player1Banner', 'flag_01_red', 390);
this.createBanner('player2Banner', 'flag_02_green');Сборка и использование текстуры
Все операции stamp выполняются на внутреннем холсте текстуры, но чтобы изменения стали видны в игре, необходимо явно вызвать метод render(). Этот метод финализирует все отрисовки и обновляет текстуру.
banner.render();После этого динамическая текстура готова к использованию. Её можно применять для создания спрайтов, точно так же, как и обычную, загруженную текстуру. Ключ, переданный при создании ('player1Banner'), используется в качестве идентификатора.
const player1 = this.add.sprite(150, 260, 'player1Banner').setScale(0.5);Обратите внимание: мы создаём спрайт, указывая в качестве текстуры ключ нашей динамической текстуры. Спрайт автоматически получает всё изображение, сгенерированное в методе createBanner.
Что попробовать дальше
Динамические текстуры открывают широкие возможности для процедурной генерации графики прямо в игре. Вы освоили базовый пайплайн: создание холста, штамповка элементов и финализация рендером.
Для экспериментов попробуйте:
1. Изменять порядок вызовов stamp — последующие элементы рисуются поверх предыдущих.
2. Использовать другие свойства конфига stamp, такие как angle, tint или originY.
3. Анимировать динамическую текстуру, изменяя её в update, чтобы создавать движущиеся или мигающие элементы интерфейса.
4. Комбинировать динамические текстуры с системами частиц, используя их в качестве текстур для эмиттеров.