【Godot】多重スクロールの実装方法

この記事では、複数の背景を異なる速度で移動させることで、擬似的に奥行きを表現する「多重スクロール」の実装方法について紹介します。

多重スクロールの実装方法

素材データ

今回使用する素材データです

bg_parallax.zip ダウンロード

このデータには以下の2つのファイルが含まれています。

プロジェクトを作成し、この2つの画像ファイルをプロジェクトに追加します。

ルートシーンの作成

2Dシーン(Node2D)を作成し、名前を「Main」に変更しておきます。

ParallaxBackground / ParallaxLayerを作成する

次に「ParallaxBackground」を作成します。

これは多重スクロールの背景を管理するためのノードです。このノードの下に配置された「ParallaxLayer」を制御するためのノードです。

ということで「ParallaxLayer」を作成します。

今回は背景を2枚使用するので、2つの「ParallaxLayer」を用意します。

背景スプライトを作成する

次に「bg_back.png」を「ParallaxLayer」ノードの下に配置します。

画面の左上に合わせたいので、スプライトのインスペクターから以下のようにします。

Offset > Centerd: チェックを外して左上基準にする
Transform > Positon: (x, y) = (0, 0) にする

bg_sky.png を “ParallaxLayer2” の下に “BgSky” として同じように配置し、BgSkyスプライトの位置に合わせます。

プレイヤーの作成

シーンノードの作成

2Dシーン(Node2D) を新規作成し、名前を “Player” に変更します。

Iconスプライトの作成

次に “icon.png” を原点に配置して、”Icon”スプライトを作成します。

Camera2Dノードの作成

さらに “Camera2D” ノードを追加します。

Camera2D のインスペクターから「Current」にチェックを入れ、カメラを有効にします。

プレイヤースクリプトの作成

Playerノードにスクリプトをアタッチして、以下のように記述します。

extends Node2D

# 移動速度
const SPEED := 400.0

func _process(delta: float) -> void:
	
	# 移動量を求める
	var velocity = Vector2()
	if Input.is_action_pressed("ui_left"):
		velocity.x = -1
	elif Input.is_action_pressed("ui_right"):
		velocity.x = 1
	if Input.is_action_pressed("ui_up"):
		velocity.y = -1
	elif Input.is_action_pressed("ui_down"):
		velocity.y = 1

	# 移動する
	position += velocity * SPEED * delta

押したキーの方向に合わせて移動するスクリプトとなります。

これでプレイヤーは完成です。