Zenn
🙄

Godotでプラットフォームゲーム基礎作成 その2 パララックス（視差効果）背景

2024/11/30に公開
ゲーム開発
Godot
Godot
tech

1. はじめに

Godotを使ってプラットフォームゲームを作成するための基本的な要素と手順を紹介します。
初心者を対象に、ゲーム開発の基本を学びながら、自分で簡単なプラットフォームゲームを作成できるようになります。YouTubeでもこの記事の内容に沿ってゲームを作っているので、動画を見ながら取り組んでみてください。

https://youtu.be/e0ypG4r39BM

チャンネル登録していただけると嬉しいです。

環境

今回の動画では以下のバージョンを前提にゲーム作成を行います。

  • Godot:4.3

2. パララックス（視差効果）背景について

パララックス背景とは、スクロールする際に複数の背景画像が異なる速度で動くことで、奥行き感や立体感を演出する手法です。この効果により、視覚的に魅力的なゲームシーンを作成できます。

3. パララックス背景の基本要素

レイヤー構成

パララックス効果を実現するために、背景を複数のレイヤーに分割します。通常、前景、中景、背景の3つ以上のレイヤーを使用します。

異なるスクロール速度

レイヤーごとに異なるスクロール速度を設定します。前景のレイヤーはユーザーのスクロール速度に近い速度で動き、背景のレイヤーはゆっくりと動きます。

4. 背景画像の準備

assets/spritesにbackgroundフォルダを作成し、素材画像インポートします。
素材画像は前回ダウンロードしたbrullovさんの素材を利用させてもらいましょう。
https://brullov.itch.io/oak-woods

  • background_layer_1.png
  • background_layer_2.png
  • background_layer_3.png

5. 視差効果（パララックス）背景の作成

シーンの作成

新規シーンを作成し、ルートノードにParallaxBackgroundを設定します。
ParallaxBackgroundは、パララックス効果を実現するための基礎的なノードで、複数のParallaxLayerを管理します。主な役割は以下の通りです。

  • 管理ノード
    • ParallaxBackgroundは、複数のParallaxLayerを1つの背景としてまとめて管理します。これにより、各レイヤーの動きや設定を統一的に制御できます。
  • 自動スクロールのサポート
    • ParallaxBackgroundはスクロールの基準点を提供し、スクロールオフセットの更新や自動スクロールをサポートします。
  • グローバルな動きの制御
    • ParallaxBackgroundノードを使うことで、背景全体の動きを制御しやすくなります。例えば、ゲームシーン全体のスクロールを1つのノードで制御できます。

子ノードにParallaxLayerを追加し、名前をParallaxLayer1に変更します。
ParallaxLayerは、各レイヤーごとにパララックス効果を実現するためのノードです。主な役割は以下の通りです。

  • 個別のレイヤーの設定
    • ParallaxLayerは、各背景レイヤーの動きや見た目を個別に設定します。これにより、レイヤーごとに異なるスクロール速度や動きを設定できます。
  • スプライトやその他のノードの配置
    • ParallaxLayerは、背景画像（スプライト）や他のノードを配置するためのコンテナとして機能します。

ParallaxBackgroundとParallaxLayerを組み合わせて使うことで、パララックス効果を簡単かつ効率的に実現できます。ParallaxLayerのみを使用することもできますが、その場合、複数のレイヤーを個別に管理する必要があり、手間が増えます。

次にParallaxLayer1にSprite2Dノードを子ノードとして追加します。
ここまで出来たらParallaxLayer1に選択してノードの複製をします。
CTRL+Dのショートカットでノードが簡単に複製できるので、ParallaxLayerを全部で3個になるように複製しましょう。

一度シーンを保存しましょう。

res://scenes/stage/background.tscn

画像の設定

ParallaxLayerが作成できたら、それぞれの子ノードのSprite2Dに背景画像を設定しましょう。

  • ParallaxLayer1 -> Sprite2D: background_layer_1.png
  • ParallaxLayer2 -> Sprite2D: background_layer_2.png
  • ParallaxLayer3 -> Sprite2D: background_layer_3.png

ステージへ配置

背景のシーンをメインステージのシーンに配置してみましょう。
配置が終わったら描写についてわかりやすく説明するので、一度前回作成したCamera2Dノードを削除しましょう。
Camera2Dノードの削除が出来たら新しくMainStageのノードにCamera2Dノードを新規に追加してゲームを起動してみましょう。
画面の中心に背景が表示されていて、キャラクターを動かしても背景とカメラが追従しないことがわかると思います。

