Unity 6.3
0 онлайн 101 гостей 3 в системе
Вход
← UI системы Шаг 265 из 317

Начало работы с текстом

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

В этом примере показано, как оформлять текст в UI Builder, создавать и применять статические и динамические шрифтовые ассеты, использовать теги форматированного текста и собственные таблицы стилей, а также создавать ассет UITK Text Settings для управления настройками текста на панели.

Примечание: Для демонстрационных целей в этом руководстве используется режим выполнения UI. Инструкции по созданию шрифта и таблицы стилей также применимы к Редактору UI. Однако в текущем выпуске нельзя изменить текстовые настройки по умолчанию UITK для Редактора UI.

Предварительные условия

Это руководство предназначено для разработчиков, знакомых со скриптами Unity Editor, UI Toolkit и C#. Перед началом работы ознакомьтесь со следующим:

Создание ассета UITK Текстовые настройки

Начните с исполнения UI и создайте ресурс UITK Text Settings, который управляет текстовыми параметрами панели. Также создайте папку Resources и подпапки для хранения ресурсов шрифта и пользовательских таблиц стилей.

  1. Следуйте шагам в Начало работы с Runtime UI для создания простой среды выполнения UI.
  2. В папке Assets создайте папку Resources.
  3. Щелкните правой кнопкой мыши в папке Assets\UI Toolkit и выберите Создать > UI Toolkit > Текстовые настройки для создания UITK Text Settings.asset. В окне Inspector для UITK Text Settings.asset показаны имена путей по умолчанию для ассета шрифта, ассета таблиц стилей текста, ассета Sprite и предустановок Градиента цвета.
  4. В папке Resources создайте две папки Fonts & Materials и Text Style Sheets.

Стиль текста с UI Builder

Используйте UI Builder для стилизации текста Toggle жирным и курсивом, с размером шрифта 12px. Дополнительные сведения см. в Стиль текста с USS.

  1. Дважды щелкните SimpleRuntimeUi.uxml, чтобы открыть его в UI Builder.
  2. В окне Inspector для управления Toggle выберите Текст.
  3. В поле Font Style выберите B и I.
  4. В поле Размер введите 12.

Создание статического шрифтового ассета

Создать static font asset и примените его к элементу Button. Для статического шрифтового ассета включать исходный файл шрифта в сборку не нужно, но необходимо сформировать атлас для всех символов отображаемого текста кнопки. Отображаемый текст — This is a Button и вы добавите * в тексте, так что вы генерируете атлас для TBhinostua*.

  1. Скачать пакет шрифтов Lato из Google Fonts.

  2. Распакуйте файл пакета шрифтов и поместите Lato-Regula.ttf в папку Assets вашего проекта.

  3. В окне Inspector для файла шрифта подтвердите следующее:

    • Включить данные шрифтов включено.
    • Символ установлен на Динамический.

  4. В окне Project щелкните правой кнопкой мыши Lato-Regula.ttf и выберите Создать > Текстовое ядро > Шрифтовый ресурс > SDF. Это создаст динамический шрифтовый ресурс под названием Lato-Regula SDF.asset.

  5. В окне Inspector для Lato-Regula SDF.assetустановите Atlas Population Mode на Статическое.

  6. Нажмите Обновить текстуру Атласа.

  7. В течение Создатель ассетов шрифтов окно, из Набор символов список, выбрать Пользовательские символы.

  8. В течение Список пользовательских символов поле, введите TBhinostua*.

  9. Нажмите Создать Атлас Шрифтов.

  10. Сохраните изменения.

  11. Поместите Lato-Regula SDF.asset в папку Assets\Resources\Fonts & Materials.

  12. Дважды щелкните SimpleRuntimeUi.uxml, чтобы открыть его в UI Builder.

  13. В окне Inspector для управления Button выберите Текст > Font Asset > Lato-Regula SDF.

Создание ассета динамического шрифта

