マニュアル: 動作付きボタン（VisualScriptButton）でメニューを作る

[Moonling]

このマニュアルについて

このマニュアルでは、ACTION GAME MAKER の動作付きボタン（VisualScriptButton / VisualScriptTextureButton）の使い方を解説します。あわせて、ボタンをきれいに並べるための縦並び・横並び（コンテナ）の扱い方と、タイトル画面・ポーズメニュー・ステージセレクトといったメニューの組み立て方を扱います。

動作付きボタンでできること

これまでビジュアルスクリプトだけでメニューを作るには、項目ごとにオブジェクトを置き、「いま何番目を選んでいるか」を変数で持って、入力条件で上下の移動を数える必要がありました。

動作付きボタンを使うと、ボタンを並べるだけでカーソル移動ができ、押したときの動作はインスペクターで選ぶだけになります。

やりたいこと	動作付きボタンでの扱い
キー・ゲームパッドで項目を選ぶ	縦並び・横並びに入れたボタンの間を、上下左右でフォーカスが移ります
マウスで選ぶ・クリックで決める	マウスを乗せるとフォーカスが移り、クリックで決定します
決定したら何かする	「ステートを実行」「メニューを開く」「メニューを閉じる」から選びます
カーソルを合わせたら説明を変える	「フォーカスしたとき」に「ステートを実行」を指定します
戻る（キャンセル）	「キャンセルしたとき」に「メニューを閉じる」を指定します
ポーズメニュー	「メニューを開く」の「一時停止する」で、ゲームを止めてメニューだけ動かします
決定音・カーソル音	きっかけごとに「鳴らすサウンド」を選びます
ボタンの文字に値を出す	<player.HP> のような値の差し込みが使えます（文字のボタンのみ）

ボタンは 2 種類あります。

追加メニューでの名前	クラス	見た目
ボタン	VisualScriptButton	文字のボタン（テーマで見た目が決まります）
画像ボタン	VisualScriptTextureButton	画像で描くボタン（通常・押下・ホバー・フォーカス時の画像を指定します）

メニュー画面を用意する

メニュー（MenuScene）は、マップ制作ビューで作ります。

1. 左列の「マップ」一覧で「＋ 新規作成」を押します。
2. 種類で「メニュー」を選び、名前を付けて作成します。
3. 作ったメニューを開くと、マップレイヤードックにルート直下の CanvasLayer がレイヤーとして並びます。

メニューへの要素の追加は、マップレイヤードックのレイヤーの行にある「＋（要素を追加）」から行います。メニューでは次の要素が選べます。

要素	用途
ラベル / リッチテキスト	見出し・説明文。値の差し込みも使えます
ボタン / 画像ボタン	動作付きボタン
画像 / 単色矩形 / ナインパッチレクト / パネル	背景や枠
縦並び / 横並び	ボタンを並べる入れ物（コンテナ）
シンプルゲージ / イメージゲージ	ゲージ
オブジェクトを選ぶ…	メニューの動作をビジュアルスクリプトで作るための「管理オブジェクト」

ゲーム画面の HUD（マップの UI レイヤー）にも、ボタンと画像ボタンを置けます（後述の「マウス操作のゲームで HUD にボタンを置く」を参照）。

ボタンを並べる（縦並び・横並び）

コンテナの考え方

縦並び（VBoxContainer）と横並び（HBoxContainer）は、中に入れた要素を自動で並べる入れ物です。

• 縦並びは上から下へ、横並びは左から右へ、一覧（マップレイヤードック）での順番どおりに並べます。
• 中に入れた要素の位置と大きさは、コンテナが決めます。 ボタンを 1 つずつドラッグして動かすことはできません（動かそうとすると「コンテナの子の位置とサイズは、その親によってのみ決定されます。」という警告が出ます）。
• 位置を変えたいときは、コンテナ自体を動かします。 中のボタンは並びを保ったまま一緒に動きます。

キーやゲームパッドでのフォーカス移動は、画面上で隣にあるボタンへ移ります。縦並びなら上下、横並びなら左右で、並んだ順に移っていきます。

縦並びにボタンを並べる手順

1. CanvasLayer の「＋」から「縦並び」を追加します。
2. 同じく「ボタン」を必要な数だけ追加します。2 つ目以降は、ボタンを右クリックして「複製」（Ctrl+D）すると、設定ごと増やせます。
3. マップレイヤードックで、ボタンを縦並びの行の上へドラッグ＆ドロップして中へ入れます。Shift / Ctrl クリックで複数選んでおくと、まとめて入れられます。 一覧での並び順のまま入ります。
4. 並び順を変えたいときも、一覧の中でドラッグして入れ替えます（複数をまとめて動かせます）。
5. 各ボタンの「テキスト」に表示する文字を入れます。

