チュートリアル: グラフィックコース#1 背景とタイル

[GGG-Administrator]

こちらは、まずは自作の画像で色々やってみたい！という人向けのチュートリアルコースです。
このチュートリアルコースを受講する前に、

チュートリアル：入門コース

ACTION GAME MAKERの世界へようこそ！ このチュートリアルは、操作を学ぶために最初にオススメするチュートリアルです。 チュートリアル用のプロジェクトを使い、簡単なジャンプアクションを制作してみましょう。 STEP1: はじめに チュートリアルプロジェクトを読み込もう まず、ACTION GAME MAKERを起動します。 起動できたら、上部の「チュートリアル」ボタンを押…

完了することをおすすめします。

なお、このコースでは、最初のチュートリアルで利用したプロジェクトを引き続き使用しますので、削除してしまった方は改めてチュートリアル開始よりチュートリアルプロジェクトをご用意ください。

[GGG-Administrator]

STEP1: 画像をステージに追加しよう。

1. 以下のサンプル画像をダウンロードしてください。
   

2. チュートリアルプロジェクトを開きます。

3. 左下のファイルシステムウィンドウの、画像を入れたいフォルダを選択します。フォルダは右クリックメニューで新しく作成することもできます。
   

   

4. ダウンロードした先ほどの画像を、エクスプローラーからファイルシステムにドラッグ＆ドロップしてください。[ファイルシステム]の選択したフォルダの中にtest_pitcture.pngが取り込まれたはずです。
   
   なお、画像に限らず、すべての素材は一度ファイルシステムに入れてから利用することになります。

5. 任意のレイヤーを選択し、test_picture.pngをファイルシステムからステージの好きなところにドラッグ＆ドロップしましょう。
   

   

6. ステージ上に画像が表示されるはずです。png等の画像ファイルを置いた場合は、自動で[Sprite2D]という画像を扱うためのノードが生成され、そのテクスチャーとして割り当てられることになります。
   

   

7. png等の画像ファイルを置いた場合は、このように自動で[Sprite2D]という画像を扱うためのノードが生成されます。[Sprite2D]はただの画像なのでアクションをさせたりはできませんが、低負荷のためステッカーのように扱うことができます。

[GGG-Administrator]

STEP2: 背景を変えてみよう。

1. 次は設定済みの背景の画像を変えてみましょう。左側のシーンレイヤーを見てください。DistantView、MiddleView、NearViewという3つのレイヤーがあるのがわかります。この３つが背景のレイヤーです。このチュートリアルプロジェクトでは、視差背景を実現するために、背景を３つのレイヤーに分けています。
   

   

2. STEP1と同じように、それぞれのレイヤーに[Sprite2D]があることがわかります。これが、背景の画像になっています。DistantViewの[Sprite2D]を選択してみてください。右側のインスペクターウィンドウの上部にTextureという項目があります、ここが今設定されている画像です。
   

   

3. チュートリアルプロジェクトにはデフォルトで差し替え用の背景画像があるので使ってみましょう。左下のファイルシステムを見てください。templates>backgroundsを開いてください。これが各レイヤーの差し替え用の画像です。
   

   

4. 03_DistantViewを展開し、中にある[B_004_snow_03.png]を先ほどのTexture欄までドラッグ＆ドロップしましょう。
   

   

5. 背景は1つの縦長の小さな画像なのに、横長の大きな背景となりました、なぜでしょうか？それは、視差背景を作るための設定が可能な[Parallax2D]というGodot用のノードを使っているためです。各Viewノードは、この[Parallax2D]の名前を変えただけのものです。それでは中身を見てみましょう、[DistantView]ノードを選択してください。

6. インスペクターにいくつかの設定項目があることがわかりますそれぞれの項目を簡単に説明させていただきます。
   

   

項目	概要
Scroll Scale	カメラの1の移動に対してどれだけ動くかを指定します。低い値ほどキャラクターより遅れて動くため、遠くに見えます。前景などキャラクターより前の描写には1以上の値を設定します。
Scroll Offset	視差効果のオフセットを設定します、今のところは無視して問題ないでしょう。
Repeat Size	リピートのサイズを指定します、通常はテクスチャーに使った画像と同じサイズを指定します。オリジナルサイズの画像に背景を差し替える際には再設定しましょう。
Autoscroll	レイヤーが自動で指定方向に動きます、雲が左に流れる表現等ができます。この画像では、秒間3pxずつ右に動いていくよう設定されています。
Repeat Times	背景の繰り返し回数です、最初の画像位置を中心に、右、左、右、左の順で拡張されます。

試しに、これらの設定を変えてみたり、MiddleやNearの画像を差し替えてテストプレイしてみましょう。
ご自身の作成画像を使いたい場合は、STEP1.のようにファイルシステムに入れてから適用しましょう、その際はRepeat Sizeの設定が必要です。

注意
002_forestと003_caveは屋内の視差を表現するための素材になっており、そのまま適用するとNearViewがずれてしまいます。使用する際は、NearViewのNode2D>Transform>PositionのY座標を360からマイナス180に変更することでちょうどよくなります。

[GGG-Administrator]

STEP3: 新しいタイルを追加してみよう
次は、あなたのタイルを読み込むために、新しいタイルレイヤーを追加してタイルを作ってみましょう。
良いタイル素材がない・・・という方は以下のサンプルタイルを使ってください。

1. 設定用のノードを作成します。シーンウィンドウで[BaseLayer]を選択し、＋ボタンを押してください。
   

   

2. ノード選択画面が立ち上がりますので、[TileMapLayer]を選択して作成してください。検索バーにtileといれて絞り込むと探しやすいはずです。
   *似たような名称の[TileMap]がありますが、こちらは古い機能のノードなので間違えないように気をつけてください。
   

   

