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

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

### 環境
- Godot: 4.1.1(stable)


# Labelの種類
### [Label](https://docs.godotengine.org/ja/4.x/classes/class_label.html)

<img width="256" alt="label" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/a2d40272-4665-87a4-5cec-b541296d3dd7.png">

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


### [RichTextLabel](https://docs.godotengine.org/ja/4.x/classes/class_richtextlabel.html)

<img width="256" alt="LabelTest (1).gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/3c05a592-e5bc-7ab7-600c-6d2a131dc566.gif">


- 太字などの装飾、文字アニメーションなどの操作ができる、BBCodeというものを扱える


### [Label3D](https://docs.godotengine.org/ja/4.x/classes/class_label3d.html)
- 3D空間上に表示させる用のラベル

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/83344d7f-044e-ee71-b095-1f44248b69de.png)

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



# プロパティの編集
### テキストなど
- 表示されるテキストは、**`Text`プロパティで編集できます**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/5a3af2d0-e77f-a564-40e3-980a5bf9f295.png)


### フォントサイズなどのテキストフォーマット
- **Label, RTL共通で、`Control / ThemeOverrides` からフォントや文字色などを設定できます**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/bf99631e-9ea9-60a7-3e51-67f6764b38b2.png)

- **Labelの場合、後述のLabelSettingsでもフォーマットを設定できます**
    - LabelSettingsを利用すると、別のLabelノードともフォーマットを共有することができます


### 位置、サイズ、アンカーなど
- Controlノード共通で、`Control / Layout / Transform` から設定できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/2ce8a758-351a-1a34-75cd-771c5768757e.png)







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



### 水平・垂直方向の整列(中央揃えなど)
- Labelの場合、プロパティとして用意されています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/29cba18d-4264-4e9f-922e-bd25ce5510e5.png)

- 一方RTLの方は、**水平方向の整列はBBCodeで実現可能ですが、垂直方向の整列は現状BBCodeでは実現できません**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/532bfd15-493c-5ddf-76fa-f24abc019a75.png)

    - [公式ドキュメント](https://docs.godotengine.org/ja/4.x/classes/class_richtextlabel.html#description)でも、その旨の内容が記載されています
        > 注: Label とは異なり、RichTextLabel にはテキストを水平方向に中央に揃えるプロパティがありません。代わりに、bbcode_enabled[center]を有効にし、次のようにテキストをタグで囲みます[center]Example[/center]。現在、テキストを垂直方向に整列させる組み込みの方法もありませんが、アンカー/コンテナーとfit_contentプロパティを利用することでエミュレートできます。

- 公式ドキュメントの通り、**VBoxContainerノードをRTLの親として配置**すると、中央揃えになりました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/52540fe8-2991-9f05-4d39-bf66fbfc21e0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/a3c7d95e-63a2-0a31-a069-200102a64e5f.png)



### テキストフォーマットの保存・共有 (LabelSettings)
- Labelの場合、**LabelSettingsでフォントサイズやアウトラインなどのテキストフォーマットをファイルとして保存でき、他のLabelに適用することができます**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/a50dbfae-3711-55e3-fecc-78e30ed7b1fe.png)

- **Controll内のTheme Overidesで設定されたテキストフォーマットは、LabelSettingsの設定に上書きされます**
- RTLには適用できません



### LabelとRTL間でのフォントフォーマットの共有 (Theme)
![Label (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/952a5bde-f7ee-d380-d4bf-033e7b818c3e.gif)


- Controlノード全てについてる、Themeを利用することで、**LabelとRTLのテキストフォーマットを共有できます**
- ですが、設定できるのはフォントサイズとフォントくらいです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/fe36306b-fbe1-2540-ad06-2c04d1d3d5f7.png)

- Themeで共通のフォント設定を割り当てて、次にLabelSettingsやThemeOverridesを設定する感じにすると、いい感じになると思います
- ~~また、同じようなテキストフォーマットを複数箇所で適用させたい場合、Labelをシーンとして保存して、Labelシーンを複数配置するのが主流になると思います~~
    - ThemeEditorで、LabelやRTLなどを指定して、その型のThemeを割り当てれば、シーンとして流用しなくてもいい
    - 上記のVContainerなどを利用した垂直方向の中央揃えなどを全てのテキストに反映したい場合などは、シーンを流用する方が楽

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



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


# 文字背景
- 文字の後ろに描画される背景を設定することもできる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/b56ccf98-9970-525b-a97c-31c27cb7d9ed.png)


- `Control / ThemeOverrides / Styles`で設定可能
- RTLの場合、文字が選択されたときの文字背景も指定可能
![LabelTest (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/ee46007a-ceb5-05e5-d7d9-a916f7398030.gif)

    - `Styles / Focus`で設定



# [BBCode](https://docs.godotengine.org/ja/4.x/tutorials/ui/bbcode_in_richtextlabel.html)
- RichTextLabelで文字を装飾できる機能です
- 有効にするには、RTLの一番上のプロパティ`BBCode Enabled`を有効にする必要があります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/4621ffed-f2fd-4cf4-f11b-b02be6ea7635.png)

- 公式ドキュメントに装飾コード一覧が載ってます
- 結構ボリューミーなんで、後日別記事をアップするかもです




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


### RichTextLabel
- BBCodeを利用して、テキストアニメーションを再現できます
- ゲームを実行しなくても、エディタ上で動作確認できるのが便利です
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2419795/e1c8eec9-46d1-699f-5b2e-83a763e3d363.png)


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

https://2dgames.jp/godot-richtextlabel-bb-code/


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

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