0 votes

How would I go about making a GUI that, say, when the mouse hovers it, the GUI will get slightly bigger to show that the mouse is hovering the GUI. Do I need to make my own sprite animation and somehow incorporate into GUIs or is there some kind of tween functions available?

in Engine by (35 points)

I guess you have to do this yourself with GDScript, maybe the Tween node can help

1 Answer

+1 vote
Best answer

Here is a way to do it:

I thought I could use a Tween node to animate the scale of the button when the mouse enters or exits it, but because Controls origin is on the top-left, scale would not apply properly, so I had to put the button as child of a Node2D, and I animated the scale of the parent instead.

extends TextureButton

const SCALE = 1.2
const DURATION = 0.2

onready var _initial_scale = get_parent().get_scale()
var _scale_tween = null

func _ready():
    self.connect("mouse_enter", self, "_on_mouse_enter")
    self.connect("mouse_exit", self, "_on_mouse_exit")
    _scale_tween = Tween.new()

func _on_mouse_enter():
    _scale_tween.interpolate_property(get_parent(), "transform/scale", \
        get_parent().get_scale(), _initial_scale*SCALE, DURATION, Tween.TRANS_QUAD, Tween.EASE_OUT)

func _on_mouse_exit():
    _scale_tween.interpolate_property(get_parent(), "transform/scale", \
        get_parent().get_scale(), _initial_scale, DURATION, Tween.TRANS_QUAD, Tween.EASE_OUT)
by (27,962 points)
selected by

Wow, that wasn't very hard! Thank you :)
For a full GUI menu I would probably need a lot of these nodes or is there a way to have it so I can have multiple buttons that react the same way?

You can copy the node, or make it a re-usable scene to it's easier to compose GUIs with it:

- Button 1 (Node2D)
    - Button
        - Label
- Button 2 (Node2D)
    - Button
        - Label
- Button 3 (Node2D)
    - Button
        - Label

I find it a bit annoying to rely on that Node2D but it's the simplest solution I found. Another solution would have been to tween the origin, with an additional Tween node and calculate the relative movement due to scaling so it stays centered...

I found this from a search, and it was really helpful. However, I had to update it for Godot 3.1.1. Here's a minimal project which demonstrates it: https://gist.github.com/MageJohn/1ead3c1d58e65cec0a5fced1618e1139 (Click download as zip). I was able to do it without Node2D, and I used a Vector2D for the scale factor, which allows different scales on the x and y axes. I also discovered that the scale happens from the point specified in the pivot offset (rect_pivot_offset).

Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to webmaster@godotengine.org with your username.