godot建立一個空工程
根節點重命名為scene1
然後添加一個TextureRect節點,添加一張背景圖1.jpg(網上下載下傳的,你也可以替換成自己喜歡的背景圖)
再添加一個Button控件,裡面的文字輸入“start”,按鈕放置在右上角。
儲存場景scene1
給場景添加一個gd腳本:
然後給按鈕添加一個pressed的點選函數:
将場景scene1.tscn複制一份,改為scene2.tscn,替換scene2的背景圖檔為1.jpg,這樣你就有了2個場景,接下來我們要做的就是在這兩個場景之間進行切換。
複制場景的操作:
點選Duplicate
打開場景scene2,将根節點手動改名為scene2,按鈕上的文字改成“back”
如圖所示:
打開腳本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為初始場景,運作。
從場景一切換到了場景2,再點選按鈕,場景2又切換回了場景1,但是沒有過渡動畫效果,接下來我們在場景切換過程中加入淡入和淡出動畫,讓場景切換更加平滑。
顔色選擇0c0c0c(或者其他接近黑色的顔色值)
添加一個AnimationPlayer節點,添加一個scenechange動畫,時長為0.5秒,單次動畫。
選中ColorRect,在其屬性面闆裡:
在0秒添加第一個關鍵幀:将透明度調成0,點選該屬性值旁邊的“鑰匙”,添加關鍵幀
在第0.5秒添加第二個關鍵幀:
給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設定為不可見
将SceneChanger.tscn設定為單例:
點選菜單:Project -> Project Settings -> AutoLoad
(不要忘記點選Add按鈕,點選後看到如圖所示,才算是添加成功)
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")
效果:
說明:因為部落格上傳圖檔大小有限制,效果動圖并未截取全屏。
參考:
B站視訊教程:【Godot】實作場景的平滑過渡切換