俺に解るように説明する "Godot Engine 3.x" 入門+

ゲームエンジン Godot Engine に関すること。入門とか使い方とかチュートリアルとか、あれとかこれとか。日本語解説。

"Godot Engine" エアホッケー Part6 やっとスタート画面らしきものが...UI

長かった準備…やっとスタート画面らしきものが…。

2Dエディタ上では、こんな感じになるようノードを配置していく。

f:id:ore2wakaru:20170810175936p:plain

シーンパネルではこんな感じ。

f:id:ore2wakaru:20170810203103p:plain

A ルートノードを追加

[A]. シーンの最上位は、1つしか作れない。また、階層(親子)の移動が出来なかったり、削除が厳しい(全部消えちゃう)という制限があるので、シーン全体の特徴(このシーンで何をしたいのか)を考えて選ぶ。ゲームを何個か作っていくと、何がふさわしいのか分かってくる。慣れ。

今回は、単なる階下層の入れ物的な役割をしてもらう為、タイプとして「Node」を選んでみた。もちろん「Control」とか、他のでもいい。後で変えたくなったら、右クリメニューから “Change Type” で何とか出来る。

B ノード配置用のバックグラウンド

f:id:ore2wakaru:20170731225535p:plain

[B]. 上の画像は、以前作ったイメージ画像(1024 x 600)。実際に作るゲームのゲーム画面と同じ大きさ。各ノードを2Dエディタ上で配置しやすいように、こいつをバックグラウンドにする。位置決め用。

ぶっちゃけ、これから作るゲームはしょぼいゲームなので、適当に UI を置けばいいのだけれど、一応、全体のバランスを考えてみたい時にやる感じ。

  1. ファイルシステムドラッグ&ドロップで直接追加出来ないみたいなので、外部フォントを入れた時と同様、エクスプローラーでプロジェクトフォルダに追加。2、3秒待つとファイルシステムの方で認識される。
  2. 2Dエディタにドラッグ&ドロップ。これはラクチン。「Sprite」ノードとして追加される。
  3. インスペクターから、「Offset > Centered > チェックオフ」、「Transform > Position > (0, 0)」にして、画面にぴったり合うように調整。

f:id:ore2wakaru:20170810185855p:plain

シーンパネルで、このノードの名前の右横にある目玉のアイコンをオン・オフして表示・非表示を切り替えながら、以下のノードの位置を決めていく。最終的にはいらなくなるので、終わったらこのノードは削除していい。残しておきたい場合は、目玉オフ。

f:id:ore2wakaru:20170810193429p:plain

C D E 画面の左側

f:id:ore2wakaru:20170810195243p:plain

特に問題ない感じか。「Label」ノードはお馴染み、文字の表示用ノード。「Button」ノードは、クリックできるボタン。後にスクリプトを付け、ボタンを押すことでシーンを追加したり消したり出来るようにする為のもの。位置や、大きさなどの簡単な設定をするだけなので、各プロパティーだけ。

[C]. Label

  1. 「Text」 お好きなタイトルを。
  2. 「Align > Center」 テキストのセンタリング。
  3. 「Rect > Position > (56, 50)」 開始位置。
  4. 「Rect > Size > (400, 200)」 サイズ。
  5. 「Custom Fonts」 お好きなフォントを追加。追加の仕方は、エアホッケーのPart3。
  6. DynamicFont 「Settings > Size > 60」 大きくしてみました。

[D]. Button

  1. 「Text > START」 Labelノード同様、テキストも入力して表示できる。
  2. 「Rect > Position > (156, 370)」 開始位置。
  3. 「Rect > Size > (200, 60)」 サイズ。
  4. 「Custom Fonts」 お好きなフォントを追加。Button ノードにもカスタムフォントが使える。
  5. DynamicFont 「Settings > Size > 30」 タイトルよりは小さくしてみました。

[E]. Label2

  1. 「Text」 お好きな内容で。
  2. 「Align > Center」 右寄せ(Right)でも、左寄せ(Left)でも、お好きに。
  3. 「Rect > Position > (56, 550)」 開始位置。
  4. 「Rect > Size > (400, 30)」 サイズ。
  5. 「Custom Fonts」 お好きなフォントを追加。
  6. DynamicFont 「Settings > Size > 16」 デフォルトのままにしてみました。
F G H I 画面の右側

ゲームの遊び方を説明する的な感じのもの。「VBoxContainer」と「MargineContainer」が目新しい。ベタにLabel を貼り付けてもいいのだが、デザインが自動的にキレイな配置になるノードがある。コンテナと言う。単体では意味がないが、子ノードに対して作用する。

「VBoxContainer」: 子ノードを垂直に配置する。V:Vertical(発:バーティカル、意:垂直の)。

「MargineContainer」: 子ノードを配置する時に、マージン(余白)を強制的に入れる。

f:id:ore2wakaru:20170810212722p:plain

[F]. VBoxContainer

  1. 「Rect > Position > (600, 70)」 開始位置。
  2. 「Rect > Size > (336, 336)」 サイズ。
  3. 「Custom Constants > Separation > 20」 子ノード間(今回はGとH)の隙間の大きさを決める。

[G]. Label

  1. 「Text > 説明:」
  2. 「Custom Fonts」 お好きなフォントを追加。
  3. DynamicFont 「Settings > Size > 25」
  4. ポジションやサイズは自動で決まるので、手動入力しても戻されます。

[H]. MarginContainer

  1. 「Custom Constants > Margine Left > 25」 左側に余白を開けます。

[I]. Label

1.テキスト内容、フォントの大きさ、いろいろお好きにどうぞ。



「Label」、「Button」、「VBoxContainer」、「MargineContainer」、共通の設定項目がいくつもある。緑アイコンの UI 関係のノードであるからだ。設定項目をまとめて覚えるいい機会だと思う。

試しにシーンの再生

ここまで出来たら、ゲームを実行したときにどう見えるか確認したい。右上にあるツールの、シーンを表すアイコン、ココ、を押してみよう。これで、現在編集中のシーンを再生できる。これは、ゲームの一部分とか、途中の場面とかの確認に最適。

f:id:ore2wakaru:20170810221847p:plain

  1. ゲーム全体を再生する時。メインシーンの設定が必要。メインシーンとは、ゲームを実行する時に一番最初に画面に出るシーンのこと。
  2. 一時停止。
  3. 停止。再生を抜ける。
  4. 現在編集中のシーンの再生。ゲームの最初から再生させるのではなく。今、編集しているシーンだけ、見ることが出来る。
  5. シーンを選んで再生。

まだ、メインシーンの設定をしていないので、[1] を押すと、こんなのが出る。

f:id:ore2wakaru:20170810223105p:plain

[Select] から、メインシーンを選ぶと、そこがメインシーンとなる。メインシーンは後から変えられるので、やってしまっても問題はない。

停止させたい時は、出てきた窓の [x] で消すか。[3] のアイコンを押す。

再生画面はどうだろうか?

まんま、一番上の画像と同じだぜ。ボタンがマウスで押せる。ポチポチ。ちょっとだけ楽しい。

次からは、ボタンを押したとき、ゲーム画面に移動するようにしていきたい。

あ、パックが動いてないか。外枠も見えてないな。・・・・・・まだ、先は長そうだ。