LoginSignup
2
0

More than 3 years have passed since last update.

@2dgames_jp

【Godot】テキストスクロールとRichTextLabelのBB Codeについて

Last updated at Posted at 2021-02-18

概要

このページではテキストスクロールを実装する方法について書きます。

→※追記 2021/2/18: ここで紹介している方法を使わなくても RichTextLabel を使うことで簡単にテキストスクロールは実装できます。

shot.gif

テキストスクロールの実装

各種ノードの追加

ノードは以下のような構成となります。

ScrollContainer
 +-- VBoxContainer
      +-- Label

まずはシーンのルートノードに ScrollContainer を追加します。
Godot_Engine_-_TestScroll.png

次に、ScrollContainerの子ノードとして VBoxContainer を追加します。
Godot_Engine_-_TestScroll_-_ScrollContainer_tscn.png

VBoxContainerの子に Label を追加します。
Godot_Engine_-_TestScroll____.png

ノード構成は以下のようになりました。
Godot_Engine_-_TestScroll_-_ScrollContainer_tscn____.png

ScrollContainerのサイズを調整

テキストの実際の表示エリアとなる ScrollContainer のサイズを設定します。
Godot_Engine_-_TestScroll_-_ScrollContainer_tscn____.png

  • Rect > Position > x: 60
  • Rect > Position > y: 50
  • Rect > Size > x: 160
  • Rect > Size > y: 80

としましたが、おおよそのサイズで良いと思います。
Godot_Engine_-_TestScroll_-_ScrollContainer_tscn____.png

Labelにテキストを設定

スクロール確認用として以下のテキストを Label ノードの Text に設定します。

One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten

するとスクロールバーが表示されます。
Godot_Engine_-_TestScroll_-_ScrollContainer_tscn____.png

あとは実行してスクロールの動作を確認します。
shot.gif
スクロールバーをマウスカーソルで動かしたり、テキストの上でマウスホイールを動かしたり、トラックパッドでスクロールさせることができます。

スマートフォン向け対応をする

動作は確認していませんが、スマートフォンだとスワイプでテキストが動作しないことがあるようです。

Containerの下に Containerが存在すると、スクロール処理をそちらに奪われてしまうとのことです。
ここでは、VBoxContainer が悪さをする可能性があるので、VBoxContainer の Control > Mouse > Filter を Ignore にしておくと、スマートフォンでも正常に動作しそうです。

Godot_Engine_-_TestScroll_-_ScrollContainer_tscn____.png

スクリプトからログテキストを追加する

最後にスクリプトからテキストを追加する処理のサンプルです。

ScrollContainer にスクリプトをアタッチして以下のように記述します。

ScrollContainer.gd
extends ScrollContainer

const MAX_LOG = 10 # 10件を最大とする

# Spaceキーを押した回数
var cnt = 0

# ログ
var logs = []

# ラベルノードを取得
onready var label = $VBoxContainer/Label

func _process(delta):
    if Input.is_action_just_pressed("ui_accept"):
        # Spaceキーを押したらログを追加
        logs.append(str(cnt))
        cnt += 1
        if logs.size() > MAX_LOG:
            # 最大数を超えていたら先頭のログを削除
            logs.pop_front()

        # テキスト初期化
        label.text = ""
        var is_first = true
        for s in logs:
            if is_first:
                is_first = false
            else:
                # 最初の行以外は改行を入れる
                label.text += "\n"
            label.text += s

Spaceキーを押した回数をログに追加する処理となります。
ログの最大件数は 10件として、それを超えた場合は一番古いログを消すようにしています。

shot.gif

追記

この記事を書いた後で気がついたのですが、RichTextLabel を使用すると、ScrollContainer を使わなくてもスクロールできることがわかりました
／(^o^)＼ﾅﾝﾃｺｯﾀｲ

Godot_Engine_-_TestScroll_-_RichTextLabel_tscn.png
shot.gif

RichTextLabelの「BB Code」について

せっかくなので、RichTextLabel について調べました。
RichTextLabel では 「BB Code」という特殊な記法でテキストの装飾とアニメーションをすることができます。

BB Codeを有効にする

BB Codeを有効にするには、Bb Code > Enabled にチェックを入れます。
Godot_Engine_-_TestInherit____.png
BB Codeを有効にすると通常のテキストは使用できず、BB Codeのテキストのみ使用できます。

BB Codeの種類

