Файли шрифтів

Шрифти використовуються для рендерингу тексту в компонентах (components) Label і текстових вузлах GUI. Defold підтримує кілька форматів файлів шрифтів:

• TrueType
• OpenType
• BMFont

Шрифти, додані до проєкту, автоматично перетворюються у формат текстури, який Defold може відображати. Доступні два способи рендерингу шрифтів, кожен із яких має свої переваги й недоліки:

• Растровий
• На основі поля відстаней

Шрифти з попереднім генеруванням або генеруванням під час виконання

За замовчуванням перетворення на растрові зображення гліфів відбувається під час збирання (заздалегідь). Недолік такого підходу полягає в тому, що на етапі збирання для кожного шрифту потрібно растеризувати всі можливі гліфи. У результаті можуть утворюватися дуже великі текстури, які займають пам’ять і збільшують розмір пакета.

Якщо використовувати «шрифти з генеруванням під час виконання» (runtime fonts), шрифти .ttf потраплятимуть до пакета без змін, а растеризація відбуватиметься за потреби під час виконання. Це мінімізує як використання пам’яті під час виконання, так і розмір пакета.

Підтримка компонування тексту (наприклад, справа наліво)

Шрифти з генеруванням під час виконання також мають перевагу повної підтримки компонування тексту, наприклад справа наліво. Наразі ми використовуємо бібліотеки HarfBuzz, SheenBidi, libunibreak і SkriBidi.

Див. Увімкнення генерування шрифтів під час виконання

Колекція шрифтів

Формат файлів .fontc також відомий як колекція шрифтів (font collection). У режимі попереднього генерування з нею пов’язано лише один шрифт. Якщо ви використовуєте генерування шрифтів під час виконання, з колекцією шрифтів можна пов’язати кілька файлів шрифтів (.ttf).

Це дає змогу використовувати колекцію шрифтів для рендерингу кількох текстів різними мовами й водночас зберігати низьке споживання пам’яті. Наприклад, можна завантажити колекцію з японським шрифтом, пов’язати цей шрифт із поточним основним шрифтом, а потім вивантажити колекцію японського шрифту.

Створення шрифту

Щоб створити шрифт для використання в Defold, створіть новий файл Font: виберіть у меню File ▸ New..., а потім Font. Також можна клацнути правою кнопкою миші в потрібному місці браузера Assets і вибрати New... ▸ Font.

Дайте новому файлу шрифту назву й натисніть Ok. Новий файл шрифту відкриється в редакторі.

Перетягніть шрифт, який хочете використовувати, у браузер Assets і розмістіть його в потрібному місці.

Укажіть файл шрифту у властивості Font і налаштуйте властивості шрифту відповідно до потреб.

Властивості

Font

Файл TTF, OTF або .fnt, який використовується для генерування даних шрифту.

Material

Матеріал, який використовується для рендерингу цього шрифту. Обов’язково змініть його для шрифтів на основі поля відстаней і BMFont (докладніше див. нижче).

Output Format

Тип даних шрифту, що генеруються.

• TYPE_BITMAP перетворює імпортований файл OTF або TTF на текстуру з набором гліфів шрифту, растрові дані якої використовуються для рендерингу текстових вузлів. Колірні канали кодують основну форму гліфа, обведення й тінь. Для файлів .fnt вихідна растрова текстура використовується без змін.
• TYPE_DISTANCE_FIELD Імпортований шрифт перетворюється на текстуру з набором гліфів шрифту, у якій дані пікселів представляють не екранні пікселі, а відстані до краю гліфів. Докладніше див. нижче.

Render Mode

Режим рендерингу гліфів.

• MODE_SINGLE_LAYER створює один чотирикутник для кожного символу.
• MODE_MULTI_LAYER створює окремі чотирикутники для форми гліфа, обведення й тіней відповідно. Шари відображаються від заднього до переднього, що запобігає перекриванню вже відображених символів, якщо ширина обведення більша за відстань між гліфами. Цей режим рендерингу також забезпечує правильне зміщення тіні відповідно до властивостей Shadow X/Y у ресурсі шрифту.

Size

Цільовий розмір гліфів у пікселях.

Antialias

Чи слід згладжувати шрифт під час його растеризації в цільове растрове зображення. Установіть 0, якщо потрібен рендеринг шрифту з точністю до пікселя.

Alpha

Прозорість гліфа. 0.0–1.0, де 0.0 означає повну прозорість, а 1.0 — непрозорість.

Outline Alpha

Прозорість згенерованого обведення. 0.0–1.0.

Outline Width

Ширина згенерованого обведення в пікселях. Установіть 0, щоб вимкнути обведення.

