天天看點

godot 淡入淡出平滑切換場景

godot建立一個空工程

godot 淡入淡出平滑切換場景

根節點重命名為scene1

godot 淡入淡出平滑切換場景

然後添加一個TextureRect節點,添加一張背景圖1.jpg(網上下載下傳的,你也可以替換成自己喜歡的背景圖)

再添加一個Button控件,裡面的文字輸入“start”,按鈕放置在右上角。

儲存場景scene1

給場景添加一個gd腳本:

godot 淡入淡出平滑切換場景

然後給按鈕添加一個pressed的點選函數:

godot 淡入淡出平滑切換場景
godot 淡入淡出平滑切換場景

将場景scene1.tscn複制一份,改為scene2.tscn,替換scene2的背景圖檔為1.jpg,這樣你就有了2個場景,接下來我們要做的就是在這兩個場景之間進行切換。

複制場景的操作:

godot 淡入淡出平滑切換場景
godot 淡入淡出平滑切換場景

點選Duplicate

打開場景scene2,将根節點手動改名為scene2,按鈕上的文字改成“back”

如圖所示:

godot 淡入淡出平滑切換場景

打開腳本scene1.gd(可以看到,複制後的場景,其實是共用一個腳本scene1.gd)

extends Control

func _on_Button_pressed():
	if self.name == "scene1":
		get_tree().change_scene("res://scene2.tscn")
	else:
		get_tree().change_scene("res://scene1.tscn")

           

儲存,選擇scene1.tscn為初始場景,運作。

godot 淡入淡出平滑切換場景

從場景一切換到了場景2,再點選按鈕,場景2又切換回了場景1,但是沒有過渡動畫效果,接下來我們在場景切換過程中加入淡入和淡出動畫,讓場景切換更加平滑。

顔色選擇0c0c0c(或者其他接近黑色的顔色值)

godot 淡入淡出平滑切換場景

添加一個AnimationPlayer節點,添加一個scenechange動畫,時長為0.5秒,單次動畫。

選中ColorRect,在其屬性面闆裡:

godot 淡入淡出平滑切換場景

在0秒添加第一個關鍵幀:将透明度調成0,點選該屬性值旁邊的“鑰匙”,添加關鍵幀

godot 淡入淡出平滑切換場景

在第0.5秒添加第二個關鍵幀:

godot 淡入淡出平滑切換場景
godot 淡入淡出平滑切換場景

給SceneChanger添加一個腳本

SceneChanger.gd

extends CanvasLayer

onready var animator = $AnimationPlayer
onready var color = $ColorRect

func change_scene(path):
	color.show()
	animator.play("scenechange")
	yield(animator, "animation_finished")
	get_tree().change_scene(path)
	animator.play_backwards("scenechange")
	yield(animator, "animation_finished")
	color.hide()
           

讓動畫先正常播放,然後再倒放。

将ColorRect設定為不可見

godot 淡入淡出平滑切換場景

将SceneChanger.tscn設定為單例:

點選菜單:Project -> Project Settings -> AutoLoad

(不要忘記點選Add按鈕,點選後看到如圖所示,才算是添加成功)

godot 淡入淡出平滑切換場景

scene1.gd

腳本内容改成:

extends Control

func _on_Button_pressed():
	if self.name == "scene2":
		SceneChanger.change_scene("res://scene1.tscn")
	else:
		SceneChanger.change_scene("res://scene2.tscn")

           

效果:

godot 淡入淡出平滑切換場景

說明:因為部落格上傳圖檔大小有限制,效果動圖并未截取全屏。

參考:

B站視訊教程:【Godot】實作場景的平滑過渡切換