Текстова мітка

Компонент (component) Label (текстова мітка) відображає фрагмент тексту на екрані в ігровому просторі. За замовчуванням він сортується й відмальовується разом з усією графікою спрайтів і плиток. Компонент має набір властивостей, які визначають спосіб відображення тексту. GUI в Defold підтримує текст, але розміщувати елементи GUI в ігровому світі буває складно. Текстові мітки спрощують це завдання.

Створення текстової мітки

Щоб створити компонент Label, клацніть правою кнопкою миші на ігровому об’єкті (game object) і виберіть Add Component ▸ Label.

(Якщо ви хочете створити кілька екземплярів (instance) міток за одним шаблоном, можна натомість створити новий файл компонента Label: клацніть правою кнопкою миші на папці в браузері Assets і виберіть New... ▸ Label, а потім додайте цей файл як компонент до будь-яких ігрових об’єктів)

У властивості Font вкажіть потрібний шрифт і обов’язково встановіть для властивості Material матеріал, що відповідає типу шрифту:

Векторні шрифти й кольорові емодзі

Щоб використати шрифт Vector, виконайте налаштування векторного шрифту, призначте ресурс .font властивості Font компонента Label і задайте його Material як /builtins/fonts/label-vector.material. Керуйте розміром відображення через Font Size.

Для кольорових емодзі також виконайте налаштування резервного COLRv1-шрифту й пакування. Приклад нижче передбачає Label з ідентифікатором label і скрипт на тому самому ігровому об’єкті. Залиште Text компонента Label порожнім, щоб показати привітання лише після підготовки його гліфів:

function init(self)
    local text = "Hello 😀 🍎 🚀"
    local font_resource = go.get("#label", "font")
    -- Add the fallback once for this shared font resource.
    font.add_font(font_resource, "/fonts/NotoColorEmoji-Regular.ttf")
    font.prewarm_text(font_resource, text, function(self, request_id, result, err)
        if result then
            go.set("#label", "text", text)
        else
            print("Could not prepare label text:", err)
        end
    end)
end

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

Властивості текстової мітки

Окрім властивостей Id, Position, Rotation і Scale, компонент має такі специфічні властивості:

Text

Текстовий вміст мітки.

Size

Розмір обмежувальної рамки тексту. Якщо ввімкнено Line Break, ширина визначає місце перенесення тексту на новий рядок.

Color

Колір тексту.

Outline

Колір контуру.

Shadow

Колір тіні.

Leading

Коефіцієнт масштабування міжрядкового інтервалу. Значення 0 усуває міжрядковий інтервал. За замовчуванням — 1.

Tracking

Коефіцієнт масштабування міжлітерного інтервалу. За замовчуванням — 0.

Pivot

Опорна точка тексту. Використовуйте її для змінення вирівнювання тексту (див. нижче).

Blend Mode

Режим змішування, який використовується під час рендерингу мітки.

Line Break

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

Font

Ресурс шрифту для цієї мітки.

Material

Матеріал для рендерингу цього напису. Виберіть матеріал, що відповідає режиму або джерелу шрифту (Bitmap, SDF, Vector або BMFont). Відповідні вбудовані матеріали Label див. у розділі Матеріали шрифтів.

Режими змішування

Властивість Blend Mode визначає, як графіка компонента (component) змішується з графікою позаду нього. Доступні такі режими змішування з відповідними формулами:

Alpha

Звичайне змішування: src.a * src.rgb + (1 - src.a) * dst.rgb

Add

Освітлює тло значеннями кольорів відповідних пікселів компонента: src.rgb + dst.rgb

Multiply

Затемнює тло значеннями відповідних пікселів компонента: src.rgb * dst.rgb

Screen

Протилежність Multiply. Освітлює тло та значення відповідних пікселів компонента: src.rgb - dst.rgb * dst.rgb

Опорна точка й вирівнювання

Налаштувавши властивість Pivot, ви можете змінити режим вирівнювання тексту.

По центру

Якщо для опорної точки встановлено значення Center, North або South, текст вирівнюється по центру.

По лівому краю

Якщо для опорної точки встановлено будь-який із режимів West, текст вирівнюється по лівому краю.

По правому краю

Якщо для опорної точки встановлено будь-який із режимів East, текст вирівнюється по правому краю.

Керування під час виконання

Ви можете керувати мітками під час виконання, отримуючи й установлюючи текст мітки та різні інші властивості.

text

Текстовий вміст напису (string). Доступний через go.get() і go.set().

color

Колір мітки (vector4)

outline

Колір контуру мітки (vector4)

shadow

Колір тіні мітки (vector4)

scale

Масштаб мітки: number для рівномірного масштабування або vector3 для окремого масштабування вздовж кожної осі.

size

Розмір мітки (vector3)

function init(self)
    -- Set the text of the "my_label" component in the same game object
    -- as this script.
    go.set("#my_label", "text", "New text")
    local text = go.get("#my_label", "text")
    print(text) -- New text
end

function init(self)
    -- Set the color of the "my_label" component in the same game object
    -- as this script. Color is a RGBA value stored in a vector4.
    local grey = vmath.vector4(0.5, 0.5, 0.5, 1.0)
    go.set("#my_label", "color", grey)

    -- ...and remove the outline, by setting its alpha to 0...
    go.set("#my_label", "outline.w", 0)

    -- ...and scale it x2 along x axis.
    local scale_x = go.get("#my_label", "scale.x")
    go.set("#my_label", "scale.x", scale_x * 2)
end

Налаштування проєкту

Файл game.project містить кілька налаштувань проєкту, пов’язаних із текстовими мітками.