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

2026.07.12

はじめに

前回解説した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_scaleVector2カメラ移動に対する追従速度。0=固定、1=カメラ同速、0.5=半速など。重要なパラメータVector2(1, 1)
motion_offsetVector2motion_scaleとは別に、初期オフセットを指定。micro-adjustmentに使用Vector2(0, 0)
motion_mirroringVector2タイリング間隔。テクスチャの幅と同じ値を設定すると、シームレスループが実現される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つのキーパラメータを理解することで、シンプルながら強力な視差効果を実現できます。各レイヤーを適切に設定することで、プレイヤーは「ゲーム世界に深さがある」と無意識のうちに感じるのです。

  • ParallexLayerはParallexBackgroundの子ノードとして機能し、motion_scaleで動きの速さを制御
  • motion_mirroringをテクスチャ幅に設定することで、背景をシームレスにループ
  • 0.1～0.95などの段階的なmotion_scale値を複数のレイヤーに設定することで、奥行きのある背景を実現

次回は、ゲーム空間内に配置された音源を表現するAudioStreamPlayer2Dについて解説します。

関連性の高いノード解説記事

この記事はGodot 4.xをもとに執筆しています。

コメント