mieki256's diary



2019/08/10() [n年前の日記]

#2 [godot] Godot Engine で Hello World

Godot Engine を試用中なのだけど、簡単な2Dゲームを作成するチュートリアル記事について、一通り試して動作したので、忘れないうちに手順をメモしておこうかと。環境は Windows10 x64 + Godot 3.1.1 x86。

まずは、Hello World からやってみる。

英語が読める人は以下のドキュメントを眺めれば良いかと。

_Scripting - Godot Engine latest documentation
_Your first game - Godot Engine latest documentation

作るもの。 :

以下のような画面を作る。

godot_helloworld_ss_36.gif

プロジェクトを新規作成。 :

まずは、プロジェクトを新規作成。

Godot Engine を起動すると、プロジェクトマネージャが開くので、右のほうにある「新規プロジェクト」をクリック。
godot_helloworld_ss_01.png

新規プロジェクト名や保存場所を尋ねられるので、それぞれ指定して、「作成して編集」をクリック。
godot_helloworld_ss_02.png

新規プロジェクトが作られて、編集画面が開いた。
godot_helloworld_ss_03.png

今回は2Dゲームっぽい感じで Hello World をしたいので、上のほうにある「2D」をクリック。いかにもな2D編集画面に切り替わる。
godot_helloworld_ss_04.png

プロジェクトの画面サイズを指定。 :

作成したプロジェクトの画面サイズ、というかウインドウサイズを、作業前に設定しておきたい。

左上のメニューの中から、プロジェクト → プロジェクト設定、を選択。
godot_helloworld_ss_05.png

プロジェクト設定ウインドウが開いた。左のほうの、Display → Window、を選択して、右のほうの、Width(横幅)と Height(縦幅) の値を変更。設定が終わったら下のほうにある「閉じる」をクリック。
godot_helloworld_ss_06.png

編集画面内、ウインドウサイズ(青い線)の位置が変わった。変更内容が反映された。
godot_helloworld_ss_07.png

ノードを追加。 :

Godot Engine は、Scene(シーン)だの、Node(ノード)だのと呼ぶ何かで、画面に表示されるアレコレその他を追加・管理するらしい。おそらく、その Scene だの Node とやらは、いわゆるオブジェクトだのクラスだの、そういうアレに近い存在なのかなと…。

ひとまず、Panelノードを置いてから、その子供として Label や Button を置いていきたい。

左のほうのシーンタブをクリックしてから、すぐ下の「+」ボタンをクリック。これでノードが追加できるらしい。
godot_helloworld_ss_08.png

ノードの新規作成画面が開いた。検索欄に「panel」と打ち込むと、下のほうに選べるノードの種類が表示される。「Panel」を選んで、下のほうの「作成」をクリック。
godot_helloworld_ss_09.png

Panel が追加された。編集画面のほうにも、黒い何かが表示されている。これが Panel。
godot_helloworld_ss_10.png

Panel の子供として、Label を追加したい。Panel をクリックして選択状態にしてから、また「+」ボタンをクリック。
godot_helloworld_ss_11.png

「label」で検索して、「Label」を作成。
godot_helloworld_ss_12.png

Panel の子供として、Label が追加された。更に、Panel の子供として、Button も追加する。Panel を選択した状態で、「+」をクリック。
godot_helloworld_ss_13.png

「button」で検索して、「Button」を作成。
godot_helloworld_ss_14.png

Panel の子供として、Label と Button が並んだ状態になった。
godot_helloworld_ss_15.png

ノードを設定。 :

Panel、Label、Button について、大きさ、位置、表示テキストを設定していきたい。

まずは、Panel を、画面全体に表示したい。Panel を選択すると、上のほうに「レイアウト」というメニューボタンが表示されるのでクリック。その中から、「Full Rect」を選ぶ。
godot_helloworld_ss_16.png

Panel が画面全体を覆う大きさに調整された。
godot_helloworld_ss_17.png

こんな感じで、「レイアウト」メニューから色々選ぶと、ざっくりとした感じで位置やサイズを調整してくれる。

Label の位置や、表示テキストを変更したい。Label を選択してから、編集画面内でドラッグしてやると、表示位置を変えられる。また、右側の「インスペクタ」内で、Text の内容を変更すれば、そこで指定した文字列が表示される。
godot_helloworld_ss_18.png

同様に、Button の表示位置や、表示テキストも変更する。
godot_helloworld_ss_19.png

シーンを保存。 :

