「タイル」を設定してみよう
それでは、足場の作成に入りましょう。
地面と、ジャンプして乗る空中の足場などがほしいですね。足場を作るために使うノードは色々ありますが、今回は広い範囲で色々な形の足場を作ることになりますから、それに適したノードを使っていくことが必要です。
今回は、「タイル」形式で作成しましょう。「タイル」とはその名の通りタイルのような小さな画像を敷き詰めることで足場をつくっていく形式です。
タイルの画像をファイルシステムに読み込もう
タイルはまずは以下の画像を使ってみましょう。
画像を右クリックしてダウンロードしてください。
第一章で解説した通り、Godot Engineでは、素材を扱うためには「ファイルシステム」という倉庫に一度いれる必要があります。ファイルシステムに取り込む方法は、エディター上に素材をドラッグ＆ドロップするだけです。
1. 画像をダウンロードしたPCのフォルダを開いた状態にしておきましょう。
2. エディターを開き、左下の「ファイルシステム」でres://をクリックして選択した状態にしてください。素材は、選択したフォルダの中に取り込まれるためです。
3. PCのフォルダからエディター上の好きなところに、tile.pngをドラッグ＆ドロップしてください。
どのレイヤーにタイルを配置するか決めよう。
続いて、どのレイヤーにタイルを敷いていくのかですがBaseLayerを使っていきましょう。BaseLayerは、基本となるレイヤーとしてプリセットで設定されており、それより奥のレイヤーは背景として設定されています。
BaseLayerをみると、すでにBase, BaseDecoration, BaseCoverの3つのノードが配置されています。
これらのノードは、タイルを扱うためのノード、TileMapLayerノードの名前を変えただけのものです。
なぜ同じノードが名前を変えて3つも存在するのか？というと、**タイルを重ねることで奥行きを表現するために存在しています。**例えば、地面となるタイルの上に、装飾として装飾を重ねて置きたいとします。このとき、レイヤーが1つしかないと、地面のタイルが松明に置き換わってしまって重ねることができませんが、レイヤーの数だけ重ねて配置することができ、奥行きを表現することができます。
今回は、Baseという名前のTileMapLayerを使ってタイルを配置してみましょう。Baseを選択してみてください。
下から「タイル配置」というウィンドウが現れましたが、何やら英文が書かれています。ここには、「タイルセットがありません、インスペクターでタイルセットをつくってください」という事が書かれています。
「タイルセット」を作ろう
タイルセットとはなにかというと、このTileMapLayerノードで取り扱うタイルがどのような大きさで、どのような形をしているのか、キャラクターとぶつかるかどうか、といった基本情報を設定するものです。
先ほどタイル用に用意した画像は高さ48x48の四角形で、キャラクターの足場となるためキャラクターとぶつかるタイルです。それに合う形でタイルセットを作りましょう。
1. インスペクターの**タイルセットの<空>をクリックして、「新規タイル設定」**を選びます。
2. タイル設定の中身が編集できますので、以下のように設定します。
タイルの形：Square
タイルサイズ：x = 48px, y = 48px
3. 物理レイヤーを展開し、[+要素を追加]ボタンを押します。
4. コリジョンレイヤー/コリジョンマスクという項目がでますが特に変更は必要ありません、最終的に以下の状態になっていればタイルセットの設定は完成です。
補足：コリジョンレイヤーとコリジョンマスクについて
Godotでは、ノード同士がぶつかることができる、できない、をこの項目で設定します。コリジョンレイヤーとは、所属するグループを示し、コリジョンマスクはどのグループとぶつかりたいか、を設定します。
詳しくは次の第三章で紹介します。
「タイル設定」をしよう。
タイルセットの作成が終わると、下部のウィンドウにでているメッセージが「TileSet」のソースがないというメッセージに変わりました。これは、タイルに使う画像が設定されていないので配置できません、という意味になります。
次は、タイルの画像に先ほどのtile.pngを設定し、タイルに衝突の形(壁判定)をポリゴンで設定する必要があります。
1. 最下部にあるタブを**「タイル配置」から「タイル設定」に**切り替えます。
2.ファイルシステムウィンドウのtile.pngを「タイル設定」ウィンドウの左にある黒い枠の中にドラッグ＆ドロップで入れ込みましょう。
3. 新しいウィンドウが立ち上がります。このタイルセットは48pxの正方形なので**、タイルサイズ項目をx:48 y:48にして「はい」**を押しましょう。
補足：アトラスとは？
アトラスとは、様々な種類の画像をまとめて1枚の大きな画像ファイルとしたものです。ゲームエンジンでは、効率良く画像を表示するために、大きな画像ファイルの一部だけを切り出して表示する仕組みがあります。今回のタイルは1種類だけなのでアトラス化は不要ですが、床、壁、空中、坂など様々な形状のタイルを同時に扱いたい場合、１つの大きな画像にまとめることで、複数の小さな画像を扱うよりも効率的に表示をすることができます。
4. 続いて、**オートタイルとして読み込みますか？**というウィンドウが開きます。
ACTION GAME MAKERでは特定の形式で並べられたアトラスをオートタイルという、配置や繋がり方に合わせて自動で表示するタイルを変える仕組みを用意していますが、今回はタイルが1つだけなので使用できません、「いいえ」を押してください。
5. タイル設定が以下の表示になっていれば成功です。続いて、壁判定の形をつくります。
6. タイル設定ウィンドウの中央上部の**「選択」をクリックしてタブを切り替えます。**このタブは、選んだタイルの詳細な設定を行うタブです。
7. ウィンドウ右側に表示されているタイルをクリックしてください。「選択」タブの下部がインスペクターのような表示に変わります。
8. 選択タブをスクロールして、**一番下にある「物理」＞Physics Layer 0を開きます。**Physics Layer 0は先ほどタイル設定で作成した物理レイヤーのことです。
9. ここからは、壁判定をポリゴンツールで描写していきます。**□に+のついたアイコン（ポリゴンツールを追加）**をクリックしてください。これは、ポリゴンを描写するための頂点を追加するツールです。ポリゴンとは、点で囲むことで図形を描写するシステムです。
10. 選択できたら、緑の四角形の右上の角をクリックしてください。ポリゴンの頂点を示す◇が表示されるはずです。
11. 同様に、右下、左下、左上と時計回りに四隅に点を追加していきましょう。
12. 最後に右上の追加済の点をもう一度クリックすると、緑色のタイルがオレンジになるはずです。これは、頂点で囲まれた領域＝タイル全体が壁判定となった、ということを示しています。
トラブルの対処法
頂点の位置がズレてしまった場合：□に矢印アイコンのツール（ポイントツールの編集）を使うことで点を動かすことができます。
余計な頂点をつくってしまって五角形になってしまった場合：□に✕印のツール(ポイントツールの削除) を使うことで点を消すことができます。
