【Godot4.2】スマートなUI作成！Simple GUI Transitionsの使用方法 3/22

楽にノードの遷移が出来るようになるアセットSimple GUI Transitions(SGT)
を紹介します。

SGTの使用例

1.ダウンロード方法

ダウンロード方法はGodot無いのAssetLibを用いてダウンロードする方法、
又はGitHubから直接ダウンロードする方法があります。

Scriptの横にあるAssetLib内で検索をかける

次にプロジェクト設定からプラグインのタブを選び、該当するプラグイン（今回ではSimpleGUITransitions）のステータスを有効にし、Godotの再起動を行います。

プロジェクト→プラグイン→有効

そうしたら新たにGuiTransitionのノードが追加されています

2.GTノードのプロパティ

AutoStart:自動で始まるかどうか
Fade Layout:有効にすると、個々のコントロールの選択したアニメーションとともにレイアウト全体がフェードする。
Animation Enter/Leave:フェード/左右上下スライド/スケールチェンジが
選べる
Duration:遷移時間の合計時間
Delay:各ノードの遷移時間の遅延率。0.0で同時、1.0で前ノードが終わるまで待機
Transition Type:遷移の遷移曲線
Ease Type:遷移のイーズカーブ

Layout:メインのレイアウトノード。これに応じて表示・非表示が決まる。シーン内の最上位ノードでなければいけない。又Controlノードを含む必要がある。
LayoutID:シングルトンで用いる際の識別ID
Controls:遷移アニメーションを適応させるノードを割り当てる必要がある
Group:アニメーション化される子ノードを持つ親ノードを指定する。Vboxなどに入ったノードをまとめて遷移したい場合に便利。
ControlsかGroupは設定しなければいけない

Centerpivot:スケールチェンジアニメーションの場合中央にピボットするかどうか

3.使用例

今回は最初に載せたGifの様に動作する遷移アニメーションを作成します。

今回はこのようなテストシーンを作成しました。
プロパティもこんな感じです。

1.始まった際に遷移が起動して欲しい
プロパティのAutoStartをTrueにすれば解決する問題ですが、以下の様なスクリプトでも起動することが出来ます。

func _ready():
	GuiTransitions.show("test")

ここで初めて出るGuiTransitionsとはGuiTransitionをまとめるシングルトンであり、.show(LayoutID)を用いると指定したIDの遷移アニメーションを表示する事が出来ます

2.ボタンを押した際に消えて欲しい
以下の様なスクリプトを追加し、実施しました。

func _on_button_button_down():
	GuiTransitions.hide("test")

勿論ボタンをコネクトして、今度はGuiTransitionsのhideを用いました。
これは現在表示されているモノをアニメーションと共に非表示にする事が出来ます。

これで可能なはずです。

GuiTransitionsには他にも、show_completedのシグナルや、
go_to、update、is_shown,is_hiddenのメソッドも存在します。

詳しくはGitHubのシングルトンの記述を

これでまた少し楽でクオリティが高く見えるものが出来ますね(*^^*)

それでは(つ∀-)ｵﾔｽﾐｰ