О чем этот пример
Создание игровых объектов в Phaser часто требует повторения однотипного кода. Но что, если можно описать объект в виде конфигурации и мгновенно его создать? Встроенный метод `make.image` позволяет именно это, превращая простой объект JavaScript в готовый спрайт. Эта статья покажет, как использовать конфигурационные объекты для создания изображений с заданными свойствами, включая случайные значения для позиции, прозрачности и масштаба. Это мощный инструмент для быстрого прототипирования, генерации случайного контента и поддержания чистоты кода.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('bunny', 'assets/sprites/bunny.png');
this.load.image('atari', 'assets/sprites/atari400.png');
this.load.image('logo', 'assets/sprites/phaser2.png');
}
create ()
{
// Implicit values
const config1 = {
key: 'bunny',
x: 400,
y: 300
};
// Implicit values
const config2 = {
key: 'bunny',
x: 400,
y: 300,
flipX: true,
flipY: true
};
// An array means 'pick one element at random'
const config3 = {
key: [ 'bunny', 'atari', 'logo' ],
x: 400,
y: 300
};
// randInt means pick a random integer between the min and max values given
const config4 = {
key: 'atari',
x: { randInt: [ 0, 800 ] },
y: 300
};
// randFloat means pick a random float between the min and max values given
const config5 = {
key: 'logo',
x: 400,
y: 300,
alpha: { randFloat: [ 0.1, 1 ] }
};
// If the property is a function it will invoke it and use the result as the value
const config6 = {
key: 'atari',
x: 400,
y: function ()
{
return 100 + Math.random() * 500;
}
};
// An example using randFloat to set the scale of a Sprite
const config7 = {
key: 'logo',
x: 400,
y: 300,
scale: { randFloat: [ 0.2, 2 ] }
};
// An example using randFloat to set independent x and y scale values
const config8 = {
key: 'logo',
x: 400,
y: 300,
scale: { x: { randFloat: [ 0.2, 2 ] }, y: { randFloat: [ 1.5, 3 ] } }
};
this.make.image(config8);
}
}
const config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example
};
const game = new Phaser.Game(config);
Базовое создание изображения
Метод this.make.image() принимает объект конфигурации и возвращает экземпляр Phaser.GameObjects.Image. Самый простой конфиг должен содержать ключ текстуры (key) и координаты.
const config1 = {
key: 'bunny',
x: 400,
y: 300
};
this.make.image(config1);Здесь создается изображение с текстурой 'bunny' в точке (400, 300). Также можно задать дополнительные базовые свойства, такие как отражение по осям.
const config2 = {
key: 'bunny',
x: 400,
y: 300,
flipX: true,
flipY: true
};Случайный выбор текстуры
Поле key может быть не только строкой, но и массивом строк. В этом случае Phaser случайным образом выберет одну из предложенных текстур при создании объекта.
const config3 = {
key: [ 'bunny', 'atari', 'logo' ],
x: 400,
y: 300
};Это удобно для создания вариативных объектов, например, случайных препятствий или бонусов, без написания дополнительной логики выбора.
Случайные числовые значения: randInt и randFloat
Для создания динамических сцен часто нужны случайные значения. Phaser позволяет задавать их прямо в конфиге с помощью специальных объектов randInt (целые числа) и randFloat (числа с плавающей точкой).
randInt принимает массив [min, max] и возвращает случайное целое число в этом диапазоне (включительно).
const config4 = {
key: 'atari',
x: { randInt: [ 0, 800 ] },
y: 300
};randFloat работает аналогично, но возвращает дробное число. Его можно использовать для любых числовых свойств, например, для прозрачности (alpha) или масштаба (scale).
const config5 = {
key: 'logo',
x: 400,
y: 300,
alpha: { randFloat: [ 0.1, 1 ] }
};Использование функций для вычисления значений
Если значению свойства присвоена функция, Phaser вызовет её и использует возвращаемый результат. Это дает максимальную гибкость для вычислений.
const config6 = {
key: 'atari',
x: 400,
y: function ()
{
return 100 + Math.random() * 500;
}
};Здесь координата Y будет вычислена как случайное число от 100 до 600. Такой подход полезен для сложных алгоритмов размещения, которые нельзя описать простым диапазоном.
Продвинутое управление масштабом
Свойство scale может быть как числом (равномерное масштабирование), так и объектом с независимыми значениями для осей X и Y.
Пример равномерного случайного масштаба:
const config7 = {
key: 'logo',
x: 400,
y: 300,
scale: { randFloat: [ 0.2, 2 ] }
};Пример независимого масштабирования по осям. Обратите внимание на вложенную структуру:
const config8 = {
key: 'logo',
x: 400,
y: 300,
scale: {
x: { randFloat: [ 0.2, 2 ] },
y: { randFloat: [ 1.5, 3 ] }
}
};
this.make.image(config8);В этом случае изображение будет растянуто по ширине в 0.2-2 раза, а по высоте – в 1.5-3 раза от исходного размера, что может создать интересные визуальные искажения.
Что попробовать дальше
Метод make.image с конфигурационным объектом – это мощный и элегантный способ создания игровых объектов в Phaser. Он заменяет многострочные последовательности вызовов setter'ов на декларативное описание, делает код чище и открывает двери для процедурной генерации.
**Идеи для экспериментов:**
1. Создайте функцию-фабрику, которая генерирует конфиги для роя однотипных врагов с разными текстурами, скоростями и размерами.
2. Скомбинируйте несколько случайных свойств (масштаб, поворот, оттенок) для создания уникальных частиц в системе эффектов.
3. Используйте функцию для свойства key, чтобы выбирать текстуру на основе сложной логики (например, времени суток в игре).