位置・大きさ・間隔を整える

縦並び・横並びを選ぶと、インスペクターに配置の項目が並びます（「高度な設定」を開かなくても出ます）。

変えたいこと	触る項目
メニューを画面の中央などに置く	「レイアウト」の「アンカー設定」で「中央」などを選びます
位置を細かくずらす	「位置」（2D 画面でコンテナをドラッグしても動かせます）
ボタンの幅をそろえる・広げる	コンテナの「カスタム最小サイズ」で幅を決め、各ボタンの「コンテナ内のサイズ調整」→「水平」で「塗りつぶし」をオン
ボタン同士の間隔	「テーマのオーバーライド」→「定数」→「Separation（間隔）」
並びを上寄せ・中央寄せ・下寄せにする	「配置」（Alignment）
ボタン 1 つの大きさ	ボタンの「カスタム最小サイズ」

縦と横を組み合わせる

2 列のメニューや、「はい / いいえ」を横に並べた確認画面は、コンテナを入れ子にして作ります。

CanvasLayer
└ 横並び（HBoxContainer）       ← これを動かすと全体が動く
   ├ 縦並び（VBoxContainer）
   │  ├ ボタン「ステージ 1」
   │  ├ ボタン「ステージ 2」
   │  └ ボタン「ステージ 3」
   └ 縦並び（VBoxContainer）
      ├ ボタン「ステージ 4」
      └ ボタン「ステージ 5」

このように組むと、上下キーで列の中を、左右キーで列の間を移動できます。背景が欲しいときは、パネルやナインパッチレクトをコンテナより前（一覧で上）に置きます。

ボタンの動作を設定する

ボタンを選ぶと、インスペクターの先頭に動作付きボタンの設定が並びます。設定は3 つのきっかけごとに分かれています。

きっかけ	いつ起きるか	選べる動作
決定したとき	クリックしたとき、またはフォーカス中に決定の入力（既定は A）	なし / ステートを実行 / メニューを開く / メニューを閉じる
フォーカスしたとき	キー・ゲームパッドで移ってきたとき、最初のフォーカス、マウスを乗せたとき	なし / ステートを実行
キャンセルしたとき	フォーカス中にキャンセルの入力（既定は B）	なし / ステートを実行 / メニューを閉じる

きっかけごとに「鳴らすサウンド」も選べます。決定音・カーソル音・キャンセル音に使います。カーソル音（フォーカスしたとき）は、メニューを開いた瞬間の最初のフォーカスと、メニューを閉じてフォーカスが戻ったときには鳴りません。

ステートを実行

指定したオブジェクトのステートを開始します。メニューの動作の大部分はこれで作ります。

• 「相手の指定方法」で、相手の選び方を決めます。
  • シーン内のノード: 同じメニューに置いたオブジェクト（管理オブジェクトなど）を「対象ノード」で選びます。
  • オブジェクト: 「対象オブジェクト」の「一覧」ボタンからプロジェクトのオブジェクトを選び、「範囲」で単体 / 全体を選びます。プレイヤーなど、マップ側にいるオブジェクトを動かしたいときに使います。
• 「実行するステート」で、相手のステートを選びます。候補は相手のビジュアルスクリプトの本流レイヤーのステートです。

ステートは名前ではなく内部の ID で覚えています。あとから別のステートを足したり消したりしても、指定がずれることはありません。指定したステートを消すと、インスペクターに警告が出ます。

メニューを開く

「開くメニュー」に指定したメニューシーンを開きます（「一覧」ボタンを押すと、メニューの一覧から選べます）。ビジュアルスクリプトの「メニューシーンを表示(OpenMenu)」と同じく、スライドやフェードの演出を付けられます。

• 今のメニューを閉じる: 新しいメニューを開くと同時に、ボタンが置かれているメニューを閉じます。メニューを切り替えたいときに使います（メニューの中に置いたボタンでだけ出ます）。
• 一時停止する: メニューを開く前にゲームを一時停止します（後述の「一時停止」を参照）。
• メニューが全部閉じたら自動で解除: 「一時停止する」をオンにしたときに出ます。既定はオンです。

メニューを閉じる

• 「閉じるメニュー」で、自分が属するメニュー（ボタンが置かれているメニュー）か、最後に開いたメニューを選びます。HUD に置いたボタンでは「最後に開いたメニュー」だけが選べます。
• 「一時停止を解除する」をオンにすると、閉じたあとにゲームを再開します。