カメラの拡大と背景の配置

今のままだと全体的にゲーム画面が小さいので、カメラをズームしてみましょう。
ここではZoomの値を4にしてゲーム画面を確認しましょう。
画面内に背景が収まっていることが確認できると思います。
初期描写ではキャラクターが真ん中に表示されているのでカメラのOffsetを変更して左下に表示させるようにしてみましょう。

Camera2DノードのOffsetを下記の通り設定します。

  • x: 100
  • y: -90

もう一度画面を見てみましょう。
キャラクターがカメラの中の左下に移動していることがわかると思いますが、今度は背景が置き去りになっていると思います。
背景画像についても配置場所を変更しましょう。
ParallaxBackgroundのCanvasLayerのOffsetを下記の通り設定します。

  • x: 400
  • y: -360

この値はカメラのZoomを考慮して4倍の値になっているよ。
エディター上だと背景画像とカメラの範囲の枠がずれていると思うけど実際のゲーム画面では一致しているから確認してみよう。

カメラの追従

今のままだとキャラクターを動かしても描写されている範囲が変わらないので、カメラをキャラクターに追従するように設定します。プログラムで実装すると細かく制御できますが、今回はシンプルにCamera2Dノードをキャラクターノードの子ノードに移動させるだけにします。
描写内容を基準にPositionの値が自動で設定されます。
現在のゲームの状態を確認してみましょう。

キャラクターを動かすとカメラが動くこと確認できると思います。

背景の繰り返し

気づいていると思うけど、キャラクターを動かした時に背景が最初の位置のままなので、
画像の大きさを超えた範囲は画像が切れた状態になっていることがわかると思います。

画像が右端に行ったら画像の左端が繋がって表示されるように設定をしていきます。
素材の画像も右端と左端を重ねた場合に違和感なく表示できるように考慮されて作られています。
backgroundのシーンに戻って、画像の横幅を調べましょう。
Sprite2DのTextureをクリックすると素材の縦横の大きさがわかります。

横幅が320pxであることがわかると思います。
横幅がわかったら画像が繰り返し描写されるように設定していきます。
ParallaxLayer1〜3のMotionの中のMirroringって項目のxに320を設定します。
これは、要素を指定した値の範囲で繰り返し背景を描写するようにしています。

ここまで設定したらまたゲーム画面を見てみましょう。横に移動すると背景が繰り返し描写されているのがわかると思います。
ただ、背景が途中途中で切れるタイミングがあることに気づいたでしょうか。

Mirroringの描写判断は子ノードの基準点が左上の位置で計算されます。
今回Sprite2DのCenteredのチェックボックスがONになっているため、描写の判定と画像の配置位置にズレが生じしているために発生しています。
背景画像をシームレスに繰り返し描写する際には、通常、基準点が左上に設定されている方が調整しやすくなるので、Sprite2DのCenteredのチェックボックスを外していきましょう。

Centeredのチェックボックスを外したら、元々ParallaxBackgroundのoffsetがCenteredを考慮した値になっているので、Mirroring設定しているxは0、Mirroring設定していないyはCenteredを外して基準値がズレた分を加算して-720pxを設定しましょう（縦幅の半分×Zoom分を元々の設定値に追加）。

ゲームを起動して横に移動してみましょう。シームレスに背景が切り替わることを確認できると思います。

視差効果の設定

背景画像の設定ができたのでいよいよパララックス（視差効果）を設定していきましょう。
奥の画像ほどゆっくり動くようにするため、backgroundのシーンに戻って、ParallaxLayerのMotionのScaleの値を変更します。この値を小さくすればするほどゆっくり動くようになります。
0.1を設定すれば基準のカメラ移動の10分の1のスピードになります。
今回は縦軸は動かないようにするため、yの値は0に設定し、xの値はそれぞれ、ParallaxLayer1は0.1、ParallaxLayer2は0.5、ParallaxLayer3は1に設定します。

設定できたら実際に動かしてみましょう。縦は画像が動かずに、横のみ視差効果が反映された背景画像になっていることがわかると思います。

まとめ

今回の記事ではGodotを使って パララックス（視差効果）背景を説明しました。この記事を参考にして、ぜひ自分だけのプラットフォームゲームを作成してみてください。

Discussion