Текст

Текст

UI Toolkit использует TextCore - технологию рендеринга шрифтов, первоначально созданную на основе TextMesh Pro, который применяется в прежней системе интерфейса Unity UI. TextCore предоставляет расширенные возможности оформления и чётко отображает текст при разных кеглях и разрешениях. Технология использует шрифты на основе знакового поля расстояний Signed Distance Field (SDF), поэтому ресурсы шрифтов сохраняют резкость при преобразовании и увеличении. Подробнее о режимах рендеринга TextCore см. в документации.

Теперь рассмотрим типы ресурсов шрифтов и их назначение.

Исходный файл шрифта Наиболее распространённые форматы шрифтов, TTF и OTF, необходимо преобразовать в ресурсы шрифтов, прежде чем использовать их в проекте Unity. Ресурс шрифта - это специальный ресурс Unity, содержащий данные для отображения шрифта: глифы символов, метрики и параметры рендеринга, включая размер, насыщенность и начертание. Для импортированного исходного файла отображаются сведения о каждом семействе шрифтов и доступных вариантах рендеринга.

Многие из этих параметров импорта остались от прежней текстовой системы Unity UI и будут удалены в будущих выпусках. Параметры Rendering Mode, Character и Include Font Data используются при создании ресурса шрифта.

Чтобы создать соответствующий ресурс шрифта, выберите исходный файл шрифта, щёлкните правой кнопкой мыши в окне Assets и выберите Create > Text Core > Font Asset > SDF, если SDF - предпочтительный режим рендеринга.

В разных системах интерфейса используются разные ресурсы шрифтов.

Параметры ресурса шрифта После преобразования исходного файла выберите ресурс шрифта. В Inspector отобразятся все параметры, позволяющие полностью управлять созданием шрифта. Рассмотрим основные из них; дополнительные сведения о ресурсах шрифтов приведены в документации:

- Face Info: параметры интервалов и масштаба шрифта. С их помощью можно скорректировать исходный шрифт, если стандартные значения не подходят приложению.

- Generation Settings: основные параметры, включая исходный шрифт, начертание для ресурса шрифта, если исходный файл содержит несколько начертаний, режим заполнения атласа и режимы рендеринга. - Atlas and Material: созданные материал и текстура; тип атласа - статический или динамический; режим рендеринга - растровый или SDF. Здесь также можно управлять размером создаваемого атласа, что особенно важно для языков с большими наборами символов.

- Font Weights: имитация разных вариантов насыщенности, если их нет в исходном ресурсе шрифта. - Fallback Font Asset: резервный шрифт для символов или глифов, отсутствующих в текущем ресурсе шрифта. - Character and Glyph Tables: подробный список всех символов и глифов, включённых в ресурс шрифта. - Ligature table: добавление глифа, который используется для сочетания двух символов и улучшает читаемость и зрительную плавность текста. - Glyph Adjustments: переопределения для отдельных символов или глифов.

Исходные шрифты и атласы могут увеличивать размер сборки: слева показан атлас с символами ASCII, справа - атлас с полным набором символов Unicode.

Если выбрать ресурс шрифта, в верхней части Inspector под кнопкой Update Atlas Texture будет доступен Font Asset Creator. Он позволяет полностью управлять заполнением атласа и его свойствами.

Совет: поля и разрешение атласа Между символами в текстуре шрифта необходимо оставить поля заданного размера в пикселях, чтобы каждый символ можно было отрисовывать отдельно. Поля также создают пространство для градиента SDF. Чем они шире, тем плавнее переход, что позволяет получать качественное изображение и применять эффекты вроде толстой обводки.

Если используются только символы ASCII, для большинства шрифтов достаточно атласа 512 x 512 с полем 5 пикселей. Для шрифтов с большим числом символов может потребоваться более высокое разрешение или несколько атласов. Как правило, размер поля должен составлять примерно одну десятую размера выборки.

Вариант ресурса шрифта Чтобы изменить метрики шрифта без создания нового атласа, выберите Create > Text Core > Font Asset Variant. Такой вариант может содержать альтернативные метрики строк. Он хранит собственные параметры Face Info - например, высоту строки и положение нижнего индекса, - но по-прежнему ссылается на исходный атлас. Благодаря этому вариант может иметь оформление, отличное от исходного ресурса шрифта, не занимая дополнительное место под текстуры.

Форматированный текст Теги форматированного текста изменяют вид и компоновку текста с помощью дополнительных тегов в текстовом поле. Их можно использовать для визуальных элементов как в коде, так и в UI Builder. Теги позволяют форматировать текст во время выполнения - например, менять оформление имени пользователя.

С их помощью можно изменять цвет или выравнивание текста, не меняя свойства и стили элемента. Применяйте их для оформления диалогов или визуального акцента на важных сообщениях. Чтобы включить форматированный текст в UI Builder, откройте Extra Settings. После этого текст вместе с тегами будет отображаться правильно. Например, текст между тегами <b> и </b> станет полужирным.

Включите поддержку тегов форматированного текста в UI Builder, чтобы они изменяли визуальное оформление текста.

Полный список доступных тегов форматированного текста и их параметров приведён по ссылке.

Градиенты Градиенты помогают оформить интерфейс. В UI Toolkit их можно применять с помощью тега <gradient>. Чтобы создать простой градиент, выполните следующие действия:

