クリアのスクリプトを書こう
スクリプトの作成
続いて「Clear」ノードにスクリプトをアタッチします。
「シーン」ドックで「Clear」ノードを右クリックして「スクリプトをアタッチ」を選択します。
「ノードにスクリプトをアタッチする」ダイアログが表示されますので「テンプレート」にチェックを入れて、そのまま「作成」ボタンを押します。
res://scn/clear/clear.gdと保存されたはずです。
このclear.gdをScriptビューで開き、次のようにスクリプトを書き換えます。
extends CanvasLayer const TIME = 1.0 func _ready() -> void: # サイズと比率の初期化 var sprite = $Sprite2D var size = sprite.get_viewport_rect().size var rate = size.y / sprite.get_rect().size.y # スプライトの初期設定 sprite.scale = Vector2.ZERO sprite.position.x = size.x / 2 sprite.position.y = size.y / 2 sprite.z_index = 99 # Tweenでアニメーション var tween = create_tween() tween.set_ease(Tween.EASE_OUT).set_trans(Tween.TRANS_BOUNCE) tween.tween_property(sprite, "scale", Vector2(rate, rate), TIME) tween.play()
まずは、どのように動作するのか動画で確認しておきましょう。
このような動きを実現するために「Tween」という機能を使います。
「Tween」では、「先頭の値」「末尾の値」「時間」「どのように遷移するかの設定」をもとに、自動でアニメーションをしてくれます。
Godot Engineでは、デフォルトでこの「Tween」が使えます。その使い方をここでは見ていきましょう。
スクリプトの解説
まずは、画面ぴったりに画像を表示するための比率を計算します。
# サイズと比率の初期化 var sprite = $Sprite2D var size = sprite.get_viewport_rect().size var rate = size.y / sprite.get_rect().size.y
スプライトのビューポートの高さを、スプライト自身の高さで割って、高さがぴったり同じになる比率を計算します。
「CanvasLayer」にはサイズがありません。そのため「Sprite2D」を経由して、ビューポートのサイズを得ます。
最終的な比率はrateになります。
次は、スプライトの初期設定です。
# スプライトの初期設定 sprite.scale = Vector2.ZERO sprite.position.x = size.x / 2 sprite.position.y = size.y / 2 sprite.z_index = 99
スケールを0まで小さくして、画面の中央に移動します。また、Zインデックスを大きくして、手前に表示されるようにします。
スクリプトの解説 Tweenでのアニメーション
「Tween」でのアニメーションです。
# Tweenでアニメーション var tween = create_tween() tween.set_ease(Tween.EASE_OUT).set_trans(Tween.TRANS_BOUNCE) tween.tween_property(sprite, "scale", Vector2(rate, rate), TIME) tween.play()
create_tween()で「Tween」を作成します。
次の行では「Ease」と「Transition」の設定を行っています。ここで、tween.set_ease(～).set_trans(～)のように関数を繋げて書けるのは、「Tween」の各関数が自分自身を返しているからです。
それでは、「Ease」と「Transition」について解説します。「Tween」では「Ease」（イージング）で速度の緩急を設定します。
-
EASE_IN：最初はゆっくりと動き、少しずつ速くなる -
EASE_OUT：最初は速く、後からゆっくり動く -
EASE_IN_OUT：最初はゆっくりに変化し、最後にゆっくりに変化する -
EASE_OUT_IN：EASE_IN_OUTの逆、真ん中がゆっくり
また「Transition」で遷移の仕方を設定します。これは、言葉で説明しても分かりにくいので、画像化してまとめてくれているGitHubのページを紹介しておきます。
今回は「EASE_OUT」で最初に素早く移動させ、「TRANS_BOUNCE」で弾むような遷移をさせています。
どの値を、何秒掛けて動かすかの設定は、tween_property関数を利用します。
tween.tween_property(sprite, "scale", Vector2(rate, rate), TIME)
第1引数が対象のオブジェクト、第2引数がプロパティ名、第3引数が変化後の値、第4引数が遷移に掛ける時間（秒）です。
実際のアニメーションはtween.play()で始まります。
tween.play()
また、アニメーションの終了まで待ってから次の処理に進みたい時の書き方も示しておきます。
tween.play() await tween.finished
await tween.finishedで、終了を待ってから先に進みます。
GDScriptでは、最近の多くのプログラミング言語で見られるように、awaitを使って非同期処理を待つことができます。
迷路シーンへの登録
作成したclear.tscnをmaze.tscnに登録します。
maze.tscnをダブルクリックして「Maze」シーンを開きます。
「シーン」ドックで「Maze」ノードを選択して、「インスペクター」ドックの「maze.gd」＞「Clear Scene」に、「ファイルシステム」ドックのres://scn/clear/clear.tscnをドロップして登録します。
今回の作業はここまでです。
