【Godot Engine 2Dゲーム制作 Part3】タイトル画面を作ってBGMを追加しよう！

Godot Engine 2Dゲーム開発入門　第5回

　この連載は、Godot Engineでのゲーム開発を始めて、簡単なミニゲームを作るまでを、順を追ってたどるものです。前回は、オリジナルの迷路ゲームの核となる画面を作りました。今回はタイトル画面を作り、タイトル画面とゲーム画面を遷移させます。また、遷移時の演出も加え、さらにBGMも鳴らします。

タイトル画面を作ろう

　よくあるゲームのタイトル画面は、1枚絵にスタートボタンなどのボタンが表示されています。そうしたシンプルなタイトル画面を作ります。

　トップメニューの「シーン」＞「新規シーン」で、新しいシーンを作ります。

　ルートノードは「CanvasLayer」にして名前を「Title」に変更します。「Ctrl+S」で保存するパスはres://scn/title/title.tscnとします。

　ゲームはこのシーンから開始しますので、title.tscnを右クリックして「メインシーンとして設定」を選択します。

　「Title」ノードに子ノードとして「TextureRect」と「Button」を追加します。配置後の状態は次のようになります。

▶ Titleシーン

• Title（CanvasLayer）
  • TextureRect
  • Button

TextureRectの設定

　「TextureRect」の「インスペクター」ドックには、次のような変更を加えます。

• 「TextureRect」
  • 「Texture」に、res://res/image/big/title.pngをドロップ。
  • 「Expand Mode」を「Ignore Size」に変更。
• 「Control」
  • 「Layout」＞「Transform」＞「Size」の「x」を「960」に、「y」を「960」に変更。
  • 「Layout」＞「Transform」＞「Position」の「y」を「-120」に変更。
• 「CanvasItem」
  • 「Texture」＞「Filter」を「Linear」に変更。

TextureRect

　「TextureRect」を利用すれば、画像の位置とサイズを指定して画面上に配置することが簡単にできます。

　また、ここで使用する画像はドット絵ではなく、高解像度の画像ですので、拡大縮小の方式である「Filter」を「Linear」に変更します。

Buttonの設定

　「Button」の「インスペクター」ドックには、次のような変更を加えます。

• 「Button」
  • 「Text」に「START」と入力。
• 「Control」
  • 「Layout」＞「Anchors Preset」を「中央下」に変更。
  • 「Layout」＞「Transform」＞「Size」の「x」を「300」に、「y」を「100」に変更。
  • 「Layout」＞「Transform」＞「Position」の「x」を「330」に、「y」を「340」に変更。
  • 「Theme Overrides」＞「Font Size」を「64」に変更。

Button

　シンプルですが、これでタイトル画面ができました。