Поддержка Unicode и эмодзи

PixiJS изначально поддерживает работу с Unicode-символами, что позволяет отображать тексты на любых языках, включая кириллицу, китайские иероглифы и специальные символы. Основным классом для отображения текста является PIXI.Text. Его конструктор принимает два параметра: строку текста и объект опций для стилизации.

const style = new PIXI.TextStyle({
    fontFamily: "Arial",
    fontSize: 36,
    fill: "#ffffff"
});

const unicodeText = new PIXI.Text("Пример текста на русском и 中文字符", style);
app.stage.addChild(unicodeText);

Ключевой момент: PIXI.Text корректно обрабатывает любые символы, представленные в формате UTF-16, включая диакритические знаки и специальные символы.

Настройка шрифтов для Unicode

Не все шрифты поддерживают полный диапазон Unicode. Для корректного отображения необходимо выбирать шрифты с расширенной поддержкой символов. В PixiJS можно подключать веб-шрифты через CSS и использовать их через fontFamily:

const style = new PIXI.TextStyle({
    fontFamily: "Noto Sans, Arial",
    fontSize: 32,
    fill: "#ffcc00"
});

Использование резервного шрифта (например, Arial) обеспечивает fallback для символов, отсутствующих в основном шрифте.

Отображение эмодзи

Эмодзи в PixiJS обрабатываются как обычные Unicode-символы, поэтому поддержка их отображения напрямую зависит от шрифта. Для большинства современных платформ рекомендуется использовать шрифты типа Noto Color Emoji или Segoe UI Emoji.

const emojiText = new PIXI.Text("Текст с эмодзи ???", {
    fontFamily: "Segoe UI Emoji",
    fontSize: 48,
    fill: "#ffffff"
});

app.stage.addChild(emojiText);

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

Работа с разными платформами

Поскольку рендеринг эмодзи зависит от операционной системы и браузера, рекомендуется:

  • Проверять наличие шрифта на платформе пользователя.
  • Использовать fallback-шрифты для символов, которые могут отсутствовать.
  • Для гарантированного отображения цветных эмодзи применять текстуры вместо прямого рендеринга PIXI.Text.
const emojiTexture = PIXI.Texture.from("emoji.png");
const emojiSprite = new PIXI.Sprite(emojiTexture);
emojiSprite.x = 100;
emojiSprite.y = 50;
app.stage.addChild(emojiSprite);

Размещение и выравнивание текста с Unicode

PixiJS позволяет управлять выравниванием текста, что особенно важно для смешанного контента (текст + эмодзи):

const multilineText = new PIXI.Text("Первая строка\nВторая строка с эмодзи ?", {
    fontFamily: "Arial, Segoe UI Emoji",
    fontSize: 36,
    fill: "#00ff00",
    align: "center",
    wordWrap: true,
    wordWrapWidth: 400
});

multilineText.anchor.set(0.5);
multilineText.x = app.screen.width / 2;
multilineText.y = app.screen.height / 2;
app.stage.addChild(multilineText);

Совет: для многострочных текстов с эмодзи важно включать wordWrap, чтобы строки корректно переносились без разрыва символов.

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

PixiJS позволяет обновлять текст в реальном времени, сохраняя корректное отображение Unicode:

const dynamicText = new PIXI.Text("Начало текста", style);
app.stage.addChild(dynamicText);

setTimeout(() => {
    dynamicText.text = "Текст обновлён с эмодзи ??";
}, 2000);

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

Поддержка сложных символов и диакритики

Unicode включает комбинированные символы и диакритические знаки. PixiJS корректно отображает их, если шрифт поддерживает нужные глифы:

const accentText = new PIXI.Text("Café naïve résumé", style);
app.stage.addChild(accentText);

Для сложных скриптов, таких как арабский или хинди, необходимо использовать шрифты с полным покрытием и учитывать направление текста (LTR/RTL). Для RTL можно использовать свойство direction через CSS при использовании веб-шрифтов в PixiJS через PIXI.TextStyle.

PixiJS предоставляет гибкие возможности для работы с Unicode и эмодзи, позволяя сочетать многоязычный текст с графикой, контролировать выравнивание, обновлять содержимое динамически и обеспечивать совместимость с различными платформами. Оптимальное использование шрифтов и правильная настройка стилей обеспечивают корректное отображение символов в любом контексте.

Оглавление