【Godot Engine】背景無限スクロールのやり方

移動できるキャラ作成

Node を作成し、移動対象の Sprite と移動した時にカメラが追随するように Sprite の子として Camera2D を追加します。カメラを選択して、インスペクターから Current を ON にしておきます。

Node にスクリプトを追加して、Sprite を移動できるようにします。スクリプトはこれだけ。

extends Node

var speed = 400

func _ready():
    pass

func _process(delta):
    var input = Vector2(0, 0)
    if Input.is_action_pressed("ui_right"):
        input.x += 1
    elif Input.is_action_pressed("ui_left"):
        input.x -= 1
    if Input.is_action_pressed("ui_up"):
        input.y -= 1
    elif Input.is_action_pressed("ui_down"):
        input.y += 1
    var pos = $Sprite.get_position() + input.normalized() * speed * delta
    $Sprite.position = pos

背景追加

画像はこちらのを使用させて頂きました。

Tutorial - creating depth | OpenGameArt.org

そして Node に ParallaxBackground、ParallaxLayer と実際に画像を表示する Sprite を追加します。Sprite は backgroundという名称に変更しました。

まずは、background のインスペクター上で Texture に背景画像を設定します。大きさを変更したい場合、background の scale を設定します。

画像がウィンドウと同じくらいのサイズだと、繰り返し時にちらつく時があるため少し大きめのサイズにしておきます。ここでは画像を 1.2 倍にして少し表示位置を下にしたいので Position の y に 100 を設定しました。

この時点で実行してみると、背景は表示されますが横に移動していくと背景が途切れてしまいます。また、比較対象が無いのでわかりにくいですが、背景がカメラと同じ速度で移動してしまうため背景感がありません。

背景設定

まずは、遠くの景色が移動している感じを出すために、ParallaxLayer の Motion.Scale を設定します。1 が等速移動。0 が移動なし。1 から 0 の間が減速して移動する比率になります。

背景の横の動きをキャラクターの移動スピードの半分に設定し、縦方向は背景固定にします。

( マイナス値を設定すると逆方向に移動します )

繰り返し表示は同じく ParallaxLayer の Motion.Mirroring に、繰り返し表示したい方向 (x or y or both) に画像サイズを設定します。その際、画像に設定している Scale を加味したサイズを設定する必要があります。

先程背景画像を 1.2 倍にしているため、Mirroring に設定するサイズも画像サイズ x 1.2 になります。幸いエディタ上で計算式が使えるため、画像サイズを調べるだけで入力可能です。

画像は横幅 800px だったため 800 * 1.2 を入力すれば自動で 960 が設定されます。

これで延々と背景が繰り返されます。

後は必要な背景分 ParallaxLayer を追加してこの作業を繰り返して、Motion.Scale を奥に行くほど小さくしていくことで遠近感のある背景ができあがります。