メニュー A からメニュー B を開いて B を閉じると、A の押したボタンへフォーカスが戻ります。 キーやゲームパッドの操作をそのまま続けられます。

フォーカスと入力の設定

フォーカスの設定

項目	既定	内容
最初にフォーカスする	オフ	メニューが開いたときに、このボタンにフォーカスを当てます。1 画面に 1 つだけオンにしてください。キーやゲームパッドの操作はこのボタンから始まります
マウスを乗せたらフォーカス	オン	マウスを乗せるとフォーカスが移り、「フォーカスしたとき」の動作が行われます
初期フォーカスでも動作を実行	オン	最初のフォーカスでも「フォーカスしたとき」の動作を行います。メニューを開いた瞬間に 1 項目めの説明を出したいときに使います
端で折り返す	オフ	縦並び・横並びの最後の項目で下（右）を押すと先頭へ、先頭で上（左）を押すと最後へ移ります

「最初にフォーカスする」がどれもオフだと、メニューを開いてもキーやゲームパッドで操作を始められません（マウスなら押せます）。複数のボタンでオンにすると、インスペクターに警告が出ます。

「端で折り返す」は、使う画面のボタンでだけオンにしてください。縦並びの下に、並びとは別の「戻る」ボタンを置いた画面でオンにすると、下を押しても「戻る」へ行かずに先頭へ戻ってしまいます。

決定・キャンセルの入力

項目	既定	内容
決定の入力	空欄（プロジェクト設定に従う）	フォーカス中に決定とみなす入力アクション
キャンセルの入力	空欄（プロジェクト設定に従う）	フォーカス中にキャンセルとみなす入力アクション

空欄のときは、プロジェクト設定の actg/ui/button_accept_action（既定は A）と actg/ui/button_cancel_action（既定は B）が使われます。入力設定ウィザードの既定では、A は Z キーとゲームパッドの A ボタン、B は X キーとゲームパッドの B ボタンに割り当てられています。

Enter キーと Space キーでは決定されません。 ゲーム中のジャンプなどにも使われるキーで、意図せずボタンが決定されるのを防ぐためです。Enter / Space でも決定したい場合は、「決定の入力」に ui_accept を選んでください。指定した入力アクションがプロジェクトから消えている場合は、警告を出したうえで Enter / Space と Escape に切り替わります。

メニューの動作をビジュアルスクリプトで作る（管理オブジェクト）

ボタンの「ステートを実行」は、メニューの中に置いたオブジェクトのステートを呼ぶのが基本の形です。

1. Area2DGameObject などのオブジェクトを 1 つ作り、メニューを管理するビジュアルスクリプトを持たせます（以下「管理オブジェクト」）。
2. メニューの CanvasLayer の「＋」から「オブジェクトを選ぶ…」で、管理オブジェクトを置きます。
3. 管理オブジェクトのビジュアルスクリプトに、ボタンから呼ぶステートを作ります（「ステージ 1 の説明を出す」「ステージ 1 へ進む」など）。
4. 各ボタンの「相手の指定方法」を「シーン内のノード」にし、「対象ノード」に管理オブジェクト、「実行するステート」にそのステートを選びます。

説明文や画像の切り替えは、管理オブジェクトのステートで「プロパティを変更」を使い、ラベルの文字や画像の表示・非表示を変えるのが手軽です。

組み合わせ例

ポーズメニュー

1. ポーズメニュー用のメニューを作り、「再開」「タイトルへ」などのボタンを縦並びに入れます。
2. 「再開」のボタンに次を設定します。
   • 決定したとき: 動作「メニューを閉じる」、閉じるメニュー「自分が属するメニュー」、「一時停止を解除する」をオン
   • 「最初にフォーカスする」をオン
3. 各ボタンの「キャンセルしたとき」も、「再開」と同じく「メニューを閉じる」＋「一時停止を解除する」にしておくと、どのボタンにいても B で戻れます（複数選択してまとめて設定できます）。
4. ゲーム側でポーズメニューを開きます。
   • プレイヤーのビジュアルスクリプトから開く場合: ポーズの入力で遷移するステートに「メニューシーンを表示(OpenMenu)」を置き、「一時停止する」をオンにします。
   • HUD のボタンから開く場合: 決定したときの動作を「メニューを開く」にし、「一時停止する」をオンにします。

ステージセレクト

