Phaser.js: всё об играх и разработке

О чем этот пример

Эмодзи стали неотъемлемой частью современного интерфейса, включая игры. Использование смайликов и пиктограмм в игровых текстах — отличный способ добавить эмоций, визуальных подсказок или просто создать стилизованный интерфейс. В Phaser работа с эмодзи через объект `Text` интуитивно понятна, но имеет свои особенности, связанные с кроссплатформенным отображением и кодированием. В этой статье мы разберем, как корректно отображать эмодзи и использовать юникод-последовательности для полного контроля над выводом символов.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        //  How this renders depends entirely on the browser, each does it a little differently
        //  Note that the fill color value is ignored for most emoji (as you'd expect)
        this.add.text(0, 60, '😜🍩🏄🕹💖🧟', { fontFamily: 'Arial', fontSize: 96, fill: '#ff0000' });
        this.add.text(0, 260, '🥪🤬🧠💩🤖👩‍💻', { fontFamily: 'Arial', fontSize: 96, fill: '#ff0000' });

        //  Here is how to embed an emoji using a unicode sequence instead:
        //  For more details see http://crocodillon.com/blog/parsing-emoji-unicode-in-javascript
        this.add.text(0, 460, '\ud83d\ude03', { fontFamily: 'Arial', fontSize: 96, fill: '#ff0000' });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

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

Класс Text в Phaser позволяет отображать любые строки, включая эмодзи. Вы можете просто вставить нужные символы прямо в строку текста.

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

this.add.text(0, 60, '😜🍩🏄🕹💖🧟', { fontFamily: 'Arial', fontSize: 96, fill: '#ff0000' });

В этом примере мы создаем текстовый объект в координатах (0, 60) и передаем ему строку, состоящую из последовательности эмодзи. Стиль текста задается объектом конфигурации, где fontFamily, fontSize и fill определяют внешний вид. Стоит отметить, что цвет заливки (fill) для большинства цветных эмодзи игнорируется браузером, так как они являются самостоятельными графическими символами.

Особенности рендеринга и цвета

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

this.add.text(0, 260, '🥪🤬🧠💩🤖👩‍💻', { fontFamily: 'Arial', fontSize: 96, fill: '#ff0000' });

Здесь мы создаем вторую строку эмодзи с таким же стилем. Обратите внимание, что, несмотря на указание красного цвета ('#ff0000'), эмодзи отобразятся в своих стандартных цветах. Свойство fill влияет только на те символы, которые браузер рисует с помощью шрифта (например, буквы). Для эмодзи, которые являются составными (например, 👩‍💻 — женщина-технолог), правильное отображение также зависит от поддержки последовательностей символов ZWJ (Zero Width Joiner) со стороны браузера.

Использование юникод-последовательностей

Иногда бывает необходимо вставить эмодзи не напрямую, а через его юникод-код. Это может быть полезно для динамической генерации строк или когда исходный код должен оставаться в кодировке ASCII.

Каждый эмодзи имеет свою юникод-последовательность. Например, смайлик 😃 соответствует последовательности \ud83d\ude03.

this.add.text(0, 460, '\ud83d\ude03', { fontFamily: 'Arial', fontSize: 96, fill: '#ff0000' });

В этом коде мы передаем в текстовый объект не сам символ, а его escape-последовательность в JavaScript. Браузер корректно интерпретирует эту последовательность и отображает эмодзи. Для поиска нужных юникод-кодов можно использовать специализированные ресурсы или таблицы символов. Такой подход дает больше контроля, особенно при работе с внешними данными или системами, где прямое использование многобайтовых символов невозможно.

Что попробовать дальше

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