LoginSignup
1
0
@kiku09020

【Godot】Labelの基本的な使い方

Last updated at Posted at 2024-05-12

はじめに

結構ややこしい、GodotのLabelについてまとめます。
まだ不明瞭な部分もあるので、後日更新していくかもです

環境

  • Godot: 4.1.1(stable)

Labelの種類

Label

label
  • シンプルなテキストを表示させる
  • 太字や斜体などの装飾はできない

RichTextLabel

LabelTest (1).gif
  • 太字などの装飾、文字アニメーションなどの操作ができる、BBCodeというものを扱える

Label3D

  • 3D空間上に表示させる用のラベル

image.png

(今回はLabel3Dについては触れません)

プロパティの編集

テキストなど

  • 表示されるテキストは、Textプロパティで編集できます
    image.png

フォントサイズなどのテキストフォーマット

  • Label, RTL共通で、Control / ThemeOverrides からフォントや文字色などを設定できます
    image.png

  • Labelの場合、後述のLabelSettingsでもフォーマットを設定できます

    • LabelSettingsを利用すると、別のLabelノードともフォーマットを共有することができます

位置、サイズ、アンカーなど

  • Controlノード共通で、Control / Layout / Transform から設定できます
    image.png

LabelとRichTextLabelの違い

ここら辺が結構ややこしいので、まとめます

水平・垂直方向の整列(中央揃えなど)

  • Labelの場合、プロパティとして用意されています
    image.png

  • 一方RTLの方は、水平方向の整列はBBCodeで実現可能ですが、垂直方向の整列は現状BBCodeでは実現できません
    image.png

    • 公式ドキュメントでも、その旨の内容が記載されています

      注: Label とは異なり、RichTextLabel にはテキストを水平方向に中央に揃えるプロパティがありません。代わりに、bbcode_enabled[center]を有効にし、次のようにテキストをタグで囲みます[center]Example[/center]。現在、テキストを垂直方向に整列させる組み込みの方法もありませんが、アンカー/コンテナーとfit_contentプロパティを利用することでエミュレートできます。

  • 公式ドキュメントの通り、VBoxContainerノードをRTLの親として配置すると、中央揃えになりました
    image.png
    image.png

テキストフォーマットの保存・共有 (LabelSettings)

  • Labelの場合、LabelSettingsでフォントサイズやアウトラインなどのテキストフォーマットをファイルとして保存でき、他のLabelに適用することができます
    image.png

  • Controll内のTheme Overidesで設定されたテキストフォーマットは、LabelSettingsの設定に上書きされます

  • RTLには適用できません

LabelとRTL間でのフォントフォーマットの共有 (Theme)

Label (2).gif

  • Controlノード全てについてる、Themeを利用することで、LabelとRTLのテキストフォーマットを共有できます

  • ですが、設定できるのはフォントサイズとフォントくらいです
    image.png

  • Themeで共通のフォント設定を割り当てて、次にLabelSettingsやThemeOverridesを設定する感じにすると、いい感じになると思います

  • また、同じようなテキストフォーマットを複数箇所で適用させたい場合、Labelをシーンとして保存して、Labelシーンを複数配置するのが主流になると思います

    • ThemeEditorで、LabelやRTLなどを指定して、その型のThemeを割り当てれば、シーンとして流用しなくてもいい
    • 上記のVContainerなどを利用した垂直方向の中央揃えなどを全てのテキストに反映したい場合などは、シーンを流用する方が楽

BBCodeの適用

  • RichTextLabelでのみ、BBCodeというものを用いて文字を装飾したり、アニメーションさせたりできます
  • BBCodeについては後述します

フォント設定

  • 別途記事にするかもです
  • 基本的に、フォントファイルインポートしてそのまま適用すれば表示されます

文字背景

  • 文字の後ろに描画される背景を設定することもできる
    image.png

  • Control / ThemeOverrides / Stylesで設定可能

  • RTLの場合、文字が選択されたときの文字背景も指定可能
    LabelTest (2).gif

    • Styles / Focusで設定

BBCode

  • RichTextLabelで文字を装飾できる機能です

  • 有効にするには、RTLの一番上のプロパティBBCode Enabledを有効にする必要があります
    image.png

  • 公式ドキュメントに装飾コード一覧が載ってます

  • 結構ボリューミーなんで、後日別記事をアップするかもです

テキストアニメーション

Label

Labelの場合、文字ごとにアニメーションすることはできなさそうです。
(独自実装で頑張ればいけなくもなさそうだけど、普通にBBCode使った方が楽そうです)

RichTextLabel

  • BBCodeを利用して、テキストアニメーションを再現できます
  • ゲームを実行しなくても、エディタ上で動作確認できるのが便利です
    image.png

こちらの記事にBBCodeでのアニメーションについて詳細にまとまってます

さいごに

LabelとRichTextLabelの違いがちょっとややこしいですが、結構いい感じにアニメーションが再現できたりするのは最高ですね～

海外のインディーゲームの、テキストをやたらと動かしまくる文化、大好きです

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0