「シーン」に画像を描写する「ノード」を追加してみよう
続いて、ノードの操作についてより深く学んでみましょう。
複数のノードを配置したときに、位置関係はどうなるのでしょうか？実際に試してみましょう。
今回はただの四角形ではない画像を配置してみましょう。画像を表示できる機能を持ったSprite2Dを使います。このノードは2Dの画像(スプライト)を表示する機能を持ったノードです。
1. 左側のシーン画面で、Node2Dを選択しましょう。これは、新しく追加されるノードは選択したノードを親とする「子ノード」として配置されてしまうためです。「子ノード」とは、親となるノードに付属するノードとなります。ジェットコースターの例でいうと、車体の中にある車輪や椅子のより小さなパーツが子ノードです。今回新しく設定するSprite2DはColorRectの付属品ではない独立したものとしたいので、Node2Dを選択した状態とします。
2. Node2Dを選択した状態で左上の＋ボタン(子ノードを追加)を押します。
3. 上部の検索バーでSpriteと入力し、Sprite2Dというノードを選択します。
4. 「作成」ボタンを押します。左上の画面にはSprite2Dというものが表示されました・・・が、他は何も変化はないようです。これは、「どの画像を表示するか？」という情報が設定されていないからです。
5. 左で選んで、右で設定していきましょう。左の画面でSprite2Dを選択し、右の画面、インスペクターを見てください。
6. 今回設定する表示画像を決めるプロパティは一番上の「テクスチャ」です。
「テクスチャ」とは、ゲームの中の物体に貼る模様やシールのようなものです。
7. テクスチャの横にある<空>を選択してください。たくさんの選択項目がでてきますが、一番下の「読み込む」ボタンを押してください。
8. 以下のようなファイル選択ウィンドウが開きます。AGMakerというフォルダと、icon.svgという画像だけ表示されているはずです。この2つはACTION GAME MAKERでプロジェクトを作成したときに自動で生成されるものです。
なお、ここに表示されているものと、画面左下の「ファイルシステム」に表示されているものは同じです。test_scene.tscnが表示されていませんが、それは画像とは関係がないファイルのためフィルターで除外されているためです。
Godot Engineでは、この「ファイルシステム」の中にある素材しか利用できません。パソコンの中にあるものを直接選択して利用することはできないのです。素材を扱うためには、遊園地の建設予定地(プロジェクト)の倉庫(ファイルシステム)に一度運び込む必要があります。
9. まずは、既に倉庫にあるicon.svgを選択してください。水色の四角形の左上、赤い線と緑の線が交わる部分にアイコンが表示されるはずです。これで、Sprite2Dというノードに、アイコンの画像をシールとして貼り付けることができました。