1. Создайте ресурс цветового градиента командой Create > Text Core > Gradient Color. Поместите файл в папку Assets/Resources или в любую её вложенную папку.

2. Создайте ресурс Text Settings, на который будет ссылаться Panel Settings. В ресурсе найдите параметр Color Gradient Presets и укажите папку или вложенную папку внутри Resources, где находится градиент. 3. Добавьте в UI Builder следующие теги форматированного текста: <color=white><gradient="testColorGradient">Gradient Test<∕gradient><∕color>. 4. Тег color возвращает белый цвет шрифта, чтобы градиент выглядел правильно. Имя в теге gradient должно совпадать с именем ресурса, созданного на шаге 1. Убедитесь, что параметр Rich Text включён. 5. Результат можно увидеть непосредственно в UI Builder или в окне Game.

Ресурсы спрайтов и эмодзи С помощью тегов форматированного текста в текст можно добавлять спрайты, например эмодзи. Для этого понадобится ресурс Sprite Asset, аналогичный ресурсу градиента. Если импортируется несколько спрайтов, объедините их в один атлас, чтобы сократить число вызовов отрисовки. Убедитесь, что разрешение атласа спрайтов подходит для целевой платформы. Подробнее о разрешении спрайтов см. в разделе подготовки графики.

Распространённый сценарий применения Sprite Asset - добавление эмодзи и значков непосредственно в текстовые строки.

Чтобы импортировать спрайты для этой цели, выполните следующие действия:

1. Импортируйте файл спрайта или PSD с эмодзи либо значками. 2. Разделите изображение на отдельные спрайты. Если используется PSD-файл, описанный в разделе подготовки графических ресурсов и шрифтов, выполнять разрезание не нужно. Создайте Sprite Asset из файла: выберите его, затем воспользуйтесь командой Create > Text Core > Sprite Asset. Поместите ресурс в Assets/Resources или вложенную папку. 3. В новом Sprite Asset можно изменить Face Info, а также внешний вид и имена каждого «глифа». Эти параметры заменяют стандартные Face Settings из ресурса шрифта.

Примечание: в данном случае команда Update Sprite Asset синхронизирует Sprite Asset с последними изменениями в Sprite Editor.

Чтобы использовать этот ресурс в UI Toolkit, выполните те же действия, что и для градиентов:

1. Выберите Panel Settings в UI Document.

2. Откройте ресурс Text Settings или создайте его, если он отсутствует. 3. В файле Text Settings с помощью окна выбора файла укажите Sprite Asset. Сохраните изменения и войдите в режим Play, чтобы новые параметры вступили в силу.

4. Добавьте спрайт с помощью тега форматированного текста: <sprite index=0> или <sprite name="name">. Встроенный спрайт также учитывает остальные текстовые теги.

Добавление Sprite Asset в текстовое поле UI Toolkit с помощью тегов форматированного текста. Убедитесь, что флажок Enable Rich Text установлен (вверху).

Совет: использование эмодзи операционной системы Если приложение предназначено для конкретной платформы, например iOS или Android, вместо включения исходного шрифта в проект можно использовать встроенный системный шрифт эмодзи. Это экономит память и избавляет от необходимости поставлять с приложением большую коллекцию эмодзи. Такие шрифты также часто хорошо подходят для списка Global Fallbacks в Text Settings.

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

1. Создайте ресурс шрифта на основе шрифта целевой системы. В iOS он называется Apple Emoji и используется в этом примере, а в Android - Noto Color Emoji; в настоящее время поддерживается только COLRv0. Выберите для Font Asset тип Color, затем установите режим заполнения атласа Dynamic OS. Он не требует включать исходный шрифт в ресурс и тем самым экономит место.

2. В Font Asset установите флажок Clean Dynamic Data On Build. 3. В UI Builder включите Parse Escape Sequences и введите нужные эмодзи с помощью панели эмодзи macOS или Windows либо в формате UTF. Например, улыбающееся лицо можно задать как \U0001F601. Код UTF каждого эмодзи можно посмотреть в Character Table ресурса шрифта. 4. Сборка, запущенная в macOS, отображает эмодзи с помощью системного шрифта.

5. В нашем тесте размер сборки оказался меньше размера отдельного шрифта эмодзи. Это подтверждает, что шрифт не был включён в проект, хотя применялся для отображения соответствующих эмодзи.

Таблицы стилей текста Если в приложении много текста, для управления его оформлением стоит создать таблицу стилей текста. Она позволяет определять пользовательские стили, применяемые тегом форматированного текста <style>. Создать таблицу можно командой Assets > Text Core > Text Stylesheet в меню Create.

Повторно используемая таблица стилей текста

Таблицы стилей текста обладают следующими преимуществами:

- Пользовательский стиль может содержать открывающие и закрывающие теги форматированного текста, а также текст до и после них. - Таблицу стилей текста удобно обновлять - намного удобнее, чем изменять форматирование непосредственно в тексте. - Пользовательские стили сокращают число тегов форматирования. Достаточно одного тега <style=name>, который применяет всё необходимое оформление. - Один тег форматированного текста проще изменить в таблице стилей, и вероятность ошибки ниже, чем при ручном редактировании множества тегов <style>.