チュートリアル: 「0からはじめるACTION GAME MAKER」第五章

「視差背景」をつくろう。

Godotでは、Parallax2Dというノードを使うことで視差背景を作ることができます。視差背景とは、カメラに対して動く速度を変え、近くのものは早く、遠くのものはゆっくり動くようにすることで遠近感を出す仕組みです、昨今のスマホの待機画面などで傾けると写真が動いて見えるものと同じ仕組みです。

ACTION GAME MAKERではゲームシーンの各レイヤー(Base/Wall/NearView/MiddleView/DistantView)がParallax2Dで作られており、視差背景を実現することができます。

画像は以下のものを使い、画像を読み込み、視差とループを設定します。

1. 画像をPCに保存しましょう。システムの都合上そのままDLすると自動で圧縮されてしまうため、画像をクリックして拡大してから保存しましょう。

2. PCに保存したmountain.pngを、ファイルシステムにドラッグ&ドロップしましょう。

3. シーンタブをstage1、エディター画面を2Dに切り替えます。

4. シーンウィンドウでMiddleView(Parallax2D)レイヤーにあるSprite2Dノードを選択します。

5. インスペクターのテクスチャプロパティにmountain.pngをドラッグ&ドロップで適用します。

6. シーンウィンドウでMiddleView(Parallax2D)レイヤーを選択します。

7. インスペクターのScrollScaleをx=0.7,y=0.7に設定しましょう。これで、カメラとプレイヤーが1の距離を進む間に、この背景は0.7しか進まなくなります。

8. 続いて、インスペクターの「繰り返し」をクリックして展開します。

9. 以下のように設定します。

Repeat Size: x=1080

Repeat Times: 10

これで、mountain.pngの横幅である1080pxごとに、合計10回繰り返して配置されます。

10. テストプレイをしてみましょう、正常に設定できていれば、プレイヤーに比べて山はゆっくりと動き奥行きを感じるはずです。

うまくいかない時のチェックリスト

背景のループがおかしく感じる:MiddleView(Parallax2D)の繰り返しをチェックしましょう。

背景の速度が変わっていないように見える:MiddleView(Parallax2D)のScroll Scaleが正しいかチェックしてみましょう。