Замена текстуры у объекта во время выполнения

В библиотеке Phaser 3 объекты, такие как спрайты, изображения или анимационные элементы, имеют привязанную текстуру при создании. Текстура — это визуальное представление объекта, загруженное через Asset Loader (this.load.image, this.load.spritesheet и т.д.). Замена текстуры во время выполнения позволяет динамически изменять внешний вид объектов без пересоздания спрайта.

Для замены текстуры используется метод setTexture(key, frame). Он меняет визуальный ресурс на указанный в ключе загрузки текстуры. Если объект является спрайтом с анимациями, важно учитывать, что смена текстуры может повлиять на текущее состояние анимации.

// Пример замены текстуры спрайта
player.setTexture('player_running'); // 'player_running' — ключ загруженной текстуры

Параметры метода setTexture:

  • key — строка, идентификатор текстуры, загруженной через загрузчик ресурсов.
  • frame — опциональный параметр для указания конкретного кадра в спрайтшите или текстуре с несколькими фреймами.
player.setTexture('enemy_spritesheet', 3); // заменяет текстуру на 3-й кадр спрайтшита

Применение с анимациями

Если объект уже имеет привязанную анимацию, вызов setTexture может сбросить текущее состояние анимации. Для корректной работы необходимо:

  1. Прерывать текущую анимацию методом stop().
  2. Установить новую текстуру.
  3. Запустить новую анимацию при необходимости через anims.play('animation_key').
player.anims.stop();
player.setTexture('player_hurt');
player.anims.play('player_hurt_animation');

Динамическая замена на основе условий

Замена текстуры во время выполнения позволяет реализовать различные механики, например:

  • Смена состояния персонажа (здоров, ранен, ускорение):
if (player.health < 20) {
    player.setTexture('player_damaged');
} else {
    player.setTexture('player_normal');
}
  • Смена внешнего вида врагов в зависимости от уровня:
enemy.setTexture('enemy_level_' + enemy.level);
  • Визуальные эффекты при сборе предметов или получении бонусов:
coin.setTexture('coin_glow');
this.time.delayedCall(500, () => coin.setTexture('coin_normal'));

Использование спрайтшитов и фреймов

Для спрайтов, созданных на основе спрайтшитов, ключ текстуры указывает на сам спрайтшит, а второй параметр (frame) определяет конкретный кадр. Это позволяет заменять не весь спрайт, а отдельный фрейм.

// Кадр 5 из спрайтшита "explosion"
explosion.setTexture('explosion_spritesheet', 5);

Замена текстуры у изображений и контейнеров

Метод setTexture применяется не только к спрайтам, но и к объектам типа Image:

background.setTexture('background_night');

Если объект находится в контейнере (Container), текстура меняется на самом объекте, контейнер при этом остается неизменным. Это важно для сложных UI-компоновок или групп спрайтов.

Оптимизация и управление ресурсами

При активной смене текстур важно учитывать:

  • Загрузка всех текстур заранее, чтобы избежать задержек и мерцания при замене.
  • Реиспользование спрайтов вместо удаления и пересоздания, что снижает нагрузку на рендерер.
  • Управление памятью, если большое количество текстур используется только временно. Для временных текстур можно использовать TextureManager.remove(key) после удаления объектов, чтобы освободить ресурсы.

Смена текстуры с эффектами

Для плавной визуальной смены можно комбинировать setTexture с эффектами tween:

this.tweens.add({
    targets: player,
    alpha: 0,
    duration: 200,
    onComplete: () => {
        player.setTexture('player_powerup');
        player.alpha = 1;
    }
});

Это позволяет сделать смену визуально привлекательной без резких скачков.

Итоговые рекомендации

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

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

Оглавление