はじめに
ゲーム画面をスクロールさせるとき、背景全体が均一に動くのではなく、遠い背景はゆっくり、近い背景は速く動く——そんな視差効果（パラレックス）を見たことはありませんか？これは現実世界で電車の窓から外を見たときの現象と同じです。Godot 4では、この視差効果を簡単に実装できるParallaxBackgroundノードが用意されています。
このノードを使うだけで、シンプルな2Dゲームがたちまち奥行きのある美しい世界に変身します。
ParallaxBackgroundとは？
ParallaxBackgroundは「舞台の書き割り」のようなノードです。奥の幕はゆっくり動き、手前の幕は速く動く——そうした段階的な動きをCamera2Dの移動に自動で追従させ、視差効果を生み出します。
継承ツリー：
ParallexBackground → CanvasLayer → Node
CanvasLayerを親クラスとするため、複数のレイヤーで構成されたシーンにおいても、独立した描画レイヤーとして機能します。重要な点は、ParallaxBackgroundはそれ自体では何も描画しません。その子ノードであるParallexLayerに配置したテクスチャが、視差効果をもって描画されるのです。
このノードを使うべき場面
横スクロールゲームの遠景（山・雲・空）
最も典型的な用途です。空をmotion_scale 0.1で配置し、雲を0.3で、木を0.6で配置すると、カメラが移動するたびに各レイヤーが異なる速度で流れ、自然な奥行き感が生まれます。
RPGのフィールド背景レイヤー
固定画面のRPGでも、複雑な背景を複数のParallexLayerに分けて配置することで、単調な画面が生き生きと見えるようになります。
シューティングゲームの流れる背景
enemy wave animationと同じように、背景も段階的に流れることで、ゲーム全体に統一感と速度感が生まれます。
視差効果で奥行きを演出
2Dゲームに3D的な奥行き感を与えるために、ParallexBackgroundは非常に有効です。プレイヤーが「画面内の世界に深さがある」と感じさせます。
別のノードが適切な場面
静止した背景には、単純にSprite2DやTextureRectで十分です。スクロール機能が不要な場面で複雑なParallexBackgroundを使う必要はありません。
主なプロパティと機能
| プロパティ名 | 型 | 説明 | デフォルト値 |
|---|---|---|---|
scroll_base_offset |
Vector2 | ParallexBackgroundの基準スクロール位置。Camera2Dの位置を参考にして計算される | Vector2(0, 0) |
scroll_base_scale |
Vector2 | ParallexBackgroundのスケール。これに基づいてParallexLayerのmotion_scaleが計算される | Vector2(1, 1) |
scroll_ignore_camera_zoom |
bool | Camera2Dのズーム値を無視するか。falseならズーム時もParallexLayerのスケールが自動調整 | false |
scroll_limit_begin |
Vector2 | スクロール可能な領域の始点。超過時はスクロールが止まる | Vector2(0, 0) |
scroll_limit_end |
Vector2 | スクロール可能な領域の終点。超過時はスクロールが止まる | Vector2(0, 0) |
GDScriptコード例1：複数のParallexLayerを使用したスムーズな背景構成
extends Node2D
@onready var parallax_bg = $ParallaxBackground
@onready var camera = $Camera2D
# ParallexLayerの子を自動取得
var layers = []
func _ready():
# ParallaxBackgroundの子（ParallexLayer）をすべて取得
layers = parallax_bg.get_children()
# 各レイヤーのmotion_scaleを設定
if layers.size() > 0:
layers[0].motion_scale = Vector2(0.1, 0.1) # 空：最も遠い
if layers.size() > 1:
layers[1].motion_scale = Vector2(0.3, 0.3) # 遠景：山
if layers.size() > 2:
layers[2].motion_scale = Vector2(0.6, 0.6) # 中景：木
if layers.size() > 3:
layers[3].motion_scale = Vector2(0.9, 0.9) # 近景：草
# カメラをプレイヤーに追従
camera.follow_smoothing_enabled = true
camera.follow_smoothing_speed = 5.0
func _process(delta):
# カメラをマウス位置に移動（デモ用）
camera.global_position = get_global_mouse_position()GDScriptコード例2：motion_mirroringでシームレスな背景ループ
extends Node2D
@onready var parallax_bg = $ParallaxBackground
@onready var camera = $Camera2D
@onready var player = $Player
# 背景画像のサイズ（あらかじめ設定）
var background_width = 1024.0
var player_speed = 300.0
func _ready():
# ParallexBackgroundの各レイヤーに対してmotion_mirroringを設定
# これにより、背景が無限ループしているように見える
var layers = parallax_bg.get_children()
for i in range(layers.size()):
var layer = layers[i]
# motion_mirroringを背景サイズに設定
layer.motion_mirroring = Vector2(background_width, 0)
# motion_scaleも距離に応じて設定
var scale_value = 0.1 + (i * 0.2)
layer.motion_scale = Vector2(scale_value, 1.0)
# スクロール制限を設定（オプション）
parallax_bg.scroll_limit_begin = Vector2.ZERO
parallax_bg.scroll_limit_end = Vector2(background_width * 10, 0)
func _process(delta):
# プレイヤーを右に移動
player.position.x += player_speed * delta
# カメラをプレイヤーに追従
camera.global_position.x = player.position.x
camera.global_position.y = -200 # 固定の高さ
もっと使いこなす：カスタマイズできるパラメータ
| カスタマイズ項目 | 設定方法 | 効果 |
|---|---|---|
| シームレスループ背景の実装 | parallax_layer.motion_mirroring = Vector2(1024, 0) |
背景が画面外に出たら自動的に繰り返される。無限にスクロールするゲームに最適 |
| 垂直方向のスクロール対応 | parallax_layer.motion_scale = Vector2(0.5, 0.5) |
上下スクロール対応のゲームでも視差効果を実現可能 |
| スクロール制限の設定 | parallax_bg.scroll_limit_begin = Vector2(0, 0) |
ゲームワールドの境界を定め、それ以上のスクロールを防止 |
| Camera2Dズーム時の挙動制御 | parallax_bg.scroll_ignore_camera_zoom = true |
カメラズーム時、背景がズームに追従するか独立するかを制御 |
| 動的なmotion_scaleの変更 | var tween = create_tween() |
時間経過に伴って視差効果を強くしたり弱くしたり動的に調整 |
まとめ
ParallexBackgroundは、2Dゲームに劇的な視覚的改善をもたらすシンプルながら強力なノードです。複数のレイヤーを異なるmotion_scaleで配置するだけで、ゲーム世界に奥行きと立体感が生まれます。横スクロールゲーム、RPG、シューティングゲームなど、様々なジャンルで活躍します。
- ParallexBackgroundはCamera2Dの移動に応じて、子のParallexLayerを自動的に視差効果で動かす
- motion_scaleで各レイヤーの動く速さを制御。値が小さいほど遠景、大きいほど近景
- motion_mirroringでシームレスループを実現し、背景を無限にスクロール可能に
次回は、ParallexBackgroundの子ノードとして機能するParallexLayerについて、より詳しく解説します。
シリーズ：Godot 4 ノード解説
このシリーズは、Godot 4でよく使用されるノードの使い方を詳しく解説しています。
- 001〜095: 各種ノード
- 096: DirectionalLight2D
- 097: LightOccluder2D
- 098: ParallaxBackground（このページ）
- 099: ParallaxLayer
- 100: AudioStreamPlayer2D
この記事はGodot 4.xをもとに執筆しています。
コメント