Godot Buttonの押下・無効状態を試してみた

今回はButtonを触ってみました。前回のLabelと同じくControlを継承したUI用のノードで、タイトル画面の「はじめから」やメニューの選択肢など、ゲームの中で出番が多そうなノードです。今回も単体でシーンに置いて、実行しながら見た目がどう変わるのかを確かめてみました。

先に結論のような感想ですが、単なるButtonだけだと地味ですね。

TextureButtonなど、画像をボタンにするノードもありますので、実際のゲームではボタンのデザインをした画像を用意して、TextureButtonで配置する方が多いのかなと想像しました。

ただ、ゲーム作りは何において完成させること、リリースさせることが重要です。細かいデザインの前に全体を確認するといった時にはささっと使えるButtonのほうが便利かもしれませんね。

まずはText欄に2行の文章を入れて実行した状態です。LabelのようにインスペクターのText欄に文字を入れることでButtonに表示することができます。他のノードと同じ構成だと理解しやすいですね。

Buttonを置いて実行した状態。濃いグレーのボックスに2行のテキストが中央揃えで表示されている — 実行した直後の通常の状態。文字はボタンの中央に揃っています。

Labelのときは何も設定しないと文字が左上に寄っていたのですが、Buttonは最初から中央揃えになっていました。ボタンの文字は真ん中にあるのが自然なので、ここはありがたいデフォルトです。Text欄で改行すればそのまま2行のボタンになるのも、Labelと同じ感覚で扱えて分かりやすいですね。

インスペクターを見ると、Buttonの項目の下にBaseButtonというグループがあり、Disabled、Toggle Mode、Button Pressed、Action Modeといった、いかにもボタンらしいプロパティが並んでいます。今回はこの中からDisabledとToggle Modeを試してみました。

まずはDisabledをオンにした状態です（このときToggle Modeもオンになっていますが、Disabledがオンの間は押せません）。

インスペクターでDisabledとToggle Modeをオンにした状態。ボタンの文字が薄いグレーになっている — Disabledをオンにした状態。文字がグレーになり、背景は少し明るくなりました。

Disabledはボタンを「押せない状態」にする設定で、クリックしても反応しなくなります。見た目は文字が薄いグレーになり、背景は逆に少しだけ明るくなりました。ただ、エディタ全体の画面で見ると周りのUIも同じようなグレーなので、パッと見ではあまり目立ちません。チェックボックスを見ないと、押せる状態なのかどうか判断しづらいくらいです。

ゲームで使う場面を考えると、ショップ画面で所持金が足りない商品のボタンや、まだ解放されていないステージの選択ボタンなどは、Disabledにしておく使い方になりそうです。そのときプレイヤーに「押せない」と一目で伝わらないと、何度もクリックされて不具合だと思われてしまうかもしれません。デフォルトの見た目のまま使うなら、「所持金が足りません」のような説明を別に添えるなど、何かしら工夫したほうがよさそうです。

次にDisabledをオフに戻して、Toggle Modeだけをオンにした状態でクリックしてみました。

Toggle Modeだけをオンにしてボタンをクリックした状態。背景がより濃い色になり、文字が白くなっている — Toggle Modeをオンにしてクリックした後。背景が濃くなり、文字が白くなったまま残ります。

Toggle Modeは、押すたびにオンとオフが切り替わるスイッチのような動きにする設定です。これは結構使いそうですね。クリックすると背景が一段濃くなって文字が真っ白になり、マウスを離してもその見た目のまま残りました。もう一度押すと元の状態に戻る仕組みです。オプション画面のBGMのオン・オフや、ノベルゲームの「オート」「スキップ」のような、押したあとも状態を覚えておいてほしいボタンに向いていそうです。

3つの状態を、ボタン部分だけ切り出して並べてみました。

ボタン部分を切り出して並べた比較画像。左から通常、Disabledオン、Toggle Modeオンでクリックした後 — 左から通常、Disabledオン、Toggle Modeオン（クリック後）。

こうして並べると、違いははっきり分かります。通常とToggle Modeオンの差は背景の濃さと文字の白さで、押されているかどうかは十分に見分けられます。一方でDisabledは、単独で見ると「少し色あせたボタン」くらいの印象で、背景が暗めのゲーム画面だと周りに溶け込んでしまいそうです。実際に画面を作るときは、Theme Overridesで無効時の色を変えられるかどうかも試してみたいところです。

ほかにも気になったプロパティがありました。Action Modeは初期値がButton Releaseで、マウスボタンを離した瞬間に押したことになる設定です。Button Maskは初期状態でMouse Leftにだけチェックが入っていて、右クリックには反応しないようになっています。押した瞬間に反応してほしい場面ではAction ModeをButton Pressに変える、といった使い分けになりそうですが、このあたりはまた別の機会に試してみようと思います。

今回いちばん印象に残ったのは、Toggle Modeのようなボタンの「状態」を、スクリプトを書かなくてもチェックボックスひとつで切り替えられることです。ただ、ボタンを押したときに実際に何かを起こすには、シグナルという仕組みとつなぐ必要があります。そちらはButtonとSignalだけで画面を切り替える記事で試しているので、あわせて読んでみてください。