|
|
|
|
Reply From: |
Zylann |
Here is a way to do it:
http://zylannprods.fr/dl/godot/GuiButtonSizeAnim.zip
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()
add_child(_scale_tween)
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)
_scale_tween.start()
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)
_scale_tween.start()
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?
alibix | 2016-07-10 22:04
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
etc
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…
Zylann | 2016-07-10 23:46
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
).
MageJohn | 2019-08-30 22:49