Генерация текстур из Graphics

В Phaser библиотека Graphics предоставляет мощный инструмент для динамического создания визуальных объектов с возможностью последующей генерации из них текстур. Это особенно полезно для случаев, когда необходимо создавать игровые элементы на лету, без необходимости загружать заранее подготовленные изображения.

Объект Graphics работает как «холст», на котором можно рисовать фигуры, линии, заливки и кривые. После завершения рисования его содержимое можно конвертировать в текстуру с помощью метода generateTexture.

const graphics = this.add.graphics();
graphics.fillStyle(0xff0000, 1);
graphics.fillRect(0, 0, 100, 100);

graphics.generateTexture('redSquare', 100, 100);
graphics.destroy();

В этом примере создается красный квадрат размером 100x100 пикселей. Метод generateTexture принимает три параметра:

  1. ключ текстуры — уникальное имя для последующего использования в игровых объектах.
  2. ширина — ширина создаваемой текстуры.
  3. высота — высота создаваемой текстуры.

После генерации текстуры объект Graphics можно удалить, чтобы освободить память, а текстуру использовать для спрайтов:

this.add.sprite(200, 200, 'redSquare');

Использование заливок и линий

Graphics позволяет комбинировать заливки и линии для создания сложных фигур. Пример создания круга с обводкой:

const graphics = this.add.graphics();
graphics.fillStyle(0x00ff00, 1);
graphics.lineStyle(4, 0x0000ff, 1);
graphics.fillCircle(50, 50, 40);
graphics.strokeCircle(50, 50, 40);

graphics.generateTexture('greenCircle', 100, 100);
graphics.destroy();

this.add.sprite(150, 150, 'greenCircle');

Ключевой момент: порядок операций важен. Сначала задаются заливка и линии, затем рисуется фигура. Любое последующее изменение стиля не повлияет на уже нарисованное.

Генерация текстур с анимацией

Можно использовать Graphics для создания кадров анимации на лету. Например, генерация нескольких вариаций круга с разными цветами:

for (let i = 0; i < 5; i++) {
    const graphics = this.add.graphics();
    graphics.fillStyle(Phaser.Display.Color.GetColor(50*i, 255 - 50*i, 100), 1);
    graphics.fillCircle(50, 50, 40);
    graphics.generateTexture(`circleFrame${i}`, 100, 100);
    graphics.destroy();
}

this.anims.create({
    key: 'circlePulse',
    frames: [
        { key: 'circleFrame0' },
        { key: 'circleFrame1' },
        { key: 'circleFrame2' },
        { key: 'circleFrame3' },
        { key: 'circleFrame4' }
    ],
    frameRate: 8,
    repeat: -1
});

this.add.sprite(200, 200, 'circleFrame0').play('circlePulse');

Такой подход позволяет создавать динамические анимации без использования внешних спрайт-листов.

Масштабирование и производительность

Метод generateTexture создает текстуру с заданными размерами. Если размеры текстуры сильно превышают размеры исходного рисунка, возможна потеря четкости. Рекомендуется:

  • Создавать текстуры близкие к фактическому размеру объектов на экране.
  • При необходимости масштабировать спрайт после генерации, а не увеличивать размеры текстуры через generateTexture.
  • Удалять объект Graphics после генерации, чтобы не держать лишние объекты в сцене.

Комбинирование с другими объектами

Генерированные текстуры могут быть использованы не только для спрайтов, но и для TileSprite, Image и других объектов Phaser. Пример использования для фона:

const graphics = this.add.graphics();
graphics.fillStyle(0x888888, 1);
graphics.fillRect(0, 0, 32, 32);
graphics.generateTexture('tileGray', 32, 32);
graphics.destroy();

this.add.tileSprite(400, 300, 800, 600, 'tileGray');

Работа с прозрачностью и альфа-каналом

Метод fillStyle и lineStyle поддерживают альфа-канал, что позволяет создавать прозрачные и полупрозрачные элементы. Пример полупрозрачного квадрата:

const graphics = this.add.graphics();
graphics.fillStyle(0xff00ff, 0.5);
graphics.fillRect(0, 0, 120, 120);
graphics.generateTexture('semiTransparentSquare', 120, 120);
graphics.destroy();

Текстура сохраняет прозрачность, и при наложении нескольких объектов визуальные эффекты накладываются корректно.

Советы по оптимизации

  1. Минимизировать количество вызовов generateTexture в игровом цикле — лучше генерировать текстуры заранее.
  2. Использовать graphics.clear() при необходимости перерисовки внутри одного объекта Graphics.
  3. Для повторяющихся форм и паттернов использовать TileSprite с сгенерированной текстурой, чтобы избежать лишней генерации.

Генерация текстур через Graphics в Phaser — это гибкий инструмент для динамической визуализации, который позволяет создавать как простые геометрические объекты, так и сложные анимации, при этом эффективно управляя производительностью и памятью.

Оглавление