Godot入門：ParallaxBackgroundの使い方と活用法

はじめに
ParallaxBackgroundとは？
このノードを使うべき場面
主なプロパティと機能
1. GDScriptコード例1：複数のParallexLayerを使用したスムーズな背景構成
2. GDScriptコード例2：motion_mirroringでシームレスな背景ループ
もっと使いこなす：カスタマイズできるパラメータ
まとめ
シリーズ：Godot 4 ノード解説

はじめに

ゲーム画面をスクロールさせるとき、背景全体が均一に動くのではなく、遠い背景はゆっくり、近い背景は速く動く——そんな視差効果（パラレックス）を見たことはありませんか？これは現実世界で電車の窓から外を見たときの現象と同じです。Godot 4では、この視差効果を簡単に実装できるParallaxBackgroundノードが用意されています。

このノードを使うだけで、シンプルな2Dゲームがたちまち奥行きのある美しい世界に変身します。

ParallaxBackgroundとは？

ParallaxBackgroundは「舞台の書き割り」のようなノードです。奥の幕はゆっくり動き、手前の幕は速く動く——そうした段階的な動きをCamera2Dの移動に自動で追従させ、視差効果を生み出します。

継承ツリー：

ParallexBackground → CanvasLayer → Node

CanvasLayerを親クラスとするため、複数のレイヤーで構成されたシーンにおいても、独立した描画レイヤーとして機能します。重要な点は、ParallaxBackgroundはそれ自体では何も描画しません。その子ノードであるParallexLayerに配置したテクスチャが、視差効果をもって描画されるのです。

ParallaxBackgroundの視差効果 — カメラが右に移動するとき、遠景はゆっくり、近景は速く動く。この段階的な動きが奥行きを生み出します

このノードを使うべき場面

横スクロールゲームの遠景（山・雲・空）

最も典型的な用途です。空を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  # 固定の高さ

motion_scaleによる背景の動きの違い — 左からmotion_scale 0.2, 0.5, 0.8, 1.0。値が大きいほど、カメラの移動に追従する速度が速くなります

もっと使いこなす：カスタマイズできるパラメータ

カスタマイズ項目	設定方法	効果
シームレスループ背景の実装	`parallax_layer.motion_mirroring = Vector2(1024, 0) # 背景画像の幅が1024pxの場合`	背景が画面外に出たら自動的に繰り返される。無限にスクロールするゲームに最適
垂直方向のスクロール対応	`parallax_layer.motion_scale = Vector2(0.5, 0.5) # 水平・垂直両方で視差効果が適用`	上下スクロール対応のゲームでも視差効果を実現可能
スクロール制限の設定	`parallax_bg.scroll_limit_begin = Vector2(0, 0) parallax_bg.scroll_limit_end = Vector2(5000, 2000)`	ゲームワールドの境界を定め、それ以上のスクロールを防止
Camera2Dズーム時の挙動制御	`parallax_bg.scroll_ignore_camera_zoom = true`	カメラズーム時、背景がズームに追従するか独立するかを制御
動的なmotion_scaleの変更	`var tween = create_tween() tween.tween_property(parallax_layer, "motion_scale", Vector2(0.8, 0.8), 2.0)`	時間経過に伴って視差効果を強くしたり弱くしたり動的に調整