むずでょ

2023-10-01に更新

Godot でテキストを表示しようぜ？

読了目安：12分

親記事から来た

📖　Godot って何だぜ（＾～＾）？

はじめに

「　Godot でテキストを表示しようぜ？」

「　👆　Label と RichTextLabel は見つかるが」

「　👆　フォント・サイズを　いくつにするのが適切なのか　現代のディスプレイ事情では　分からんなあ」

「　ゲームの画面サイズを　先に確定した方が　よくない？」

画面サイズ

「　👆　じゃあ　画面サイズを　1280 x 720 ピクセルに縛ろうぜ？」

グリッド

「　👆　フォントを適当に設定して……、グリッドが無いと　サイズ感をつかめないな」

「　👇　シェーダーで勝手に作れという　界隈みたいよ」

📖　2D Grid

「　👇　また勉強か」

📖　Your first 2D shader

「　ダメだ　シェーダー難しい　画像でやる」

「　👆　Windows Paint で線を引き、 GIMP で背景色を抜いたぜ」

「　技術の無さを　労働で補うの　わらう」

「　👆　ぴったりなの　わらう」

「　これ、工作用紙の罫線のデザインよね」

📖　参考画像

「　近所で入手しやすいアイテムだぜ。８の倍数にアレンジしたぜ」

フォントをインストールしようぜ？

「　Godot のデフォルトのフォントが　クソ　で嫌いだぜ。
他の日本人は　誰一人　疑問にも思わず　放置しているのか？」

「　海外が本場なんじゃないの？」

「　他のフォントに変えられないのかだぜ？」

「　👇　調べろだぜ」

📖　【Godot】日本語フォントの設定方法 (Godot3.4〜3.5)

「　フォント作成者のページを見にいったら　フォント・ファイルをソースに同梱して配布するのをやめてくれといった趣旨が　書いてあった」

「　当然よね」

「　👇　この　M PLUS 1 Code　フォントなら　わたしの感覚に合うんだが、オープンソースのゲームに同梱していいんだろうか？」

📖　M PLUS 1 Code

「　👇　ダウンロードできるページは　ここだろうか？」

📖　Git Hub/MPLUS FONTS

「　👆　再配布可能なライセンスの　フォント・ファイルをダウンロードしてきたぜ」

「　👆　フォント・ファイルを置いても　認識しないようなので、
リソースを新規作成するぜ」

「　👆　説明と画面が違うんで　あとは勘で進むぜ。 FontFile でどうか？」

「　👆　new_font_file.tres というファイルを作った」

「　👆　フォント・ファイルと紐づけよ」

「　👆　これで　フォントを選べるようになったぜ」

「　👆　よし、まともな　フォントになったぜ」

「　👆　おお、このフォント、　分かってる フォントだぜ」

「　多分、 M Plus 1 Code フォントの作者が　古臭い日本人なのでは？」

古臭いウィンドウ

「　じゃあ　次は　昔ながらの　古臭いウィンドウを　作ってみましょう」

「　なんで　わたしたちのやることは　昔とか、古臭いという　形容詞が付くんだぜ？」

「　事実だろ」

「　あのメッセージ・ウィンドウ、現代では　何て呼ばれてるんだぜ？」

「　👇　StyleBoxFlat じゃないか？」

📖　Theme Variation with StyleBoxTexture returns wrong type #66850

「　適当に触ってみるか」

「　存在しなかった」

「　👆　そんなときは　Windows Paint で枠を描いて　GIMP で透明度を抜けばいいんだぜ」

「　技術の無さを　労働で補うの　わらう」

「　👆　固定長で十分だろ」

「　👆　１、２、３、　……　全角で１行２０文字、３段で
計　６０文字でいいの？」

「　シナリオライターに　足らん　と言われても　ごめんなさい　しようぜ」

背景を付けましょう

「　バックが方眼紙だと　落ち着かないから　背景を付けましょう」

「　オープンソースで　ばらまくのに　ライセンスが適していないフリー素材が　あるからな。
素材を揃えるのが　難しいぜ」

「　👆　コンピューター将棋選手権の会場だぜ」

「　著作権的に問題があるのではないか？」

「　著作権的に　問題のある素材しか　持ってないぜ」

「　困ったわねえ。　素材不足は深刻ねえ」

ブリンカー

「　メッセージ・ウィンドウの最後で点滅してる　アレの名前　何だぜ？
アレを作ろうぜ？」

「　アレは　文字だろ。　文字と同じように　輪郭を付けて、ドロップシャドウもしなければ
浮いてしまうだろ」

「　外字で作れないの？」

「　.otf ファイルを使っているのに　外字が出てくるのか分からん」

「　👆　とりあえず　Windows Paint と GIMP で　それっぽいのを作って、画面に置いてみようぜ？」

「　👆　どうだぜ？　溶け込んでいるかだぜ？」

「　浮いているわねぇ」

