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 を使って色を変更するなど、さらにカスタマイズしてみるのも面白いですね！ 🎨✨

ゴ

作成者

ゴドチュー

最終更新日: 2025/04/04 01:43

コメント