画面遷移用のシーンを作ろう
演出の説明
画面が変わるときの演出をおこなうシーンを2つ作ります。1つは画面を離れる時の演出で、もう1つは画面に入る時の演出です。
演出はそれぞれ最上位のレイヤーに置きます。そして、画面全体を覆うようにします。
画面を離れる時の演出は、画面全体を背景色に近づけていきます。画面に入る時の演出は、逆に背景色で覆っていた状態から透明にしていきます。
| 表示タイミング | 演出 |
|---|---|
| 画面を離れる時 | 透明→背景色→自身のシーンを削除 |
| 画面に入る時 | 背景色→透明→自身のシーンを削除 |
背景色に遷移するのには理由があります。
シーン全体を色で塗りつぶした場合、次のシーンに切り替える際に、一瞬だけシーンがないフレームが発生することがあります。その時に背景色が見えてしまいます。
そうした時に不自然にならないように背景色を利用します。
画面を離れる時の演出
トップメニューの「シーン」＞「新規シーン」で、新しいシーンを作ります。ルートノードは「CanvasLayer」にして名前を「TransitionLeave」に変更します。
「Ctrl+S」で保存するパスはres://scn/transition/transition_leave.tscnとします。
「TransitionLeave」ノードに子ノードとして「ColorRect」を追加します。配置後の状態は次のようになります。
▶ TransitionLeaveシーン
-
TransitionLeave（CanvasLayer）
- ColorRect
「インスペクター」ドックでの変更はおこなわずに、スクリプト側で制御します。
画面を離れる時のスクリプト
続いて「TransitionLeave」ノードにスクリプトをアタッチします。
「TransitionLeave」ノードを右クリックして「スクリプトをアタッチ」を選択します。「ノードにスクリプトをアタッチする」ダイアログが表示されますので「テンプレート」にチェックを入れて、そのまま「作成」ボタンを押します。
res://scn/transition/transition_leave.gdと保存されたはずです。
このtransition_leave.gdをScriptビューで開き、次のようにスクリプトを書き換えます。
extends CanvasLayer
var def_col = ProjectSettings.get_setting("rendering/environment/defaults/default_clear_color")
var col_on = def_col
var col_off = Color(def_col, 0)
@onready var col_rect = $ColorRect
const TIME = 1.0
func _ready() -> void:
self.layer = 128
col_rect.size = col_rect.get_viewport_rect().size
func leave() -> void:
print("[Transition Leave] leave: start")
col_rect.color = col_off
var tween = create_tween()
tween.tween_property(col_rect, "color", col_on, TIME)
tween.play()
await tween.finished
print("[Transition Leave] leave: end")
queue_free()
スクリプトの解説
まずは、プロジェクト設定の取得です。
var def_col = ProjectSettings.get_setting("rendering/environment/defaults/default_clear_color")
上のスクリプトでは、プロジェクト設定の「レンダリング」＞「環境」＞「デフォルト」＞「デフォルトのクリア色」を取得しています。この値は、ゲームの背景色になります。
次は、塗りつぶす色のオン/オフの状態の色を作ります。
var col_on = def_col var col_off = Color(def_col, 0)
オンの時はそのまま「デフォルトのクリア色」を使います。オフの時は、def_colを元にして、アルファ値が0（透明）の色を作ります。
続いて、ready関数の説明をおこないます。
func _ready() -> void: self.layer = 128 col_rect.size = col_rect.get_viewport_rect().size
「レイヤー」の値を128と大きくして、最前面になるようにします。そして「ColorRect」のサイズがビューポートのサイズと同じになるようにします。
最後はleave関数の説明です。
func leave() -> void: col_rect.color = col_off var tween = create_tween() tween.tween_property(col_rect, "color", col_on, TIME) tween.play() await tween.finished queue_free()
「Tween」を使って、色をアニメーションさせます。await tween.finishedと書くことで、アニメーションが終わるまで待ちます。またqueue_free関数で、自身を削除します。
画面に入る時の演出
画面を離れる時の演出とほとんど同じです。
トップメニューの「シーン」＞「新規シーン」で、新しいシーンを作ります。ルートノードは「CanvasLayer」にして名前を「TransitionEnter」に変更します。
「Ctrl+S」で保存するパスはres://scn/transition/transition_enter.tscnとします。
「TransitionEnter」ノードに子ノードとして「ColorRect」を追加します。配置後の状態は次のようになります。
▶ TransitionEnterシーン
-
TransitionEnter（CanvasLayer）
- ColorRect
「インスペクター」ドックでの変更はおこなわずに、スクリプト側で制御します。画面を離れる時の演出と同じです。
画面に入る時のスクリプト
続いて「TransitionEnter」ノードにスクリプトをアタッチします。
「TransitionEnter」ノードを右クリックして「スクリプトをアタッチ」を選択します。「ノードにスクリプトをアタッチする」ダイアログが表示されますので「テンプレート」にチェックを入れて、そのまま「作成」ボタンを押します。
res://scn/transition/transition_enter.gdと保存されたはずです。
このtransition_enter.gdをScriptビューで開き、次のようにスクリプトを書き換えます。内容は、transition_leave.gdの逆向きの処理です。
extends CanvasLayer
var def_col = ProjectSettings.get_setting("rendering/environment/defaults/default_clear_color")
var col_on = def_col
var col_off = Color(def_col, 0)
@onready var col_rect = $ColorRect
const TIME = 1.0
func _ready() -> void:
self.layer = 128
col_rect.size = col_rect.get_viewport_rect().size
func enter() -> void:
print("[Transition Enter] enter: start")
col_rect.color = col_on
var tween = create_tween()
tween.tween_property(col_rect, "color", col_off, TIME)
tween.play()
await tween.finished
print("[Transition Enter] enter: end")
queue_free()
これで、画面遷移の演出が用意できました。
