Godot4 スクロールするラベルが簡単に作れる RichTextLabel

無料で軽快なゲームエンジン GodotEngine4 の RichTextLabel を使えば、長い文章をスクロールして表示することが簡単にできます。
今回は、タグを使って一部の文字列を中央寄せしたりできるテキストを修飾するコードや、アウトラインやフォントの設定とあわせて、 RichTextLabel の使用例を紹介します。

※この記事の内容は、アプリタップ The 宝箱の開発でも使用しています。
※ GodotEngine のバージョンは 4.1.2 です。 .NET 版ではありません。
※「いらすとや」様の画像を使用しています。
※「ふい字」フォントを使用しています。
※「魔王魂」様のサウンドを動画内で使用しています。
※「無料効果音で遊ぼう！」様のサウンドを動画内で使用しています。
※記事で紹介するスクリプト / プログラム / コードは自己責任で使用してください。

RichTextLabel ノードの追加
RichControlText の設定
フォントの設定
アウトラインの追加
RichTextLabel の配置とテスト
まとめ
参照サイト Thank You!

RichTextLabel ノードの追加

スクロールするラベルを表示させたいシーンに、 RichTextLabel ノードを追加します。

追加する対象ノードを右クリックして、メニュー「子ノードを追加」を選択します。

Godot4 TapTheTakarabako 追加対象を右クリックして子ノードを追加するメニューを選択します.

「Node を新規作成」ダイアログで RichTextLabel を選択して「作成」ボタンを押します。
※検索ボックスを使うと探しやすいです。

Godot4 TapTheTakarabako Nodeを新規作成ダイアログで RichTextLabel を選択して作成します..

RichControlText の設定

作成した RichControlText ノードを選択して、インスペクタードックで表示するテキストなどを設定します。

BBCode Enabled をチェックすると、テキストを修飾するコードを使えます。

例えば、以下のように [center]～[/center]で囲むと、その中のテキストを中央寄せで表示できます。
詳しい説明は「RichTextLabelのBBCode — Godot Engine (4.x)の日本語のドキュメント」を参照してください。

[center]素材/Asset Thank You!(順不同・敬称略)[/center]

Text に表示するテキストを入力します。 BBCode Enabled が有効ならば BBCode で修飾したテキストを入力できます。

Scroll Active をチェックすることで、必要に応じてスクロールバーが追加され、テキストをスクロールして表示できます。

Godot4 TapTheTakarabakoRichTextLabel ノードで BBCodeEnabledをチェックするとテキストをコードで修飾できます.またスクロールも有効に設定します.

フォントの設定

使用するフォントは Label と同様に Control クラスの Theme Overrides の Fonts に設定します。
フォントサイズも同様に Font Sizes に設定できます。

Godot4 TapTheTakarabakoRichTextLabel ノードの Control クラスのTheme Overrides でフォントやフォントサイズを設定できます...

アウトラインの追加

文字の色と背景色が似ている場合、読みづらくなります。
この問題は、文字の外側を違う色で描画するアウトラインを追加すると解消できます。

Controll クラスの Theme Overrides の Colors の Font Outline の項目で、アウトラインの色を設定できます。
同様に Constants の Outline Size に 1 以上のアウトラインの幅の値を設定することで、アウトラインが文字に追加表示されます。