Godot 4.7系を使い、前回作った3択の分岐ミニゲームに、背景・演出・音を追加しました。使ったのはTextureRect、AnimationPlayer、AudioStreamPlayerの3つで、いずれも今回のゲームでは初めて扱うノードです。
前回のゲームは、Panel、Label、ButtonとSignalだけで完成していました。今回はそのゲームを作り直すのではなく、同じシーンツリー、同じSignal接続、同じ結末の文章を生かしたまま、画面に合わせた背景、結果がふわっと出てくる動き、選んだ・当たった・外れたが耳でも分かる音を足していきます。
この記事も一般的な機能紹介ではなく、実際にGodotの画面を操作し、練習用の小さなシーンで1つずつノードを試してから、前回のミニゲームへ適用した記録です。制作の様子と完成版のプレイは動画にも残しています。
今回完成したゲーム
題材は前回と同じ、森の中でラスボスを探す3択ゲームです。
- タイトル画面で「スタート」を押す
- 森を背景に、「ラスボスを倒すために、どこへ向かうか」という質問と3つの進路が表示される
- 進路を選ぶと決定音が鳴り、結果画面へ切り替わる
- ラスボスを発見・討伐できれば正解音とともに結果の文章がふわっと表示される
- 王城へ戻って先を越される、または異世界で寿命を迎える結末なら不正解音とともに結果が表示される
- 「もう一度」でタイトルへ戻り、2周目でも同じ演出と音が再生される
選択肢や結末の文章は前回から変えていません。変わったのは、背景が画面のサイズに合わせて表示されること、結果の文字がただ表示されるのではなく動きを伴って現れること、ボタン操作と結果が音でも伝わることです。
使用したノードと機能
前回までに学習済みのものと、今回新しく扱ったものは次のとおりです。
これまでの仲間
Control：UI全体のルートPanel：タイトル、質問、正解、不正解の各画面Label：タイトル、質問、結果の文字表示Button：スタート、3つの進路、戻る操作Signalのpressed：ボタンが押されたことを各画面へ伝えるshowとhide：Panelの表示・非表示Sprite2D：前回の装飾版で使った背景画像
今日の新しい仲間
TextureRect：画面の大きさに合わせて背景画像を表示するAnimationPlayer：時間に沿って透明度や大きさを変化させるAudioStreamPlayer：決定音や結果音を再生する
3つの小実験で新しいノードに触れる
いきなり前回のゲームへ新しいノードを追加するのではなく、同じプロジェクトの中に練習用の短いシーンを作り、1つずつ動作を確認してから適用しました。
1. TextureRectで背景を画面いっぱいにする
左上の「シーン」から新規シーンを作り、User InterfaceでルートControlを用意します。左のシーンツリーでControlを選び、その子にTextureRectを追加しました。左下のファイルシステムにある画像を、右のインスペクターのTextureへ設定します。
ここでポイントになるのが3つの設定です。画面上部のLayoutからFull Rectを選んで親と同じ大きさにし、Expand ModeをIgnore Sizeにして画像の元サイズに縛られないようにし、Stretch ModeをKeep Aspect Coveredにして縦横比を保ったまま画面を埋めるようにしました。実行画面の比率を変えても、画像が歪まずに画面を埋めることを確認できました。
Sprite2Dも同じ画像を背景にできますが、固定サイズの画面向けです。TextureRectは、画像を「画面に合わせるための四角い枠」として扱えるところが違います。前回のSprite2Dが間違いだったわけではなく、今回は画面サイズへの追従を優先したい場面で使い分けました。
2. AnimationPlayerで文字を登場させる
Controlの子にLabelとAnimationPlayerを追加した練習シーンで試しました。AnimationPlayerのアニメーションパネルで新しいアニメーションを作り、Labelの透明度を0から1へ、大きさを少し小さい状態から通常サイズへ変化させるキーフレームを打ちます。
再生すると、文字がふわっと大きくなりながら現れました。AnimationPlayerは、開始と終了の状態を覚えさせておくと、その間を自動で補って動かしてくれるノードだと分かります。最初から複数の対象を同時に動かすのではなく、まずはLabel1つだけでキーフレームの意味を確認しました。
3. AudioStreamPlayerで音を鳴らす
Controlの子にButtonとAudioStreamPlayerを追加し、AudioStreamPlayerのStreamへ短い効果音を設定しました。エディター上で試聴して音量を確認したあと、Buttonのpressedシグナルの接続先にAudioStreamPlayerを選び、呼び出すメソッドとしてplayを選びました。
スクリプトを書かなくても、Signal接続のダイアログでメソッド一覧からplayを選ぶだけで、ボタンを押した瞬間に音が鳴るようになります。AnimationPlayerの特定のアニメーションを再生したい場合も同じ画面からplayを選び、詳細設定でアニメーション名を引数として渡せば、スクリプトなしで狙ったアニメーションを再生できました。
前回のミニゲームへ適用する
小実験で動作を確認したあと、同じ操作を前回のミニゲームへ適用しました。
まず、各PanelのSprite2Dを1つだけTextureRectへ置き換え、実行画面でウィンドウの比率を変えながらSprite2D版と見比べました。違いを確認したあと、残りのPanelも同じ手順でTextureRectへ置き換えています。
次に、小実験で作った登場アニメーションを、正解・不正解それぞれの結果Labelへ応用しました。結果画面がshowで表示された直後にAnimationPlayerが再生されるようにし、文字がただ現れるのではなく、ふわっと登場するようにしています。
最後に、3つのButton（進路選択）のpressedへ決定音、正解Panelのshowへ正解音、不正解Panelのshowへ不正解音を、それぞれ別のAudioStreamPlayerで接続しました。選んだ瞬間、当たった瞬間、外れた瞬間で違う音が鳴ることで、同じ画面切り替えでも手応えがはっきり変わりました。
仕上げに、「もう一度」でタイトルへ戻ったあとの2周目も、進路を選び直してアニメーションと音が正しく再生されることを確認しました。
実際に作って分かったこと
今回の制作で特に実感したのは、次の4点です。
1. 背景・動き・音は飾りではなく情報である
演出なしの正解画面を見せたとき、正解したのに祝われている感じが薄いと感じました。動きと音を加えると、同じ画面切り替えでも「何が起きたか」がはっきり伝わるようになります。
- 背景は場所を伝える
- 動きは見るべき場所を伝える
- 音は操作と結果を伝える
2. TextureRectとSprite2Dは使いどころが違うだけ
どちらが優れているという話ではなく、ゲーム世界の中を動く画像はSprite2D、画面の大きさに合わせたい画像はTextureRectと役割で選ぶものだと分かりました。
3. スクリプトなしでもノード同士を連携できる
Signal接続のダイアログでメソッドを選ぶだけで、Buttonを押した瞬間にAnimationPlayerやAudioStreamPlayerを動かせます。GDScriptを書かなくても、ノードの組み合わせだけでここまで表現できることに驚きました。
4. 1周目だけでなく2周目も必ず確認する
「もう一度」でタイトルへ戻ったあと、アニメーションや音が最初と同じように再生されるかは、1周目のテストだけでは見落としがちでした。最後は必ずタイトルへ戻ってから2周目も操作して確かめています。
今回使った素材のダウンロード
今回の決定音・正解音・不正解音の3つは、下記からまとめてダウンロードできます。無料でご利用いただけます。
背景に使った10種類のイラストは、以前公開した素材集ページにまとめてあります。今回のTextureRectの練習にもそのままお使いいただけます。
まとめ
Godot 4.7系で、前回のスクリプトなし分岐ミニゲームにTextureRect、AnimationPlayer、AudioStreamPlayerを追加し、背景・演出・音のあるゲームへ育てました。
今回行ったことは次のとおりです。
- 練習用シーンでTextureRect・AnimationPlayer・AudioStreamPlayerを1つずつ試す
- SpriteをTextureRectへ置き換え、画面サイズへ背景を追従させる
- 結果の文字にAnimationPlayerで登場演出を追加
- 決定音・正解音・不正解音をAudioStreamPlayerで再生
- 1周目・2周目の両方で演出と音の再生を確認
前回のゲームはそのままでも遊べるものでしたが、背景の合わせ方を覚え、動きと音を一つずつ加えると、「何が起きたか」がもっと伝わるゲームになりました。
制作の全操作と完成版のプレイは、動画で確認できます。
コメント