3. 作成されたレイヤーを選択し、インスペクター画面のTileSetよりNew TileSetを選択します。
   

   
   
   
   

4. <空>がTileSetに変わるので再度クリックして展開して設定を行いましょう。
   Tile Size: あなたの作成したタイルの1つの大きさに合わせましょう。サンプル画像は24pxです。
   その後、Physics Layersを選択し、+要素を追加しておきましょう。Physics Layersがないと壁判定を作れませんので、キャラクターがタイルに乗ることができなくなります。
   

   
   
   
   
   
   *本チュートリアルではタイルは四角形であることを前提として進めますが、Tile Shapeにてクォータービューや六角形にも変更可能です

5. 選択したら、中央下部のパネルを確認し、タイル設定に切り替えます。これはタイルの管理をするタブです。ファイルシステムから、パネルに読み込みたいタイルをドラッグ＆ドロップしましょう。
   

   
   
   
   

6. タイルの分割を設定するウィンドウが開きます。タイルサイズがあっていることを確認し、「はい」を押しましょう。
   

   

7. 続いて、オートタイルとして読み込むかどうかを選択できますが、サンプルタイルもあなたのタイルもオートタイルに適した形式ではないはずです。ここでは「いいえ」を押しましょう。オートタイルについては次のSTEPで説明します。
   

   

8. タイルが指定サイズに分割されて読み込まれたはずです。もし間違えていればゴミ箱ボタンで削除して読み込み直しましょう。次はタイルに壁判定を作ります。タブを選択(Select)に切り替えたあと、右側の画面をドラッグで全てのタイルをまとめて選択してしまいましょう。
   

   

9. タイルの設定画面が開くので、Physics>Physics Layer 0 を開きます。もし無い場合は、4.で物理レイヤーの作成を忘れていないか見直してください。
   

   

10. ポイントを追加ツールを選択して、四隅をクリックして壁判定の頂点を追加していきましょう。四隅を選択し、最後にもう一度、最初に追加した頂点を選択してポリゴンを閉じれば完成です。赤い壁判定が作成されました。
    

    
    
    
    
    
    *左上の頂点を追加する際、ズーム率を誤クリックしやすいので気をつけましょう。
    *もし頂点がずれた場合は、青い矢印のツールを選択すれば移動することができます。赤いバツ印のツールで頂点を削除することもできます。
    *もし、壁判定が正方形ではないタイルを作っている場合は、そのタイルだけを選択肢、頂点を編集して正しい形の壁判定を作りましょう。

11. パネルをタイルマップに切り替えればタイルを配置することができます、好きなタイルを選択して配置してみましょう。壁判定も設定しているので、テストプレイをすれば乗ることができるはずです。
    

    
    
    *指定通り作成していれば、このタイルはベースレイヤーの最前面に表示されます。Godotでは、シーン画面で下にあるノードほど手前に描写されます。変更したい場合は、TileMapLayerをドラッグ＆ドロップで並び順を変えてみましょう。

12. さて、オリジナルのタイルを設定することができましたが、一つ一つ設定するのは少し不便です。次のSTEPではオートタイルを試してみましょう。

[GGG-Administrator]

STEP4: オートタイル
ACTION GAME MAKERのオートタイルは、Godotの地形(Terrain)という機能を利用しています。

タイルセットの使用

この機能では、扱いやすいように、自由にオートタイルを作成することができるのですが、ACTION GAME MAKERでは、規定の形式で画像を作成した場合に自動でオートタイルとして読み込む機能を用意しています。
今回はその機能を試しましょう。

1. まず、以下のテスト用タイル画像をダウンロードしてファイルシステムに読み込んでください。
   

2. STEP3と同じ手順で、読み込みたいTileMapLayerを選択します。このサンプルは24×24のサイズです。STEP3で別のタイルサイズを使用した場合は、既存の[Base]レイヤー等を指定してください。

3. 中央下部のパネルTileSetを開いて、ファイルシステムからtest_autotile.pngをドラッグ＆ドロップします。先ほどと同じく、タイル分割のウィンドウが立ち上がるので「はい」を選択します。
   

   

4. 続けてのウィンドウ、オートタイル形式で読み込むか？については先程とは異なり、「はい」を選択します。すると、「壁判定の設定」「地形の設定」が自動で行われ、オートタイルとして利用できるようになります。
   

   

5. 下部のパネルをTileSetからTileMapに切り替え、Terrainsを選択してください、いま作成したタイルがTerrain_Set Xのauto_tile_00に設定されているはずです。
   *もし、表示されていない場合は、一度別のノードを選択してから再度選択すれば表示されることがあります。
   

   

6. Terrainsを選択してオートタイルを配置してみましょう。隣接するタイルの形によって自動でタイルが切り替わっているのがわかります。このサンプルタイルはオートタイルの配置判定がわかりやすいように、接続関係を可視化しています。
   

   

7. このオートタイルと同じ形式で作成すれば、タイルサイズは24x24でなくともオートタイルとして読み込むことができます。自作のオートタイルが作成しやすいように、判定以外を透明化した画像を用意しました。自作のオートタイル作成の際の物差し代わりにお使いください。
   

グラフィックコースの続きはこちら！

チュートリアル: グラフィックコース#2 2Dボーンキャラクター

このコースでは、サンプルで収録されているプレイヤーオブジェクトを改変していくコースです。 2Dボーンで制作されたキャラクターの基本的な操作を学ぶことができます。 このコースでも、最初のチュートリアルで使用したチュートリアルプロジェクトを利用します。 まずはプロジェクトを開いて準備してください。