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

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

はじめに

前回解説したParallexBackgroundは、複数のレイヤーを統括するコンテナのような役割を果たしていました。では、実際に「描画される背景」はどのノードが担当しているのでしょうか？それがParallexLayerです。このノードがParallexBackgroundの子として配置され、具体的なテクスチャを持ちながら、視差効果をもって移動します。

ParallexLayerは、ParallexBackgroundの力をを実際に活かす、不可欠なパートナーなのです。

ParallexLayerとは？

ParallexLayerは「舞台の書き割り」のそれぞれの「幕」のようなノードです。奥の幕はゆっくり動き、手前の幕は速く動く——そうした動きの速さをmotion_scaleで決めます。ParallexBackgroundなしでは存在できません。

継承ツリー：

ParallexLayer → Node2D → CanvasItem → Node

Node2Dを継承しているため、position、rotation、scaleといった2D変換プロパティを持ちます。ただし、ParallexLayerの位置はParallexBackgroundによって自動的に制御されるため、通常はこれらを手動で変更しません。

ParallexLayerの階層構造 — ParallexBackgroundの下に複数のParallexLayerが配置され、各レイヤーがmotion_scaleで異なる動きをします

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

遠景の雲（motion_scale 0.1）

空に浮かぶ雲は、カメラ移動に対して最も遅く動きます。motion_scale 0.1に設定すると、非常に遠い背景として表現されます。

中景の木々（motion_scale 0.5）

森や林の背景として。カメラの移動速度の約半分で動きます。遠景よりも身近に感じられながらも、プレイヤーキャラクターよりは後ろに配置されます。

近景の草（motion_scale 0.8）

プレイヤーのすぐ近くにある草や花。カメラの移動にほぼ追従し、より手前の感覚を与えます。

シームレスループする背景

motion_mirroringを設定することで、背景が画面外に去った瞬間に自動的に繰り返されます。横スクロールゲームで無限にスクロールする背景を実現するために不可欠です。

別のノードが適切な場面

単一の静止した背景にはSprite2DやTextureRectで十分です。視差効果が不要な場面でParallexLayerを使う必要はありません。

主なプロパティと機能

プロパティ名	型	説明	デフォルト値
`motion_scale`	Vector2	カメラ移動に対する追従速度。0=固定、1=カメラ同速、0.5=半速など。重要なパラメータ	Vector2(1, 1)
`motion_offset`	Vector2	motion_scaleとは別に、初期オフセットを指定。micro-adjustmentに使用	Vector2(0, 0)
`motion_mirroring`	Vector2	タイリング間隔。テクスチャの幅と同じ値を設定すると、シームレスループが実現される	Vector2(0, 0)

GDScriptコード例1：複数のParallexLayerでデイナミックな背景を構築

extends Node2D

@onready var parallax_bg = $ParallaxBackground
@onready var camera = $Camera2D
@onready var player = $Player

func _ready():
	# ParallexLayerを動的に生成・設定
	var layer_configs = [
		{"name": "Sky", "scale": 0.05, "texture": "res://assets/sky.png"},
		{"name": "Clouds", "scale": 0.15, "texture": "res://assets/clouds.png"},
		{"name": "Mountains", "scale": 0.4, "texture": "res://assets/mountains.png"},
		{"name": "Trees", "scale": 0.7, "texture": "res://assets/trees.png"},
		{"name": "Grass", "scale": 0.95, "texture": "res://assets/grass.png"},
	]

	for config in layer_configs:
		var layer = ParallaxLayer.new()
		layer.motion_scale = Vector2(config["scale"], 1.0)
		layer.motion_mirroring = Vector2(1024, 0)  # 背景幅が1024pxと仮定

		var sprite = Sprite2D.new()
		sprite.texture = load(config["texture"])
		sprite.centered = true

		layer.add_child(sprite)
		parallax_bg.add_child(layer)

	camera.follow_smoothing_enabled = true
	camera.follow_smoothing_speed = 8.0

func _process(delta):
	# プレイヤーの移動に応じてカメラも移動
	camera.global_position = player.global_position + Vector2(0, -100)

GDScriptコード例2：motion_mirroringでシームレスループを実現

extends Node2D

@onready var parallax_bg = $ParallexBackground
@onready var camera = $Camera2D

# テクスチャサイズ
var texture_width = 1024.0

func _ready():
	# ParallexBackgroundの各レイヤーに対してシームレスループを設定
	var layers = parallax_bg.get_children()

	for i in range(layers.size()):
		var layer = layers[i]

		# motion_mirroringを背景幅に設定
		layer.motion_mirroring = Vector2(texture_width, 0)

		# motion_scaleを距離に応じて段階的に設定
		var scale_value = 0.1 + (i * 0.18)
		layer.motion_scale = Vector2(scale_value, 1.0)

		# 子ノード（Sprite2D）が存在すれば、centerを設定
		for child in layer.get_children():
			if child is Sprite2D:
				child.centered = true

	# スクロール制限（オプション：無限スクロールの場合は不要）
	parallax_bg.scroll_limit_begin = Vector2.ZERO
	# 終了位置を十分に大きく設定して、実質制限なしに
	parallax_bg.scroll_limit_end = Vector2(texture_width * 1000, 0)

	# 最初のカメラ位置を設定
	camera.global_position = Vector2(512, -200)

func _process(delta):
	# カメラをマウス位置に移動（デモ用）
	# 実際のゲームではプレイヤーに追従
	if Input.is_action_pressed("ui_right"):
		camera.global_position.x += 300 * delta
	elif Input.is_action_pressed("ui_left"):
		camera.global_position.x -= 300 * delta

motion_mirroringによるシームレスループ — motion_mirroringをテクスチャ幅に設定すると、背景が無限に繰り返されます

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

カスタマイズ項目	設定方法	効果
動的なmotion_scaleの変更	`var tween = create_tween() tween.tween_property(parallax_layer, "motion_scale", Vector2(0.9, 1.0), 3.0)`	時間経過に伴ってレイヤーの動きの速さを変更。ゲームイベントによる視差効果の強調
垂直方向のスクロール対応	`parallax_layer.motion_scale = Vector2(0.5, 0.3) # X方向0.5倍、Y方向0.3倍`	上下スクロール対応ゲームで、垂直方向にも異なるmotion_scaleを設定可能
複数のテクスチャを重ねる	`var layer = ParallexLayer.new() layer.add_child(sprite1) layer.add_child(sprite2) # 同じmotion_scaleで複数のテクスチャ`	1つのParallexLayerに複数のSprite2Dを追加し、より複雑な背景を構築
motion_offsetで微調整	`parallax_layer.motion_offset = Vector2(100, 50)`	motion_scaleとは別に、オフセットを指定して細かい位置調整を実施
ParallexLayerへのアニメーション追加	`var anim = Animation.new() # KeyFrameを追加してmotion_scaleをアニメーション`	AnimationPlayerと組み合わせて、背景のmotion_scaleを時間とともに変更

まとめ

ParallexLayerは、ParallexBackgroundと組み合わせることで、ゲーム背景に奥行きをもたらす実装の中核です。motion_scaleとmotion_mirroringという2つのキーパラメータを理解することで、シンプルながら強力な視差効果を実現できます。各レイヤーを適切に設定することで、プレイヤーは「ゲーム世界に深さがある」と無意識のうちに感じるのです。