Текст
Содержание
UI Toolkit использования TextCore, технология отображения шрифтов, первоначально основанная на TextMesh Про (используемая унаследованным UI система, uGUI (Unity UI)). TextCore предлагает расширенные возможности стилизации и может чисто отображать текст в различных размерах точек и разрешениях. Поле расстояния с знаком (SDF) шрифт рендеринг, который может генерировать шрифт ассеты, которые выглядят остро даже при преобразовании и увеличении. Вы можете получить подробности различных режимов рендеринга для TextCore в 2000 году документация.
Давайте посмотрим на различные типы шрифта ассетов и для чего они используются.
Файл исходного шрифта
Наиболее распространенные форматы шрифтов, TTF и OTF файлы, необходимо преобразовать в активы шрифтов прежде чем они могут быть использованы в вашем Unity проекта. Шрифтовой ассет — это Unity-специфический ресурс, который содержит данные, необходимые для отображения шрифта, включая символьные глифы, метрики шрифта и конфигурации отображения, такие как размер, толщина и стиль. Импортированный исходный файл показывает информацию о каждом семействе шрифтов и их параметрах отображения.
Чтобы создать соответствующие шрифтовые ассеты, выберите исходный файл шрифта, а затем щелкните правой кнопкой мыши меню Assets и создайте через Create > Text Core > Font Asset > SDF (если SDF является вашим предпочтительным режимом отображения).
Настройки шрифта
После того, как вы преобразовали исходный файл шрифта, выберите шрифт ассета, и вы найдете все опции, чтобы дать вам полный контроль над шрифт генерации. Давайте посмотрим на некоторые ключевые опции здесь (прочитать больше о шрифт ассетов в документации):
Сведения о начертании: Параметры промежутков и масштабирования для вашего шрифта, чтобы настроить параметры, которые могут лучше подойти для вашего приложения, если стандартный исходный шрифт требует изменений
Настройки генерации: Основная конфигурация, включая исходный шрифт, шрифт, который будет использоваться для шрифта в случае, если исходный шрифт включает несколько стилей, режим населения атласа, а также режимы отображения
Атлас и материал: Сформированные материал и текстура; статический атлас или динамический; режим отрисовки — растровый или SDF; управление размером формируемого атласа для поддержки языков с большими наборами символов
Начертания шрифта: Симулирует различные веса шрифтов, когда исходный ресурс не имеет таких вариаций
Fallback Font Asset: Обеспечивает резервный шрифт в случаях, когда в текущем ассете Font отсутствует символ или глиф
Таблицы символов и глифов: Подробный список всех символов и глифов, включенных в шрифт
Таблица лигатур: Для добавления глифа, используемого, когда два символа находятся вместе (улучшает читаемость и визуальный поток)
Настройки глифов: Определяет переопределения для каждого символа или глифов
В верхней части Inspector, при выборе шрифта, вы найдете Font Asset Creator под кнопкой Обновить текстуру Атласа. Она дает вам полный контроль для заполнения и определения свойств атласа.
💡 Совет: Заполнение и разрешение атласа
Персонажи в сериале Текстура шрифта между ними необходимо небольшое промежуточное пространство (указанное в пикселях), чтобы они могли быть отображены отдельно. SDF Градиент. Чем он больше, тем плавнее переход, что позволяет получить высококачественное рендеринг и эффекты, такие как толстые контуры.
Если вы используете только символы ASCII, то разрешение атласа 512 x 512 с заполнением 5 будет достаточным для большинства шрифтов. Шрифты с большим количеством символов могут нуждаться в более высоком разрешении или нескольких атласах. Как общее правило, стремитесь к тому, чтобы размер заполнения был в соотношении 1:10 с размером выборки.
Вариант шрифта
Чтобы внести изменения без использования нового атласа шрифтов, создайте вариант шрифта с помощью Create > Text Core > Font Asset Variant. Этот вариант может содержать альтернативную версию метрики строки шрифта.
Вариант сохраняет свои собственные настройки Информация о лице – например, высоту строки и положение нижнего индекса – но по-прежнему ссылается на оригинальный атлас. Таким образом, он может иметь свой собственный стиль, отличающийся от оригинального элемента Font, не потребляя дополнительного пространства для текстур.
Богатый текст
Богатые текстовые теги изменяют внешний вид и расположение текста путем использования дополнительных тегов в текстовом поле. Вы можете использовать богатые текстовые теги с обоими визуальными элементами в коде UI Builder. Теги позволяют форматировать текст во время выполнения, например, для настройки внешнего вида имени пользователя.
Богатые текстовые теги могут изменять цвет или выравнивание текста без изменения его свойств или стиля. Используйте их для форматирования текста в диалоговой системе или визуально подчеркнуть то, что вы хотите передать.
Перейдите в Дополнительные настройки, чтобы включить функцию богатого текста в UI Builder. Таким образом, ваш текст (включая теги) будет форматироваться соответствующим образом. Например, текст между <b> и закрывающим теги </b> будет показываться жирным шрифтом.
Ознакомьтесь с полным списком доступных богатых текстовых тегов и параметров.
Градиенты
Градиенты добавляют оформление по всему интерфейсу; в UI Toolkit их применяют через <gradient> Следуйте этим шагам, чтобы создать простой градиент:
Создание градиентного цвета через Создать > Текстовое ядро > Цвет градиента. Убедитесь, что вы помещаете этот файл внутрь Активы/ресурсы или любой подпапки в разделе Ресурсы.
Создайте ресурс Text Settings, на который будут ссылаться Panel Settings. В этом ресурсе найдите Color Gradient Presets и укажите папку или вложенную папку в Resources, где находится ресурс.
Добавьте следующие богатые текстовые теги внутрь UI Builder:
<color=white><gradient="testColorGradient">Gradient Test</gradient></color>.Тег цвета восстанавливает цвет шрифта на белый, чтобы градиент выглядел как предполагается, в то время как указанный градиент должен соответствовать имени ассета, созданного на шаге 1. Убедитесь, что включена опция Rich Text.
Вы можете увидеть, как изменения вступают в силу внутри UI Builder или в представлении Game.
Спрайт ассет и эмоции
Вы можете включить спрайты, как эмоции в тексте с помощью богатых текстовых тегов. Чтобы использовать их, вам нужно использовать Актив Sprite похоже на ассет Градиент.
При импорте нескольких спрайтов, упаковывайте их в один атлас, чтобы уменьшить вызов рисования. Убедитесь, что атлас спрайтов имеет соответствующее разрешение для вашей целевой платформы. Возвращайтесь к разделу подготовки ассетов, чтобы узнать больше о разрешении спрайтов.
Чтобы импортировать спрайты для этой цели, выполните следующие действия:
Импортировать sprite или PSD файл, который содержит эмоции или иконки
Разделите изображение на несколько спрайтов. Если используется PSD-файл, как описано в разделе «Подготовка графических ресурсов и шрифтов», выполнять разделение не потребуется. Создайте из файла Sprite Asset: выберите файл, затем используйте меню Create > Text Core > Sprite Asset. Убедитесь, что ресурс находится в каталоге Assets/Resources или одной из его вложенных папок.
Вы можете настроить Face Info и настроить внешний вид/названия каждого «глифа» в этом новом Sprite ассете. Любые изменения здесь заменят стандартные Face Settings из ассета Font.
Примечание: В этом контексте Update Sprite Asset синхронизирует ассет Sprite с последними изменениями Редактора Sprite.
Чтобы использовать этот ресурс с UI Toolkit, необходимо выполнить тот же шаг, что и с градиентами:
Выберите Панель Настройки из UI Документа.
Откройте ресурс Text Settings (или создайте его, если его нет).
Ссылка на Актив Sprite с помощью браузера файлов в файле Text Settings. Сохраните и перейдите в режим Play, чтобы обновленные настройки вступили в силу.
Используйте богатый текстовый тег (<sprite index=0> или <sprite name="name">) для добавления спрайта. Встроенный спрайт будет учитывать другие текстовые теги.
💡 Совет: Использование эмоджи из OS
Если вы работаете с конкретной платформой runtime, например, iOS или Android, вы можете использовать встроенный в систему шрифт эмоджи вместо включения исходного шрифта в проект. Это может сэкономить память и устранить необходимость пакета большого количества эмоджи с вашим приложением. Они также часто отлично подходят для глобальных резервных вариантов в текстовых настройках.
Вот шаги для использования OS эмоджи в вашем проекте:
- Создайте Font asset из шрифта, используемого вашей целевой системой. На iOS шрифт называется Apple Emoji (используется в этом примере), а на Android он называется Noto Color Emoji (в настоящее время поддерживается только COLRv0). Убедитесь, что Font Asset является типа Цвет, а затем установите atlas population mode на Dynamic OS, который не требует от вас включения исходного шрифта в ваш asset, экономя место.
- Убедитесь, что Чистые динамические данные при сборке отмечены на Font Asset.
- Включите Parse Escape Sequences на UI Builder и введите желаемые эмодзи с помощью клавиатуры эмоджи из MacOS или Windows или в формате UTF, например, вы введете смайлик как U0001F601. Вы можете проверить UTF каждого эмодзи в Таблице Символов Шрифта.
- Сборка, запущенная на MacOS, отображает эмоции в соответствии с шрифтом OS.
- Мы можем заметить, что в нашем тесте, размер сборки меньше, чем автономный шрифт эмоджи, доказывая, что он не был включен в проект, но все еще используется для отображения соответствующих эмоджи.
Текстовые таблицы стилей
Если в вашем приложении используется значительное количество текста, вы можете рассмотреть возможность создания таблица стилей текста Это позволяет вам создавать собственные стили текста с помощью <style> Вы можете сделать это из меню Создать с помощью Средства > Текстовое ядро > Текстовая таблица стилей.
Рассмотрим следующие преимущества текстовых таблиц стилей:
Настраиваемый стиль может включать в себя открывающие и закрывающие текстовые теги, а также текст в начале и конце.
Вы можете удобно обновить таблицу стилей текста, особенно по сравнению с непосредственным изменением форматирования текста.
Пользовательские стили могут уменьшить количество богатых текстовых тегов. Вы можете использовать только один тег,
<style= name>, который применяет все необходимые стили.Это облегчает изменение одного тега Rich Text в текстовой таблице стилей и менее подвержено ошибкам, чем ручное изменение нескольких тегов
<style>.