Label

Um componente Label renderiza um trecho de texto na tela, no espaço do jogo. Por padrão, ele é ordenado e desenhado junto com todos os gráficos de sprite e tiles. O componente tem um conjunto de propriedades que controla como o texto é renderizado. A GUI do Defold oferece suporte a texto, mas pode ser trabalhoso posicionar elementos GUI no mundo do jogo. Labels facilitam isso.

Criando um label

Para criar um componente Label, clique com o botão direito no objeto de jogo e selecione Adicionar Componente ▸ Rótulo.

(Se quiser instanciar vários labels a partir do mesmo template, você também pode criar um novo arquivo de componente label: clique com o botão direito em uma pasta no navegador Conteúdo e selecione Novo... ▸ Rótulo, depois adicione o arquivo como componente a qualquer objeto de jogo)

Defina a propriedade Font para a fonte que deseja usar e certifique-se de definir a propriedade Material para um material que corresponda ao tipo de fonte:

Fontes vetoriais e emojis coloridos

Para usar uma fonte Vector, siga a configuração de fontes vetoriais, atribua o recurso .font à propriedade Font do Label e defina o Material do Label como /builtins/fonts/label-vector.material. Use Font Size para controlar o tamanho exibido.

Para emojis coloridos, conclua também a configuração do fallback COLRv1 e de inclusão no bundle. O exemplo abaixo pressupõe um Label com o id label e um script no mesmo objeto de jogo. Deixe Text do Label vazio para exibir a saudação somente depois que seus glifos estiverem prontos:

function init(self)
    local text = "Hello 😀 🍎 🚀"
    local font_resource = go.get("#label", "font")
    -- Adicione o fallback uma única vez para este recurso de fonte compartilhado.
    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

As letras comuns usam a fonte original, e os emojis usam a fonte colorida adicionada. Se outros Labels ou nós de texto de GUI compartilham esse recurso de fonte, inicialize o fallback em um só lugar e reutilize-o.

Propriedades de label

Além das propriedades Id, Position, Rotation e Scale, existem as seguintes propriedades específicas do componente:

Text

O conteúdo de texto do label.

Size

O tamanho da caixa delimitadora do texto. Se Line Break estiver definido, a largura especifica em que ponto o texto deve quebrar.

Color

A cor do texto.

Outline

A cor do contorno.

Shadow

A cor da sombra.

Leading

Um número de escala para o espaçamento entre linhas. Um valor de 0 não dá espaçamento entre linhas. O padrão é 1.

Tracking

Um número de escala para o espaçamento entre letras. O padrão é 0.

Pivot

O pivô do texto. Use isto para alterar o alinhamento do texto (veja abaixo).

Blend Mode

O modo de blend a usar ao renderizar o label.

Line Break

O alinhamento do texto segue a configuração de pivô, e definir esta propriedade permite que o texto flua por várias linhas. A largura do componente determina onde o texto será quebrado. Observe que precisa haver um espaço no texto para que ele quebre.

Font

O recurso de fonte a usar para este label.

Material

O material usado para renderizar este label. Selecione um material que corresponda ao modo ou à origem da fonte (Bitmap, SDF, Vector ou BMFont). Consulte Materiais de fontes para conhecer os materiais integrados de Label correspondentes.

Modos de blend

A propriedade Blend Mode define como os gráficos do componente devem ser mesclados com os gráficos atrás dele. Estes são os modos de mesclagem disponíveis e como eles são calculados:

Alpha :: Mesclagem normal: src.a * src.rgb + (1 - src.a) * dst.rgb

Add :: Clareia o fundo com os valores de cor dos pixels correspondentes do componente: src.rgb + dst.rgb

Multiply :: Escurece o fundo com os valores dos pixels correspondentes do componente: src.rgb * dst.rgb

Screen :: O oposto de Multiply. Clareia o fundo e os valores dos pixels correspondentes do componente: src.rgb - dst.rgb * dst.rgb

Pivô e alinhamento

Ao definir a propriedade Pivot, você pode alterar o modo de alinhamento do texto.

Center

Se o pivô for definido como Center, North ou South, o texto será centralizado.

Left

Se o pivô for definido para qualquer um dos modos West, o texto será alinhado à esquerda.

Right

Se o pivô for definido para qualquer um dos modos East, o texto será alinhado à direita.

Manipulação em tempo de execução

Você pode manipular labels em tempo de execução obtendo e definindo o texto do label, bem como várias outras propriedades.

text

O conteúdo textual do label (string). Disponível por meio de go.get() e go.set().

color

A cor do label (vector4)

outline

A cor do contorno do label (vector4)

shadow

A cor da sombra do label (vector4)

scale

A escala do label, seja um number para escala uniforme ou um vector3 para escala individual ao longo de cada eixo.

size

O tamanho do label (vector3)

function init(self)
    -- Defina o texto do componente "my_label" no mesmo objeto de jogo
    -- deste script.
    go.set("#my_label", "text", "New text")
    local text = go.get("#my_label", "text")
    print(text) -- New text
end

function init(self)
    -- Define a cor do componente "my_label" no mesmo objeto de jogo
    -- que este script. A cor é um valor RGBA armazenado em um vector4.
    local grey = vmath.vector4(0.5, 0.5, 0.5, 1.0)
    go.set("#my_label", "color", grey)

    -- ...e remove o contorno, definindo seu alfa como 0...
    go.set("#my_label", "outline.w", 0)

    -- ...e escala 2x ao longo do eixo x.
    local scale_x = go.get("#my_label", "scale.x")
    go.set("#my_label", "scale.x", scale_x * 2)
end

Configuração do projeto

O arquivo game.project tem algumas configurações do projeto relacionadas a labels.