シーンとして一旦保存する。左上のメニューから、シーン → 名前をつけてシーンを保存、を選ぶ。
godot_helloworld_ss_20.png

保存シーン名を尋ねてくるので、今回は sayhello.tscn を指定して保存。
godot_helloworld_ss_21.png

左下のあたりの「ファイルシステム」内に、sayhello.tscn が増えた。
godot_helloworld_ss_22.png

シーンを実行。 :

現在編集中のシーンを実行して、見た目がどうなるかを確認したい。

画面右上のあたりに、再生ボタンっぽいアイコンがいくつか並んでいるので、その中の「シーンを実行」をクリック。もしくは、F6キーでも実行できる。
godot_helloworld_ss_23.png

別ウインドウが開いて、設定した通りに、Panel、Label、Button が表示された。
godot_helloworld_ss_24.png

しかし、この状態では、単に表示しているだけで、ボタンをクリックしても何も起きない。

ボタンをクリックしたら何かが起きるようにしたい。その場合は、スクリプトを書く。

スクリプトを追加。 :

スクリプトを追加して、ボタンが押された時の処理を書いていきたい。まずはスクリプトファイルを追加する。

Panel を選択した状態で、少し右上の、巻物っぽいボタンをクリック。これでスクリプトが追加される。
godot_helloworld_ss_25.png

あるいは、Panel を右クリックして、「スクリプトをアタッチ」を選んでも、スクリプトを追加できる。
godot_helloworld_ss_26.png

スクリプトを追加するためのウインドウが開く。スクリプトの言語種類・その他が選べるけれど、今回はデフォルトのまま、「作成」をクリック。
godot_helloworld_ss_27.png

スクリプトが追加されて、いかにもなエディタ画面になった。左側のシーンタブの中でも、Panel の横に巻物っぽいアイコンが増えて、このノードはスクリプトを持っている、ということが分かる。スクリプトを編集したい時は、この巻物っぽいアイコンをクリックしてやれば、このエディタ画面を開ける。
godot_helloworld_ss_28.png

ボタンが押された際の信号を受け取る。 :

各ノードは、状態が変わった時に、何かしらのイベント発生させる。例えば Button は、押されたときに pressed() という種類のイベントが発生するように作られている。

なので、「Button が押されて pressed() が発生したら、スクリプトの中のこの関数を呼びなさい」と設定しておけば、後はスクリプトを編集することで、Button が押された際にするべき処理を追加していける。

その、「〜のイベント(信号?)が発生したら、この関数を呼びなさい」的設定を、Godot では「接続」と呼んでいるっぽい。

ということで、Button の pressed() を接続する。シーンタブの中で Button を選択してから、右側のノードタブをクリック。一覧の中の、pressed() を選択して、下のほうにある「接続」をクリック。
godot_helloworld_ss_29.png

「シグナルの接続」ウインドウが開く。今回は Panel のスクリプトに接続したいので、Panel を選択してから、「接続」をクリック。
godot_helloworld_ss_30.png

スクリプトの中に、「_on_Button_pressed()」という関数が追加された。この中に、Button が押された時の処理を書けばいい。
godot_helloworld_ss_31.png

Button が押されたら、Label の表示テキストを変更してみる。以下のように記述。
godot_helloworld_ss_32.png
  get_node("Label").text = "HELLO!"
「Label」という名前のノードを取得して、そのノードの text プロパティを、"HELLO!" に変更する、という処理を追加している。

プロジェクトのメインシーンを設定。 :

画面右上の再生ボタンをクリック、もしくは、F5キーを押すことで、プロジェクトを実行して動作確認することができる。
godot_helloworld_ss_33.png

初回時は、メインとなるシーンが設定されていないので、どのシーンをメインにするのか尋ねるウインドウが開く。
godot_helloworld_ss_34.png

今回は、sayhello.tscn をメインシーンとして選ぶ。
godot_helloworld_ss_35.png

結果画面。 :

プロジェクトを実行した結果は以下の通り。ボタンをクリックすると、ラベルの表示テキストも変更されていることが分かる。

godot_helloworld_ss_36.gif

以上です。

過去ログ表示

Prev - 2019/08 - Next
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

カテゴリで表示

検索機能は Namazu for hns で提供されています。(詳細指定/ヘルプ


注意: 現在使用の日記自動生成システムは Version 2.19.6 です。
公開されている日記自動生成システムは Version 2.19.5 です。

Powered by hns-2.19.6, HyperNikkiSystem Project