公式ドキュメントに詳しく書いてあるので、説明は不要かもしれませんが、個人的な勉強のためにまとめておきます。

色を変える [Color]

色を変えるには、テキストを[color]で囲みます

BB_Code
This is [color=yellow]banana[/color].

このように記述すると、以下のように色が変わります
Banners_and_Alerts_と_Godot_Engine_-_TestInherit____.png
[color]で囲んだ部分だけ色が変化します。

色の数は以下が用意されています。

  • aqua: 水色
  • black: 黒色
  • blue: 青色
  • fuchsia: 赤紫色
  • gray: 灰色
  • green： 緑色
  • lime: 明るい緑色
  • maroon: あずき色
  • navy: 濃紺
  • purple: 紫色
  • red: 赤色
  • silver: 銀色
  • teal: 青緑色
  • white: 白色
  • yellow: 黄色

上記に存在しない色は16進数で指定します。

例えばオレンジ色だと……

BB_Code
This is [color=#FFA500]orange[/color].

このようになります。
Godot_Engine_-_TestInherit____.png

画像を表示する [img]

アイテムアイコン画像を表示するなど、テキスト内に画像を表示したい場合は [img=幅]画像のパス[/img] を使用します。

BB_Code
He is [img=16]res://icon.png[/img].

このように Godotくんをテキスト内に表示することも可能です。
Godot_Engine_-_TestInherit____.png
ただ、サイズがテキストの高さよりも大きい場合、テキストの高さがずれてしまうので注意です。

アニメーション

[Wave] 波のアニメーション
BB_Code
[wave amp=50 freq=2]Wave Effect[/wave]

ampの値を大きくするほど上下移動が大きくなり、freqの値を大きくするほど上下の移動速度が上昇します。

shot.gif

上下移動で描画領域外に出てしまうとテキストが消えてしまうので、上下に1行ほど余裕をもたせたほうが良いかもしれません。

[Tornado] 竜巻のアニメーション
BB_Code
[tornado radius=5 freq=2]Tornade Effect[/tornado]

radiusは回転する半径の大きさ、freqは回転速度となります。

shot.gif

このアニメーションは上下左右に移動するので、上下左右の余白を大きくする必要がありそうです。

[Shake] 揺れ
[shake rate=20 level=10]Shake Effect[/shake]

テキストがガクブルします。 rateが揺れの速度で、levelが揺れ幅となります。

shot.gif

[Fade] フェード
[fade start=4 length=14]Fade away effect[/fade]

Godot_Engine_-_TestInherit_-_Control_tscn____.png

フェードと色変えは組み合わせて表示できない(合成されない)ようです。

BB_Code
[fade start=4 length=14]Fade away [color=red]effect[/color][/fade]

Godot_Engine_-_TestInherit_-_Control_tscn____.png

合成するには、カスタムエフェクトで新しくタグを作る必要があるのかもしれません……。

以下の動画が詳しそう……
https://www.youtube.com/watch?v=o-cLQ7J1mc8

BB Codeのカスタムエフェクト

上記動画をもとに、カスタムエフェクトを試してみました。
BB Codeのカスタムエフェクトは、新規スクリプトを作成して
Godot_Engine_-_TestInherit_-_Control_tscn____.png
↓↓↓
Godot_Engine_-_TestInherit_-_Control_tscn____.png

CustomGhostEffect.gd
tool
extends RichTextEffect
class_name RichTextGhost

# Syntax: [ghost freq=5.0 span=10.0][/ghost]

# Define the tag name.
var bbcode = "ghost"

func _process_custom_fx(char_fx):
    # Get parameters, or use the provided default value if missing.
    var speed = char_fx.env.get("freq", 5.0)
    var span = char_fx.env.get("span", 10.0)

    var alpha = sin(char_fx.elapsed_time * speed + (char_fx.absolute_index / span)) * 0.5 + 0.5
    char_fx.color.a = alpha
    return true

上記コードを CustomGhostEffect.gd として「名前をつけて保存」
Godot_Engine_-_TestInherit_-_Control_tscn____.png

すると、RichTextLabel から RichTextGhost (スクリプト内で指定した class_name)を選べるようになり [ghost] タグが使えるようになります。
Godot_Engine_-_TestInherit_-_Control_tscn____.png

以下のBB Codeをテストしてみます。

BB_Code
[ghost freq=5 span=5]ghost effect [/ghost]

[ghost] のカスタムエフェクトが動くようになりました！
shot.gif

参考

2
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
2
0