Создать динамический шрифт и применять его к TextField control. Для ассета динамического шрифта необходимо включить исходный файл шрифта в сборку. Импортируйте исходный файл шрифта непосредственно в путь, установленный для шрифта.

  1. Скачать пакет шрифтов Roboto из Google Fonts.

  2. Распакуйте файл пакета шрифтов и поместите Roboto-Regular.ttf в папку Assets\Resources\Fonts & Materials вашего проекта.

  3. В окне Inspector для файла шрифта подтвердите следующее:

    • Включить данные шрифта включено
    • Символ установлен на Динамический

  4. Щелкните правой кнопкой мыши Roboto-Regular.ttf и выберите Создать > Текстовое ядро > Шрифтовый ресурс > SDF. Это создает динамический шрифтовый ресурс под названием Roboto-Regular SDF.asset.

  5. Дважды щелкните SimpleRuntimeUi.uxml, чтобы открыть его в UI Builder.

  6. В течение TextField контроля Inspector окно, выбрать Текст > Шрифт > Робото-Регуляр SDF.

Стиль с богатыми текстовыми тегами

Используйте теги rich text и для стилизации текста в управлении Метка.

Примечание: В текущем выпуске, богатые текстовые теги не поддерживаются для TextField.

  1. Дважды щелкните SimpleRuntimeUi.uxml, чтобы открыть его в UI Builder.
  2. В панели Inspector для элемента управления Метка измените Текст на This is a <font-weight=700><size=2em><color=#FF0000>*Label*</color></size></font-weight>. Это сделает слово Label большим, красным, жирным и с звездочкой по обе стороны.
  3. Убедитесь, что выбрана опция Enable Rich Text.

Текст метки в окне Viewport выглядит следующим образом:

Предварительный просмотр текста метки показывает слово Метка большим, красным и со звездочкой по обе стороны.
Предварительный просмотр текста метки показывает слово «Метка» большим, красным и со звездочкой по обе стороны.

Стиль с таблицами стилей

Чтобы применить один и тот же стиль для Label до Button, создать пользовательские таблицы стилей, и применить стиль к обоим словам.

  1. Щелкните правой кнопкой мыши папку Assets\Resources\Text Style Sheets и выберите Создать > Текстовое Ядро > Текст StyleSheet. Это создаст Text StyleSheet.asset в пути, который вы установили в ассете UITK Текстовые Настройки.

  2. В окне Inspector для Text StyleSheet.assetвыполните следующие действия:

    • В поле Имявведите ExampleStyle.
    • В Открывающие меткивведите <font-weight=700><size=2em><color=#FF0000>*.
    • В Закрывающие меткивведите *</color></size></font-weight>.

  3. В окне Inspector для UITK Text Settings.assetиз списка Таблица стилей по умолчанию выберите Текст StyleSheet.

  4. Дважды щелкните SimpleRuntimeUi.uxml, чтобы открыть его в UI Builder.

  5. В окне Inspector управления Метка измените Текст на <s>This is a <style="ExampleStyle">Label</style>.

  6. Убедитесь, что выбрана опция Enable Rich Text.

  7. В окне Inspector управления Кнопка измените Текст на <s>This is a <style="ExampleStyle">Button</style>.

  8. Убедитесь, что выбрана опция Enable Rich Text.

  9. Перейти в режим воспроизведения и проверить текст в runtime UI.

  10. В текстовом поле введите несколько произвольных символов. Для динамических шрифтов атлас шрифтов генерируется динамически по мере ввода текста в текстовое поле.

  11. В папке проекта Assets\Resources\Fonts & Materials выберите Roboto-Regular SDF.asset.

  12. В окне Inspector для Roboto-Regular SDF.assetвыберите Обновить текстуру атласа, чтобы открыть окно Создатель шрифта. Если окно атласа скрыто, разверните его. Вы должны увидеть символы, которые вы ввели в окне атласа.

Вновь введенные символы появляются в окне атласа шрифтов.
Вновь введенные символы появляются в окне атласа шрифтов.

Дополнительные ресурсы

← Предыдущий шагРабота с текстом