Text-объект: создание и стилизация

В Phaser 3 текстовые элементы создаются с помощью класса Phaser.GameObjects.Text. Основная функция для создания текстового объекта — this.add.text(x, y, text, style), где:

  • x, y — координаты на сцене (от верхнего левого угла);
  • text — строка, отображаемая на экране;
  • style — объект с настройками визуального оформления текста.

Пример создания базового текста:

this.add.text(100, 50, 'Привет, Phaser!', {
    fontFamily: 'Arial',
    fontSize: '32px',
    color: '#ffffff'
});

Настройка шрифта и цвета

Text-объект поддерживает гибкую настройку шрифта через свойства:

  • fontFamily — название шрифта (например, 'Arial', 'Courier New');
  • fontSize — размер шрифта в пикселях ('24px', '48px');
  • color — цвет текста в формате HEX ('#ff0000') или CSS-значение ('red');
  • fontStyle — стиль шрифта ('normal', 'italic', 'bold');
  • stroke и strokeThickness — контур текста. Например:
this.add.text(100, 100, 'Контурный текст', {
    fontFamily: 'Verdana',
    fontSize: '40px',
    color: '#00ff00',
    stroke: '#000000',
    strokeThickness: 4
});

Выравнивание и многоточие

Текст можно выравнивать как по горизонтали, так и по вертикали. Основные свойства:

  • align — выравнивание текста внутри блока ('left', 'center', 'right');
  • fixedWidth и fixedHeight — фиксированные размеры текстового блока. При переполнении текста можно автоматически добавлять многоточие:
this.add.text(50, 150, 'Длинный текст, который может не помещаться', {
    fontSize: '24px',
    color: '#ffffff',
    align: 'center',
    wordWrap: { width: 200, useAdvancedWrap: true }
});

wordWrap позволяет переносить текст на новую строку при достижении ширины блока.

Использование стилей через объекты

Для упрощения работы со сложными текстовыми стилями можно создавать объекты стилей отдельно:

const style = {
    fontFamily: 'Georgia',
    fontSize: '36px',
    color: '#ffcc00',
    fontStyle: 'bold',
    stroke: '#333333',
    strokeThickness: 2,
    shadow: {
        offsetX: 2,
        offsetY: 2,
        color: '#000000',
        blur: 4,
        stroke: true,
        fill: true
    }
};

this.add.text(200, 200, 'Стильный текст', style);

Тень (shadow) добавляет глубину тексту, делая его более заметным на фоне.

Динамическое обновление текста

Text-объект поддерживает изменение текста после создания через свойство text:

let scoreText = this.add.text(50, 50, 'Очки: 0', { fontSize: '28px', color: '#ffffff' });

scoreText.text = 'Очки: 10';

Также можно менять стиль динамически:

scoreText.setStyle({ color: '#ff0000', fontSize: '32px' });

Добавление интерактивности

Text-объекты могут быть интерактивными, реагируя на события мыши:

let startText = this.add.text(400, 300, 'Начать игру', {
    fontSize: '48px',
    color: '#00ff00'
}).setInteractive();

startText.on('pointerover', () => startText.setStyle({ color: '#ffff00' }));
startText.on('pointerout', () => startText.setStyle({ color: '#00ff00' }));
startText.on('pointerdown', () => console.log('Игра началась!'));

С помощью .setInteractive() текст становится элементом интерфейса, который можно использовать как кнопку или ссылку.

Поддержка HTML-подобного форматирования

Phaser не поддерживает полноценный HTML в Text-объектах, но можно комбинировать несколько текстов или использовать BitmapText для сложных эффектов. Основные возможности включают:

  • разноцветные слова через несколько Text-объектов;
  • изменение шрифта и размера для отдельных фрагментов;
  • добавление эффектов анимации через tween на Text-объект.

Анимация текста

Text-объекты легко анимировать с помощью встроенной системы tweens:

this.tweens.add({
    targets: scoreText,
    y: 100,
    alpha: 0,
    duration: 1000,
    ease: 'Power2',
    yoyo: true,
    repeat: -1
});

Возможные свойства для анимации:

  • x, y — перемещение текста;
  • alpha — прозрачность;
  • scaleX, scaleY — изменение размера;
  • angle — поворот текста.

BitmapText для производительных игр

Для игр с большим количеством текста рекомендуется использовать BitmapText (this.add.bitmapText), который рендерится как спрайты и значительно быстрее обычного Text-объекта. Основные отличия:

  • фиксированный набор шрифтов (bitmap font);
  • поддержка масштабирования без потери качества;
  • быстрее при массовом обновлении текста.
this.add.bitmapText(100, 100, 'desyrel', 'Привет, мир!', 32);

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

Text-объект можно добавлять в контейнеры (Container), группировать с изображениями или спрайтами для комплексного интерфейса. Это позволяет создавать HUD, кнопки и надписи с динамическим содержанием, управляемые как единый объект.

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

Оглавление