Beschriftung

Eine Beschriftungskomponente (Label component) rendert ein Stück Text im Spielraum auf dem Bildschirm. Standardmäßig wird sie zusammen mit allen Sprite- und Kachelgrafiken sortiert und gezeichnet. Die Komponente verfügt über eine Reihe von Eigenschaften, die bestimmen, wie der Text gerendert wird. Die GUI von Defold unterstützt Text, doch es kann schwierig sein, GUI-Elemente in der Spielwelt zu platzieren. Beschriftungen erleichtern dies.

Eine Beschriftung erstellen

Um eine Beschriftungskomponente zu erstellen, klicke mit der rechten Maustaste auf das Spielobjekt (game object) und wähle Add Component ▸ Label.

(Wenn du mehrere Beschriftungen aus derselben Vorlage instanziieren möchtest, kannst du alternativ eine neue Datei für eine Beschriftungskomponente erstellen: Klicke mit der rechten Maustaste auf einen Ordner im Browser Assets und wähle New... ▸ Label. Füge die Datei anschließend als Komponente zu beliebigen Spielobjekten hinzu.)

Setze die Eigenschaft Font auf die Schriftart, die du verwenden möchtest, und stelle sicher, dass die Eigenschaft Material auf ein Material gesetzt ist, das zum Schrifttyp passt:

Vektorschriftarten und farbige Emojis

Folge für eine Vektorschriftart der Einrichtung für Vektorschriftarten, weise die .font-Ressource der Eigenschaft Font der Beschriftung zu und setze Material der Beschriftung auf /builtins/fonts/label-vector.material. Steuere die Anzeigegröße mit Font Size.

Führe für farbige Emojis zusätzlich die Einrichtung der COLRv1-Ausweichschrift und des Bundles durch. Das folgende Beispiel setzt eine Beschriftung mit der ID label und ein Skript am selben Spielobjekt voraus. Lasse Text der Beschriftung leer, damit der Gruß erst angezeigt wird, wenn seine Glyphen bereitstehen:

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

Die gewöhnlichen Buchstaben verwenden die ursprüngliche Schriftart, die Emojis die hinzugefügte Farbschriftart. Wenn andere Beschriftungen oder GUI-Textknoten diese Schriftartenressource gemeinsam verwenden, initialisiere die Ausweichschrift an einer Stelle und verwende sie wieder.

Eigenschaften der Beschriftung

Neben den Eigenschaften Id, Position, Rotation und Scale gibt es die folgenden komponentenspezifischen Eigenschaften:

Text

Der Textinhalt der Beschriftung.

Size

Die Größe des Begrenzungsrechtecks des Textes. Wenn Line Break aktiviert ist, legt die Breite fest, an welcher Stelle der Text umgebrochen werden soll.

Color

Die Farbe des Textes.

Outline

Die Farbe der Kontur.

Shadow

Die Farbe des Schattens.

Leading

Ein Skalierungsfaktor für den Zeilenabstand. Ein Wert von 0 ergibt keinen Zeilenabstand. Der Standardwert ist 1.

Tracking

Ein Skalierungsfaktor für den Zeichenabstand. Der Standardwert ist 0.

Pivot

Der Bezugspunkt (pivot) des Textes. Verwende ihn, um die Textausrichtung zu ändern (siehe unten).

Blend Mode

Der Mischmodus, der beim Rendern der Beschriftung verwendet wird.

Line Break

Die Textausrichtung richtet sich nach der Einstellung des Bezugspunkts. Wenn du diese Eigenschaft aktivierst, kann sich der Text über mehrere Zeilen erstrecken. Die Breite der Komponente bestimmt, wo der Text umgebrochen wird. Beachte, dass der Text ein Leerzeichen enthalten muss, damit er umgebrochen werden kann.

Font

Die Schriftressource, die für diese Beschriftung verwendet wird.

Material

Das Material zum Rendern dieser Beschriftung. Wähle ein Material, das zum Modus oder zur Quelle der Schriftart passt (Bitmap, SDF, Vector oder BMFont). Die passenden integrierten Beschriftungsmaterialien stehen unter Schriftartenmaterialien.

Mischmodi

Die Eigenschaft Blend Mode legt fest, wie die Grafik einer Komponente (component) mit der dahinterliegenden Grafik gemischt wird. Dies sind die verfügbaren Mischmodi und ihre Berechnungen:

Alpha

Normale Mischung: src.a * src.rgb + (1 - src.a) * dst.rgb

Add

Hellt den Hintergrund mit den Farbwerten der entsprechenden Pixel der Komponente auf: src.rgb + dst.rgb

Multiply

Dunkelt den Hintergrund mit den Werten der entsprechenden Pixel der Komponente ab: src.rgb * dst.rgb

Screen

Gegenteil von Multiply. Erhöht die Helligkeit des Hintergrunds und die Werte der entsprechenden Pixel der Komponente: src.rgb - dst.rgb * dst.rgb

Bezugspunkt und Ausrichtung

Durch das Festlegen der Eigenschaft Pivot kannst du die Ausrichtung des Textes ändern.

Zentriert

Wenn der Bezugspunkt auf Center, North oder South gesetzt ist, wird der Text zentriert.

Linksbündig

Wenn der Bezugspunkt auf einen der West-Modi gesetzt ist, wird der Text linksbündig ausgerichtet.

Rechtsbündig

Wenn der Bezugspunkt auf einen der East-Modi gesetzt ist, wird der Text rechtsbündig ausgerichtet.

Änderungen zur Laufzeit

Du kannst Beschriftungen zur Laufzeit ändern, indem du den Beschriftungstext sowie die verschiedenen anderen Eigenschaften abfragst und festlegst.

text

Der Textinhalt der Beschriftung (string). Verfügbar über go.get() und go.set().

color

Die Farbe der Beschriftung (vector4)

outline

Die Konturfarbe der Beschriftung (vector4)

shadow

Die Schattenfarbe der Beschriftung (vector4)

scale

Die Skalierung der Beschriftung, entweder eine Zahl (number) für eine gleichmäßige Skalierung oder ein vector3 für eine individuelle Skalierung entlang jeder Achse.

size

Die Größe der Beschriftung (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

Projektkonfiguration

Die Datei game.project enthält einige Projekteinstellungen für Beschriftungen.