Shadow Alpha

Прозорість згенерованої тіні. 0.0–1.0.

Shadow Blur

Для растрових шрифтів це налаштування вказує кількість застосувань невеликого ядра розмиття до кожного гліфа шрифту. Для шрифтів на основі поля відстаней це налаштування дорівнює фактичній ширині розмиття в пікселях.

Shadow X/Y

Горизонтальне й вертикальне зміщення згенерованої тіні в пікселях. Це налаштування впливає на тінь гліфа лише тоді, коли Render Mode має значення MODE_MULTI_LAYER.

Characters

Символи, які потрібно включити до шрифту. За замовчуванням це поле містить друковані символи ASCII (коди символів 32–126). Ви можете додавати символи до цього поля або видаляти їх, щоб включити до шрифту більше чи менше символів.

Для шрифтів із генеруванням під час виконання цей текст використовується для попереднього заповнення кешу потрібними гліфами. Це відбувається під час завантаження. Див. font.prewarm_text().

All Chars

Якщо позначити цю властивість, до результату буде включено всі гліфи, наявні у вихідному файлі.

Cache Width/Height

Обмежує розмір растрового зображення кешу гліфів. Під час рендерингу тексту рушій шукає гліф у растровому зображенні кешу. Якщо його там немає, він буде доданий до кешу перед рендерингом. Якщо растрове зображення кешу замале, щоб умістити всі гліфи, які рушій має відобразити, повідомляється про помилку (ERROR:RENDER: Out of available cache cells! Consider increasing cache_width or cache_height for the font.).

Якщо встановлено 0, розмір кешу визначається автоматично й може збільшуватися щонайбільше до 2048x4096.

Шрифти на основі поля відстаней

Шрифти на основі поля відстаней зберігають у текстурі відстань до краю гліфа замість растрових даних. Коли рушій відображає шрифт, потрібен спеціальний шейдер, який інтерпретує дані відстаней і використовує їх для малювання гліфа. Шрифти на основі поля відстаней потребують більше ресурсів, ніж растрові, але забезпечують гнучкіше змінення розміру.

Під час створення шрифту обов’язково змініть властивість Material на builtins/fonts/font-df.material (або інший матеріал, здатний обробляти дані поля відстаней) — інакше під час виведення шрифту на екран використовуватиметься неправильний шейдер.

Растрові шрифти BMFont

Окрім згенерованих растрових зображень, Defold підтримує попередньо растеризовані шрифти у форматі «BMFont». Такі шрифти складаються з PNG-зображення з усіма гліфами. Крім того, файл .fnt містить інформацію про розташування кожного гліфа на зображенні, а також про його розмір і кернінг. (Зауважте, що Defold не підтримує XML-версію формату .fnt, яку використовують Phaser і деякі інші інструменти)

Такі шрифти не дають переваг у продуктивності порівняно з растровими шрифтами, згенерованими з файлів TrueType або OpenType, але можуть містити довільну графіку, забарвлення й тіні безпосередньо в зображенні.

Додайте згенеровані файли .fnt і .png до проєкту Defold. Ці файли мають бути в одній папці. Створіть новий файл шрифту й укажіть файл .fnt у властивості font. Переконайтеся, що output_format має значення TYPE_BITMAP. Defold не генеруватиме растрове зображення, а використає надане у файлі PNG.

Щоб шрифт відображався правильно, під час його створення не забудьте встановити для властивості матеріалу значення builtins/fonts/font-fnt.material.

Артефакти й рекомендовані підходи

Загалом растрові шрифти найкраще підходять для рендерингу без масштабування. Вони виводяться на екран швидше, ніж шрифти на основі поля відстаней.

Шрифти на основі поля відстаней дуже добре зберігають якість під час збільшення. Растрові шрифти є лише піксельними зображеннями, тому зі збільшенням шрифту збільшуються й пікселі, що призводить до появи артефактів у вигляді блоків. Нижче наведено приклад шрифту розміром 48 пікселів, збільшеного в 4 рази.

Під час зменшення GPU може якісно й ефективно зменшувати та згладжувати растрові текстури. Растровий шрифт краще зберігає колір, ніж шрифт на основі поля відстаней. Нижче наведено збільшений фрагмент того самого зразка шрифту розміром 48 пікселів, зменшеного до 1/5 розміру:

Шрифти на основі поля відстаней потрібно растеризувати в цільовому розмірі, достатньому для зберігання інформації про відстані, яка передає криві гліфів шрифту. Нижче показано той самий шрифт, але розміром 18 пікселів і збільшений у 10 разів. Видно, що цей розмір замалий для кодування форм цієї гарнітури:

