DynamicBitmapText и callbacks на символы

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

Создание DynamicBitmapText

Для создания текста необходимо указать сцену, координаты и используемый шрифт в формате bitmap font:

const text = this.add.dynamicBitmapText(100, 50, 'myFont', 'Привет Phaser', 32);
  • x, y — координаты текста на сцене.
  • myFont — ключ шрифта, предварительно загруженного через this.load.bitmapFont.
  • Привет Phaser — текст, который будет отображён.
  • 32 — размер символов.

Изменение текста

DynamicBitmapText позволяет изменять текст без пересоздания объекта с помощью метода setText:

text.setText('Новый текст');

Можно передавать массив строк, чтобы текст автоматически переносился на новые строки:

text.setText(['Первая строка', 'Вторая строка']);

Настройка символов

Каждый символ DynamicBitmapText представлен отдельным объектом, доступным через массив text.getTextBounds().glyphs или с помощью специальных методов Phaser. Это открывает возможности для анимации и обработки событий на уровне символов.

Примеры изменения отдельных символов:

text.setTint(0xff0000); // весь текст
text.setAlpha(0.5); // прозрачность всего текста

Для изменения конкретного символа можно использовать callback при генерации текста.

Callbacks на символы

Phaser предоставляет метод setCharacterCallback, который позволяет отслеживать появление символов и выполнять действия для каждого из них:

text.setCharacterCallback((char, index, x, y) => {
    console.log(`Символ: ${char}, индекс: ${index}, позиция: (${x}, ${y})`);
});

Параметры callback:

  • char — текущий символ.
  • index — позиция символа в строке.
  • x, y — координаты символа на сцене.

Callback может использоваться для:

  • Анимации появления символов (эффект печатающей машинки).
  • Изменения цвета отдельных символов.
  • Применения физики или интерактивности к каждому символу.

Анимация символов

Используя setCharacterCallback, можно создавать сложные эффекты:

text.setCharacterCallback((char, index, x, y) => {
    const tween = this.tweens.add({
        targets: text.getChar(index),
        y: y - 10,
        duration: 300,
        yoyo: true,
        repeat: -1,
        delay: index * 50
    });
});
  • getChar(index) — возвращает объект символа для управления его свойствами.
  • tweens.add — добавляет анимацию для конкретного символа.

Эффект «прыгающего текста» достигается за счёт смещения координаты y с последовательной задержкой для каждого символа.

Использование событий при взаимодействии

С DynamicBitmapText можно сделать каждый символ интерактивным:

text.setCharacterCallback((char, index, x, y) => {
    const glyph = text.getChar(index);
    glyph.setInteractive();
    glyph.on('pointerover', () => glyph.setTint(0x00ff00));
    glyph.on('pointerout', () => glyph.clearTint());
});
  • setInteractive — делает символ реагирующим на события мыши или касания.
  • pointerover / pointerout — обработка наведения и ухода курсора.

Таким образом, можно создавать интерфейсы с интерактивными буквами или текстовыми элементами игры.

Производительность

DynamicBitmapText оптимизирован для работы с большим количеством текста, но при активной анимации каждого символа важно учитывать нагрузку. Рекомендуется:

  • Использовать callback только для видимых символов.
  • Минимизировать создание tween-объектов в каждом кадре.
  • Использовать группы или контейнеры для управления множеством текстовых объектов.

Совместное использование с другими объектами Phaser

DynamicBitmapText можно комбинировать с спрайтами, контейнерами и таймерами:

this.time.addEvent({
    delay: 100,
    repeat: text.text.length - 1,
    callback: () => {
        const index = this.time.events.currentRepeat;
        text.getChar(index).setAlpha(1);
    }
});

Это позволяет создавать эффект постепенного появления текста с полной контролируемой анимацией.

Ключевые методы и свойства

  • setText(text) — изменение текста.
  • setCharacterCallback(callback) — установка callback на символы.
  • getChar(index) — получение объекта символа по индексу.
  • setTint(color) — установка цвета для текста или символа.
  • setAlpha(value) — изменение прозрачности текста.
  • setInteractive() — делает символ интерактивным.

DynamicBitmapText сочетает в себе высокую производительность bitmap-шрифтов и гибкость работы с символами, что делает его незаменимым инструментом для анимаций текста, интерфейсов и игровых эффектов в Phaser.

Оглавление