ノード解説「RichTextLabel」

Node解説

はじめに

前回解説したLabelノードで基本的なテキスト表示ができますが、ゲーム開発では「ストーリーの会話文に人物の名前を赤で、セリフを白で表示したい」「アイテム説明に重要な部分を太字にしたい」など、同じテキストの中に異なる色や装飾を混在させたいことがあります。そんなときに活躍するのがRichTextLabelノードです。

この記事では、RichTextLabelでリッチテキスト(複数の色や装飾を含むテキスト)を扱う方法を見ていきます。

RichTextLabelとは?

RichTextLabelノードは、複数の色・装飾・レイアウトが混在したテキストを表示するノードです。タグ形式で指定した部分だけ色を変えたり、太字にしたり、フォントサイズを変えたりできます。

新聞や雑誌のように、見出しは大きく、重要な部分は目立つ色で、という「デザインされたテキスト」を画面に表示するノード。Labelはシンプルな黒板だとしたら、RichTextLabelは装飾された印刷物です。

RichTextLabelは Control を継承しており、UI要素としての基本機能を備えています。内部ではBBCode(ブラケットベースのマークアップ言語)のような形式でテキストにタグを埋め込んで表現します。

このノードを使うべき場面

  • 会話ウィンドウでキャラクター名を色分けして表示したい
  • アイテムの説明文で重要な単語だけを太字や色付けしたい
  • ゲームのストーリーモードでリナレーションテキストを装飾したい
  • ゲーム内ドキュメントやヘルプテキストに見出しとリスト形式で複数行のテキストを整形したい
  • スコアボードやランキング画面で異なるフォントサイズやスタイルを混在させたい

一方、以下のようなケースではRichTextLabelは不要です:

  • 単色で単純なテキストだけを表示する場合 → Label で十分
  • ユーザーがテキストを編集・入力する必要がある場合 → TextEditLineEdit を使う

主なプロパティと機能

プロパティ / メソッド 説明 型 / 戻り値
text 表示するテキスト(BBCodeタグを含む) String
bbcode_enabled BBCodeの解析を有効にするか bool
modulate 全体的なテキストの色(RGB値) Color
fit_content_height テキストの高さに合わせて自動でリサイズ bool
scroll_active スクロール機能を有効にするか bool
custom_minimum_size ノードが占める最小サイズ Vector2

基本的な使用例を見てみましょう:


extends Node2D

func _ready():
    # RichTextLabelノードを作成
    var rich_label = RichTextLabel.new()
    rich_label.bbcode_enabled = true
    rich_label.text = "[color=red]Error:[/color] File not found"
    rich_label.position = Vector2(50, 50)
    rich_label.custom_minimum_size = Vector2(400, 200)
    add_child(rich_label)

    # スクリプトでテキストを更新する
    $RichTextLabel.text = "[b]Score:[/b] [color=#FFD700]%d[/color]" % score

BBCodeタグはテキストに直接埋め込んで指定します。タグで囲んだ部分が指定したスタイルで表示されます。

もっと使いこなす:カスタマイズできるパラメータ

まずは基本を動かしてみてから、余裕が出たら試してみてください。

1. 色付けタグ [color] で部分的に色を変える

テキストの特定部分を色付けするなら、[color] タグを使います:


rich_label.text = "[color=red]危険:[/color]敵が近づいています"
rich_label.text = "[color=#00FF00]成功:[/color]ミッション完了"
rich_label.text = "[color=Color(0.5, 0.5, 1.0)]冷静:[/color]落ち着いて行動"

色名(red, green, blue など)、16進カラーコード(#RRGGBB)、またはColor()関数で色を指定できます。重要な情報を目立たせるのに活躍します。

2. 太字・イタリック [b]、[i] で装飾

テキストをボールドやイタリック体にできます:


rich_label.text = "ダメージ受けました。[b]特に胸部に深いダメージ[/b]です。"
rich_label.text = "[i]Note:[/i] このアイテムは一度だけ使用できます。"
rich_label.text = "[b][color=orange]⚠ 警告 ⚠[/color][/b]"

色付けと組み合わせると、強調度が高まり読者の注意を引きやすくなります。

3. フォントサイズを変える [font_size]

テキストの一部だけ大きく、または小さく表示できます:


rich_label.text = "[font_size=24]章:失われた秘宝[/font_size]\n"
rich_label.text += "長い冒険の果てに、彼らはついに..."
rich_label.text = "通常サイズ [font_size=12]注釈テキスト[/font_size]"

見出しと本文、脚注といった階層構造をテキストで表現するときに便利です。

4. 改行制御と改行タグ

テキストに\n を含めると改行されます。複雑な改行を制御したい場合は改行タグも活用します:


# 手動で改行
rich_label.text = "1行目\n2行目\n3行目"

# タグで改行
rich_label.text = "段落1[br]段落2[br]段落3"

BBCodeでは[br]タグが改行に相当します。複数行のテキストを整然と配置するときに重要です。

5. リスト表示とインデント

アイテムのリストや説明を、インデント付きで見やすく表示:


rich_label.text = "[b]装備可能なアイテム:[/b][br]"
rich_label.text += "・[color=#FF6347]赤い剣[/color] - 攻撃力 +5[br]"
rich_label.text += "・[color=#87CEEB]青い盾[/color] - 防御力 +3[br]"
rich_label.text += "・[color=#90EE90]緑のポーション[/color] - HP回復"

行頭に記号を付けて色を変えると、リスト形式で階層的に情報を表示できます。ゲーム内インベントリやメニュー画面に最適です。

6. URLリンクタグ [url]

テキストの一部を クリック可能なリンク にできます(ただしゲーム内では機能限定):


rich_label.text = "詳しくは[url=https://docs.godotengine.org/]公式ドキュメント[/url]を参照"
rich_label.meta_clicked.connect(_on_meta_clicked)

func _on_meta_clicked(meta):
    print("クリックされた:", meta)

ゲームのチュートリアルやヘルプ画面で、特定の単語をインタラクティブに処理できます。

まとめ

RichTextLabelはLabelの強化版で、複雑な装飾を含むテキストを簡単に表示できるノードです。BBCodeタグを使うだけで色や装飾を自由に指定でき、ゲームの見た目を豊かにします。

  • 色付け、太字、フォントサイズなど、複数の装飾をテキストに混在させられる
  • BBCodeタグの形式を覚えるだけで、複雑な装飾テキストを簡単に作成可能
  • 会話ウィンドウ、UI画面、ゲーム内ドキュメントなど、多くの場面で活躍する

次回は、テキスト入力を受け付けるノードであるLineEdit(1行入力)について解説します。

シリーズ:Godot 4 ノード解説

この記事はGodot 4.xをもとに執筆しています。

コメント