「　スポイトで色を吸ってみたけど、白は (248, 248, 248) で同じなんだけど、
影の色が　違うのよね。影は　半透明にしなきゃ。
あと、フォントには　アンチエイリアシングが　かかってんのよ」

「　👆　ドロップシャドウも　アンチエイリアシングも　見よう見まねで　Windows Paint と GIMP で　やってみようぜ？」

「　👆　今度は　どうだぜ？　溶け込んでいるかだぜ？」

「　さっきよりは　マシな気がするけど、　三角形が　でかくて　主張が強い気がするのよねえ」

「　👆　参考に　アンダースコアと　逆三角形の文字を横に並べたが、そんなに違うかだぜ？」

「　逆三角形と　アンダースコアを重ねて置けばいいと思う」

「　👆　これでどうだぜ？」

「　目の錯覚か　暗く見えるけど　もう　こんなもんで　いいんじゃない？」

ブリンカーを点滅させようぜ？

「　👇　タイマーを使わなくても、 _process() を使えば点滅できるんじゃないか？」

extends Label

var count = 0

# サブツリーが全てインスタンス化されたときに呼び出される
# Called when the node enters the scene tree for the first time.
func _ready():
    pass


# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
    count += delta

    if 0.75 <= count: 
        visible = not visible
        count -= 0.75

📺　動画

「　👆　この動画に映ってるブリンカーで　充分よ」

文字が１個ずつ出てくるやつをやろうぜ

「　カタカタカタカタ、ってやつ」

「　Label コントロールには　テキストを全文入れてるじゃないか。
あれを　空っぽにして、１文字ずつ　入れていくということかだぜ？」

「　そうなるな」

「　👆　例えば、こう書いても　同じことだぜ」

「　そのテキストを、別のところに保存しておいて、
時間経過とともに　ラベルに追加していけばいいのよ」

文字列の長さを計るには？

「　GDScript で文字列の長さを計るには？」

「　👇　この中から探せだぜ」

📖　Godot Engine / String

「　スライス　無いのか。じゃあ　Ｃ言語風に書けばいいんだ」

extends Label

var count = 0

var text_storage = """お父ん、なんで唐揚げを食べているんだぜ？
ダイエットはどうした？
野菜を TABERO だぜ！
"""

# Called when the node enters the scene tree for the first time.
func _ready():
    self.text = ""


# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
    count += delta

    if 0.05 <= count:
        if 0 < self.text_storage.length():
            self.text += text_storage.substr(0, 1)
            text_storage = text_storage.substr(1, self.text_storage.length()-1)
        count -= 0.05

📺　動画

「　👆　この動画に映ってるタイプライター風の文字列出力で　充分よ」

文字が出終わってから　ブリンカーが出るように　合わせてくれだぜ

「　文字が出終わってから　ブリンカーが出るように　合わせてくれだぜ」

「　👇　別のノードの変数を　どうやって参照するのか……。調べるか」

📖　[Godot]$(ドルマーク)とget_node関数の違いについて

「　👆　ツリー構造を変えて」

extends Label

# 点滅用
var is_blink_started = false
var count_of_blink = 0

# タイプライターの文字出力間隔
var count_of_typewriter = 0

# サブツリーが全てインスタンス化されたときに呼び出される
# Called when the node enters the scene tree for the first time.
func _ready():
    # 最初は非表示
    visible = false


# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
    # テキストを出し終えたか？
    count_of_typewriter += delta
    if not is_blink_started and 0.5 <= count_of_typewriter:
        var message_window_text = $".."
        if message_window_text.get("text_storage").length() < 1:
            is_blink_started = true
            visible = true

        count_of_typewriter -= 0.5

    # 点滅
    if is_blink_started:
        count_of_blink += delta
        if 0.75 <= count_of_blink: 
            visible = not visible
            count_of_blink -= 0.75

「　👆　ブリンカーのスクリプトも変更」

📺　動画

「　👆　この動画に映ってるメッセージ・ウィンドウで　充分よ」

メッセージ送り、してくれだぜ

「　メッセージ送り、してくれだぜ」

Push any key

「　何か　どれでも　キーを押したかどうかの判定って、どうやんの？」

「　👇　シグナルを使うことになるんじゃないか？」

📖　How to detect if any key is pressed

「　Godot では　どんなコレクション・クラスを使えるんだぜ？」

「　👇　配列しかないんじゃないか？」

📖　Godot Engine / Array

（カタカタカタカタ）

📄 textend_blinker.gd:

extends Label

# 点滅用
var is_blink_started = false
var count_of_blink = 0

# タイプライターの文字出力間隔
var count_of_typewriter = 0

# サブツリーが全てインスタンス化されたときに呼び出される
# Called when the node enters the scene tree for the first time.
func _ready():
    # 最初は非表示
    visible = false


# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
    # テキストを出し終えたか？
    count_of_typewriter += delta
    if not is_blink_started and 0.5 <= count_of_typewriter:
        var message_window_text = $".."
        if message_window_text.get("text_storage").length() < 1:
            is_blink_started = true
            visible = true

        count_of_typewriter -= 0.5

    # 点滅
    if is_blink_started:
        count_of_blink += delta
        if 0.75 <= count_of_blink: 
            visible = not visible
            count_of_blink -= 0.75

func reset():
    self.visible = false
    self.is_blink_started = false
    self.count_of_blink = 0
    self.count_of_typewriter = 0

📄 MessageWindowText.gd:

extends Label

var count_of_typewriter = 0

var scenario_array = [
    # ２３４５６７８９０１２３４５６７８９０
    """\
    お父ん、知ってたら教えてくれだぜ。
    エスフェン（SFEN）の 7g7f って何だぜ？
    """,
    """\
    あー。７筋の７段目の駒を
    ６段目に突くことだぜ。
    分かったら　もう寝ろ
    """,
    """\
    3c3d　って何だぜ？
    """,
    """\
    角換わりだろ。
    もう寝ろ
    """,
    """\
    お父ん、なんで唐揚げを食べているんだぜ？
    ダイエットはどうした？
    野菜を TABERO だぜ！
    """,
    # ２３４５６７８９０１２３４５６７８９０
    """\
    元気になりたくて唐揚げを食べるんだぜ。
    カロリー計算をしようと思ったときもあった
    限界まで食べてしまうので止めた
    """,
]

var text_storage = ""

# Called when the node enters the scene tree for the first time.
func _ready():
    # 最初のテキスト
    self.text = ""

    if self.text_storage == "" and 0 < self.scenario_array.size():
        self.text_storage = self.scenario_array.pop_front()


# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):

    # タイプライター風出力
    count_of_typewriter += delta

    if 0.05 <= count_of_typewriter:
        if 0 < self.text_storage.length():
            self.text += text_storage.substr(0, 1)
            text_storage = text_storage.substr(1, self.text_storage.length()-1)
        count_of_typewriter -= 0.05

func _unhandled_key_input(event):

    print("_unhandled_key_input")

    # 何かキーを押したとき
    if event.is_pressed():
        print("_unhandled_key_input is_pressed")
        # TODO ブリンカーを消す
        $"BlinkerTriangle".reset()
        $"BlinkerUnderscore".reset()

        # メッセージ送り
        if self.text_storage == "":
            self.text = ""

            if 0 < self.scenario_array.size():
                self.text_storage = self.scenario_array.pop_front()

📺　動画

「　👆　この動画に映ってるメッセージ・ウィンドウで　だいたい　充分よ」

メッセージ・ウィンドウを閉じてくれだぜ

「　出すメッセージが無いんだったら、メッセージ・ウィンドウを閉じてくれだぜ」

            else:
                # 出すメッセージが無ければ、メッセージ・ウィンドウを閉じる
                $"..".visible = false

「　👆　これで　オッケー」

誰が　しゃべってるか　分からない

「　誰がしゃべってるか　分かんなくない？」

「　顔グラ（Face Graphic）を出すと　素材不足で　苦しむしな」

「　工夫で乗り切るか。
昔のゲームは　ちからわざ　が使えないときは　ごめんなさい　で通していたからな」

「　👆　メッセージ・ウィンドウの中に　名前を書くとかな」

「　それで十分ねえ」

「　カギかっこ付けたから　１行に　１９文字しか入らないぜ？」

「　ごめんなさい　するんだぜ」

親記事へ戻る

📖　Godot って何だぜ（＾～＾）？

以下、追加機能

「　メッセージの早送り機能が欲しくない？」

「　どのボタンを押したら　早送りするんだぜ？
まだ　キーボードで遊ぶのか、ゲームパッドで遊ぶのか、何も決まってないぜ？」

「　とりあえず　キーボードに絞ってもいいのでは？」

「　じゃあ　スーパーファミコンの R ボタンとか　よく使ったから、キーボードの　R キーでいいか」

        # １文字 50ms でも、結構ゆっくり
        var wait_time = 0.05

        # メッセージの早送り
        if Input.is_key_pressed(KEY_R):
            print("［テキストブロック］　メッセージの早送り")
            wait_time = 0.01

「　👆　こんな感じで　ウェイトを変えればいいぜ」

            if event.keycode == KEY_R:
                print("［テキストブロック］　Ｒキーは、メッセージの早送りに使うので、メッセージ送りしません")
                return
            # 選択肢モードの場合は、確定ボタン以外は無効
            elif self.is_choice_mode and event is InputEventKey and event.pressed:
                if event.keycode != KEY_ENTER:
                    print("［テキストブロック］　選択肢モードでは、エンターキー以外ではメッセージ送りしません")
                    return
                else:
                    print("［テキストブロック］　選んだ選択肢行番号：" + str($"ChoiceCursor".selected_row_number))
                    pass

「　👆　逆に、メッセージ送りには　R キーは使えないぜ」

「　送り とか 早送り とか　国語が難しいな」

ツイッターでシェア

みんなに共有、忘れないようにメモ