Класс Text и его параметры

Класс PIXI.Text используется для отображения текстовой информации в 2D-графике на базе WebGL или Canvas через библиотеку PixiJS. Он наследует функциональность от PIXI.Sprite, что позволяет применять трансформации, эффекты и взаимодействие с другими объектами сцены.

Создание текста

Для создания текста используется конструктор:

const text = new PIXI.Text("Привет, PixiJS!", options);
  • Первый параметр — строка текста (string). Можно передавать любой текст, включая символы Unicode.
  • Второй параметр — объект настроек (TextStyle), определяющий внешний вид текста.

Если объект настроек не передан, используется стиль по умолчанию.

Объект TextStyle

Объект PIXI.TextStyle содержит ключевые свойства для форматирования текста. Основные параметры:

  • fontFamily — шрифт текста. Может быть строкой с одним шрифтом или массивом альтернативных шрифтов.

    fontFamily: 'Arial'

  • fontSize — размер текста в пикселях. Может быть числом или строкой с единицами (например, '20px').

  • fontStyle — стиль шрифта: 'normal', 'italic'.

  • fontWeight — толщина шрифта: 'normal', 'bold', '100'–'900'.

  • fill — цвет текста. Может быть строкой ('#ff0000'), массивом цветов для градиента, или числом (0xff0000).

  • stroke — цвет обводки текста.

  • strokeThickness — толщина обводки в пикселях.

  • dropShadow — включает тень для текста (boolean).

  • dropShadowColor, dropShadowBlur, dropShadowAngle, dropShadowDistance — параметры тени.

  • wordWrap — автоматический перенос слов (boolean).

  • wordWrapWidth — ширина области для переноса текста.

  • align — выравнивание текста: 'left', 'center', 'right'.

Пример использования:

const style = new PIXI.TextStyle({
    fontFamily: 'Verdana',
    fontSize: 36,
    fontStyle: 'italic',
    fontWeight: 'bold',
    fill: ['#ffffff', '#00ff99'],
    stroke: '#4a1850',
    strokeThickness: 5,
    dropShadow: true,
    dropShadowColor: '#000000',
    dropShadowBlur: 4,
    dropShadowAngle: Math.PI / 6,
    dropShadowDistance: 6,
    wordWrap: true,
    wordWrapWidth: 400,
    align: 'center'
});

const text = new PIXI.Text('Пример текста с PixiJS', style);

Основные свойства класса Text

Класс PIXI.Text расширяет PIXI.Sprite и добавляет собственные свойства:

  • text — текущий текст. Можно изменить после создания:

    text.text = "Новый текст";

    При изменении текста автоматически пересоздается текстура, что важно учитывать для производительности.

  • style — объект TextStyle, задающий оформление текста. Его можно изменить в любое время:

    text.style.fontSize = 48;

    Для полного обновления текстуры рекомендуется использовать text.style = new PIXI.TextStyle({...}).

  • resolution — плотность пикселей для рендеринга текста. Чем выше значение, тем четче текст, особенно на экранах с высокой плотностью пикселей.

  • roundPixels — округление координат до целых чисел, уменьшает размытие текста при трансформациях.

Измерение и позиционирование текста

Для точного позиционирования и взаимодействия с другими элементами сцены применяются:

  • width и height — размеры текстового блока. Меняются автоматически при обновлении текста.
  • getLocalBounds() — возвращает границы текста относительно его локальной системы координат.
  • getGlobalBounds() — возвращает границы текста относительно сцены.

Пример:

const bounds = text.getLocalBounds();
console.log(`Ширина: ${bounds.width}, Высота: ${bounds.height}`);

Многострочный текст и выравнивание

Для многострочного текста используется символ переноса \n или включение wordWrap:

const multiLine = new PIXI.Text(
    'Первая строка\nВторая строка',
    { fontSize: 24, wordWrap: true, wordWrapWidth: 300 }
);

Выравнивание регулируется через align:

  • 'left' — по левому краю
  • 'center' — по центру
  • 'right' — по правому краю

Производительность и оптимизация

Изменение текста вызывает пересоздание текстуры, что ресурсоемко. Для оптимизации:

  • Минимизировать частое обновление текста.
  • Использовать TextTexture для статичных надписей.
  • В случае анимаций лучше применять BitmapText для высокой производительности.

Взаимодействие с другими объектами

Так как PIXI.Text наследует PIXI.Sprite, доступны стандартные свойства трансформации:

  • x, y — позиция
  • scale — масштабирование
  • rotation — вращение
  • pivot — точка вращения и трансформации

Можно применять фильтры:

text.filters = [new PIXI.filters.BlurFilter(5)];

Итоговая структура использования

  1. Создание TextStyle с необходимыми параметрами.

  2. Создание экземпляра PIXI.Text.

  3. Добавление текста на сцену:

    app.stage.addChild(text);

  4. Манипуляции с текстом через свойства text, style, position, rotation и фильтры.

Это обеспечивает гибкую работу с текстом, его оформление, анимацию и интеграцию в сложные сцены PixiJS.

Оглавление