Godotでホバー時にアニメーションするボタンを
作成する方法
Godot Engine バージョン4.4
ゲームの UI では、ボタンにアニメーションを追加することで、より直感的で魅力的なデザインを実現できます。本チュートリアルでは、Godot 4 の
Tween を使用して、ボタンをホバーしたときにスムーズに拡大・縮小するアニメーションを実装する方法を紹介します。
最終的な動作イメージ
ボタンにカーソルを合わせると、ふわっと拡大し、カーソルを離すと元のサイズに戻るアニメーションを追加します。
1. Godot 4 のプロジェクトを作成
まず、新しい Godot 4 のプロジェクトを作成し、以下の手順でボタンを追加します。
① シーンの作成
Controlノードを作成（ルートノードとして使用）
- その子ノードとして
Buttonノードを追加
- ボタンの
Textプロパティを適当に設定（例:"Hover Me!"）
2. スクリプトの作成
次に、ボタンにスクリプトを追加し、ホバー時のアニメーションを実装します。
Button を選択し、スクリプトを追加 (button_hover.gd など) 以下のスクリプトを記述
extends Button
var tween: Tween
func _ready(): # マウスがボタンに入った時・出た時のシグナルを接続 mouse_entered.connect(_on_mouse_entered) mouse_exited.connect(_on_mouse_exited)
# Tween をリセットする関数func reset_tween(): if tween: tween.kill() # 既存の Tween を削除 tween = create_tween() # 新しい Tween を作成
# マウスがボタンの上に来たときfunc _on_mouse_entered() -> void: reset_tween() tween.set_ease(Tween.EASE_OUT).set_trans(Tween.TRANS_ELASTIC) tween.tween_property(self, "scale", Vector2(1.1, 1.1), 0.4)
# マウスがボタンから離れたときfunc _on_mouse_exited() -> void: reset_tween() tween.set_ease(Tween.EASE_OUT).set_trans(Tween.TRANS_ELASTIC) tween.tween_property(self, "scale", Vector2.ONE, 0.4)
3. スクリプトの解説
上記のスクリプトでは、
Tween を利用してボタンの scale プロパティを変更することで、ホバー時にアニメーションを実現しています。reset_tween(): 既存のTweenを削除し、新しいTweenを作成
mouse_entered.connect(_on_mouse_entered): ホバー時に_on_mouse_entered()を呼び出す
mouse_exited.connect(_on_mouse_exited): マウスが離れた際に_on_mouse_exited()を呼び出す
Tween.TRANS_ELASTIC: 伸縮するような柔らかいアニメーション効果
Tween.EASE_OUT: アニメーションの最後がスムーズに収束
4. 動作確認
スクリプトを保存し、Godot で実行すると、ボタンにホバーした際にふわっと拡大するアニメーションが適用されているはずです！
まとめ
このチュートリアルでは、Godot 4 でボタンのホバーアニメーションを実装する方法を紹介しました。
Tween を活用することで、簡単に視覚的なフィードバックを追加できるので、ぜひゲーム UI に取り入れてみてください！
- マウスホバーでスムーズに拡大・縮小
- Tween を活用した簡単なアニメーション
- Godot 4 での UI 改善に役立つ
次のステップとして、
modulate を使って色を変更するなど、さらにカスタマイズしてみるのも面白いですね！ 🎨✨