Перенос текста и выравнивание

В PixiJS текст представлен классом PIXI.Text, который позволяет отображать статические и динамические строки с разнообразными стилями. Основная структура создания текста включает два параметра: строку и объект стиля. Например:

const style = new PIXI.TextStyle({
    fontFamily: "Arial",
    fontSize: 36,
    fill: "#ffffff",
    align: "center",
    wordWrap: true,
    wordWrapWidth: 400
});

const text = new PIXI.Text("Пример текста с переносом и выравниванием", style);
app.stage.addChild(text);

Ключевые моменты:

  • fontFamily и fontSize определяют шрифт и размер текста.
  • fill задаёт цвет текста.
  • align отвечает за выравнивание текста внутри заданного контейнера (left, center, right).
  • wordWrap и wordWrapWidth управляют переносом текста по словам.

Перенос текста

Перенос текста в PixiJS осуществляется с помощью свойства wordWrap и параметра wordWrapWidth.

  • wordWrap: true включает автоматический перенос текста.
  • wordWrapWidth задаёт максимальную ширину текста, при которой строки будут переноситься на новую.

Пример:

const wrappedText = new PIXI.Text(
    "Этот текст будет автоматически переноситься на новые строки, если превысит заданную ширину.",
    new PIXI.TextStyle({
        fontSize: 24,
        fill: "#ffcc00",
        wordWrap: true,
        wordWrapWidth: 300
    })
);
app.stage.addChild(wrappedText);

Если wordWrap не включен, длинные строки будут выходить за пределы контейнера, что может нарушить дизайн интерфейса.

Выравнивание текста

Выравнивание текста управляется свойством align внутри объекта TextStyle. Поддерживаются три значения:

  • left – выравнивание по левому краю (по умолчанию).
  • center – центрирование текста.
  • right – выравнивание по правому краю.
const centerText = new PIXI.Text("Центрированный текст", new PIXI.TextStyle({
    fontSize: 28,
    fill: "#00ff00",
    align: "center",
    wordWrap: true,
    wordWrapWidth: 400
}));
centerText.x = 200; // смещение по горизонтали
centerText.y = 50;
app.stage.addChild(centerText);

Выравнивание важно учитывать совместно с координатами спрайта, так как PIXI.Text выравнивает строки относительно своего локального контейнера.

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

В PixiJS многострочный текст создаётся автоматически при включённом переносе или с использованием символа переноса строки \n. Пример:

const multiLineText = new PIXI.Text("Первая строка\nВторая строка\nТретья строка", new PIXI.TextStyle({
    fontSize: 20,
    fill: "#ffffff",
    align: "left"
}));
app.stage.addChild(multiLineText);

Символ \n создаёт жёсткий перенос строки, что позволяет вручную контролировать структуру текста независимо от ширины контейнера.

Настройка вертикального выравнивания

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

const style = new PIXI.TextStyle({
    fontSize: 24,
    fill: "#ffffff",
    wordWrap: true,
    wordWrapWidth: 300,
    align: "center"
});

const text = new PIXI.Text("Текст с вертикальным выравниванием", style);
text.x = 100;
text.y = 200 - text.height / 2; // центрирование по вертикали
app.stage.addChild(text);

Использование text.height позволяет корректно позиционировать текст по вертикали внутри контейнера или сцены.

Динамическое изменение текста и стиля

Свойства текста в PixiJS можно изменять в процессе работы приложения:

  • text.text = "Новый текст"; – обновление строки.
  • text.style = new PIXI.TextStyle({...}); – смена стиля.
  • text.style.wordWrap = true; и text.style.wordWrapWidth = 400; – изменение параметров переноса.

После изменения текста или стиля PixiJS автоматически пересчитывает размеры и отображение текста на сцене.

Использование контейнеров для сложного выравнивания

Для сложного расположения текста в интерфейсе рекомендуется использовать PIXI.Container. В контейнер можно добавлять несколько объектов PIXI.Text, выравнивать их относительно центра, краёв или друг друга. Пример:

const container = new PIXI.Container();

const title = new PIXI.Text("Заголовок", new PIXI.TextStyle({
    fontSize: 36,
    fill: "#ffffff",
    align: "center"
}));

const description = new PIXI.Text("Описание с переносом текста и выравниванием.", new PIXI.TextStyle({
    fontSize: 24,
    fill: "#cccccc",
    wordWrap: true,
    wordWrapWidth: 400,
    align: "left"
}));

title.x = 200 - title.width / 2;
title.y = 0;

description.x = 0;
description.y = 50;

container.addChild(title, description);
app.stage.addChild(container);

Контейнер упрощает управление группой текстовых элементов, обеспечивая единое позиционирование и выравнивание внутри сцены.

Выравнивание и перенос текста в PixiJS являются фундаментальными инструментами при создании интерфейсов и игровых сцен. Использование комбинации свойств wordWrap, align и координат объектов позволяет реализовать сложное форматирование текста, сохраняя гибкость и контроль над визуальной компоновкой.

Оглавление