Якщо вам не потрібна підтримка тіні або обведення, установіть відповідні значення альфа-каналу в нуль. Інакше дані тіні й обведення все одно генеруватимуться та займатимуть зайву пам’ять.

Кеш шрифту

Ресурс шрифту в Defold під час виконання утворює дві складові: текстуру й дані шрифту.

• Дані шрифту складаються зі списку записів гліфів, кожен із яких містить базову інформацію про кернінг і растрові дані відповідного гліфа.
• Усередині рушія текстура називається «текстура кешу гліфів» і використовується під час рендерингу тексту певним шрифтом.

Під час виконання, коли потрібно відобразити текст, рушій спочатку перебирає гліфи, які мають бути відображені, щоб перевірити їхню наявність у кеші текстури. Для кожного гліфа, якого немає в текстурі кешу гліфів, запускається завантаження в текстуру растрових даних, що зберігаються в даних шрифту.

Кожен гліф розміщується в кеші відповідно до базової лінії шрифту. Це дає змогу обчислювати в шейдері локальні текстурні координати гліфа всередині відповідної комірки кешу. Отже, ви можете динамічно створювати певні текстові ефекти, як-от градієнти чи накладання текстур. Рушій передає шейдеру параметри кешу через спеціальну константу шейдера texture_size_recip, компоненти вектора якої містять таку інформацію:

• texture_size_recip.x — обернена величина ширини кешу
• texture_size_recip.y — обернена величина висоти кешу
• texture_size_recip.z — відношення ширини комірки кешу до ширини кешу
• texture_size_recip.w — відношення висоти комірки кешу до висоти кешу

Наприклад, щоб згенерувати градієнт у фрагментному шейдері, достатньо написати:

float horizontal_gradient = fract(var_texcoord0.y / texture_size_recip.w);

Докладніше про uniform-змінні шейдерів див. у посібнику із шейдерів.

Увімкнення генерування шрифтів під час виконання

Для шрифтів типу SDF можна використовувати генерування під час виконання, якщо це шрифти TrueType (.ttf). Такий підхід може значно зменшити обсяг завантаження гри Defold і споживання пам’яті під час виконання. Невеликий недолік — асинхронний характер генерування кожного гліфа.

• Увімкніть цю можливість, установивши font.runtime_generation у game.project.

• Додайте маніфест застосунку і ввімкніть параметр Use full text layout system. Це збере власний рушій з увімкненою підтримкою цієї можливості.

Робота зі шрифтами зі скриптів

Попереднє заповнення кешу гліфів

Щоб спростити роботу зі шрифтами з генеруванням під час виконання, вони підтримують попереднє заповнення кешу гліфів. Це означає, що шрифт згенерує гліфи, перелічені у властивості Characters.

Якщо поле Characters файлу .fontc задано, його вміст використовується як текст, за яким визначаються гліфи, що потрібно оновити в кеші гліфів.

Також можна оновити кеш гліфів вручну, викликавши font.prewarm_text(font_collection, text, callback). Ця функція виконує зворотний виклик, щоб повідомити, коли всі відсутні гліфи додано до кешу гліфів і текст уже можна показувати на екрані.

Додавання шрифтів до колекції шрифтів і їх видалення

Для шрифтів із генеруванням під час виконання можна додавати шрифти (.ttf) до колекції шрифтів або видаляти їх із неї. Це корисно, коли великий шрифт розділено на кілька файлів для різних наборів символів (наприклад, CJK)

function init(self)
    -- Get the target font collection.
    self.font_collection = go.get("#label", "font")

    -- Get the first font assigned to the selected language collection.
    local language_collection = go.get("localization_japanese#label", "font")
    local font_info = font.get_info(language_collection)
    self.language_ttf_hash = font_info.fonts[1].path_hash

    -- Associate it with the target collection and increase its reference count.
    font.add_font(self.font_collection, self.language_ttf_hash)
end

function final(self)
    -- Remove the association and release the font reference.
    font.remove_font(self.font_collection, self.language_ttf_hash)
end

Попередня підготовка гліфів

Щоб правильно показати текст шрифтом із генеруванням під час виконання, потрібно підготувати гліфи. Функція font.prewarm_text() робить це за вас. Це асинхронна операція. Після її завершення та отримання зворотного виклику можна переходити до показу будь-якого повідомлення, що містить ці гліфи.

font.prewarm_text(self.font_collection, info.text, function (self, request_id, result, err)
    if result then
      print("PREWARMING OK!")
      label.set_text(self.label, info.text)
    else
      print("Error prewarming text:", err)
    end
  end)