1. ステージの数だけボタンを並べます（上の「縦と横を組み合わせる」の形が使えます）。
2. 説明文のラベルやプレビュー画像と、管理オブジェクトを置きます。
3. 各ボタンに次を設定します。
   • フォーカスしたとき: 「ステートを実行」で、管理オブジェクトの「ステージ N の説明を出す」ステート
   • 決定したとき: 「ステートを実行」で、管理オブジェクトの「ステージ N へ進む」ステート（そのステートでシーンを移動します）
4. 1 つ目のボタンだけ「最初にフォーカスする」をオンにします。「初期フォーカスでも動作を実行」がオンなら、開いた瞬間に 1 つ目の説明が出ます。

メニューから別のメニューへ

• 重ねて開く（オプション画面を開いて、閉じたら元へ戻る）: 決定したときを「メニューを開く」にするだけです。開いた側の「戻る」ボタンを「メニューを閉じる」（自分が属するメニュー）にすると、閉じたときに元のメニューのボタンへフォーカスが戻ります。
• 切り替える（タイトル → ステージセレクトのように、元の画面は要らない）: 「メニューを開く」で「今のメニューを閉じる」をオンにします。新しいメニューを先に開いてから、元のメニューを閉じます。
• 一時停止中に重ねて開いたメニューも動きます。切り替えても一時停止は続きます。

マウス操作のゲームで HUD にボタンを置く

マップの UI レイヤーの「＋」から「ボタン」「画像ボタン」を置けます。HUD に置いたボタンは、ゲーム中のキー（Space など）で決定されないよう、フォーカスを持たない設定で置かれます（フォーカス →「モード」が「なし」）。マウスのクリックでだけ反応します。

「クリックで攻撃」のように、マウス入力の条件で動くオブジェクトがいる場合、そのままではボタンを押したクリックで攻撃も出てしまいます。 マウス操作の条件で「ボタンの上では成立しない」をオンにすると、カーソルがボタンの上にある間はその条件が成立しなくなります。

一時停止

「メニューを開く」（ボタン・ビジュアルスクリプトのアクションの両方）の「一時停止する」をオンにすると、メニューを開く前にゲームを一時停止します。

対象	一時停止中
ゲームシーンのオブジェクト・物理・カメラ・エフェクト	止まります
マップの UI レイヤー（HUD）のボタン	止まります
開いているメニューと、一時停止中に開いたメニュー（中のボタン・管理オブジェクト）	動きます
メニューの開閉の演出	動きます
BGM・効果音	流れ続けます

解除の方法は次の 3 つです。

• ボタンの「一時停止を解除する」（決定したとき・キャンセルしたとき）
• ビジュアルスクリプトの「メニューを非表示(CloseMenu)」の「一時停止を解除する」
• 表示中のメニューが 0 個になったときの自動解除（「メニューが全部閉じたら自動で解除」がオンのとき）

HUD のボタンも止まるので、HUD だけで「一時停止 / 再開」を切り替えることはできません。 再開するボタンは、開いたメニューの側に置いてください。

止める範囲を自分で選びたい場合（背景のアニメは動かしたまま、キャラクターだけ止めるなど）は、一時停止を使わずに、メニューを開くステートでスイッチを ON にし、止めたいオブジェクトの遷移条件に「スイッチが OFF」を入れる組み方もできます。

注意点

• ボタンを 1 つずつ動かせないのはコンテナの仕様です。 位置を変えるときはコンテナを動かしてください。
• 「最初にフォーカスする」は 1 画面に 1 つだけオンにしてください。どれもオフだと、キーやゲームパッドで操作を始められません。
• 決定・キャンセルは Enter / Space / Escape ではなく、既定では A / B（Z / X キー）です。 変えたいときは「決定の入力」「キャンセルの入力」か、プロジェクト設定を変更します。
• ボタンの決定と同じ入力を、ほかのオブジェクトの「入力に関する条件」でも見ていると、両方が反応します。 メニューを開いている間は一時停止するか、スイッチでほかのオブジェクトの動きを止めてください。
• メニューの開閉の演出中は、ボタンは反応しません。
• 「ステートを実行」の相手が「オブジェクト」で範囲が「単体」のときは、同じオブジェクトが複数いると、そのうちの 1 体だけが動きます。特定の 1 体を動かしたいときは、「シーン内のノード」で指定してください。
• テキスト表示・画像表示の表示物はクリックを通すので、表示中でも裏にあるボタンを押せます。押させたくないときは、ボタンを隠すか「無効」にしてください（「プロパティを変更」で切り替えられます）。
• 既に置いてある Godot 標準の Button / TextureButton は、動作付きボタンにはなりません。動作を付けたいときは、メニューの「＋」から「ボタン」「画像ボタン」を置き直してください。