Skip to main content

On Sale: GamesAssetsToolsTabletopComics
Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines
(+1)

Just wanted to ask real quick. I really love the little animation it does when you hover over and off the card. Can you tell me how you did it so nicely? I just cant seem to figure it out

(3 edits)

Sure, are you working with Godot?

The plain hover is just a tween that gets exceuted when the card, which has a matching control node of the same size, is hovered (control_gui_input). This would also work with an Area2D.

var tween_hover = create_tween().set_ease(Tween.EASE_OUT).set_trans(Tween.TRANS_ELASTIC)
tween_hover.tween_property(self, "scale", Vector2(1.3,1.3),0.3)

vice versa the exit animation is also just a tween:

var tween_hover = create_tween().set_ease(Tween.EASE_OUT).set_trans(Tween.TRANS_ELASTIC)
tween_hover.tween_property(self, "scale", Vector2.ONE, 0.6)

There’s actually a litte bit more too it as the cards “hover-areas” overlap so there is a bit of logic that handles that but the animation is just that simple.

I tend to create every animation with tweens as they are so versatile. The number counting in the UI, most movement and even parameterized shaders (like the background or the card flip) are created useing tweens.

If you want to dig deeper into the code base feel free to look at the repository I created for the jam: https://github.com/JBartscher/MiniBeansJam10/blob/813ec28b7f1d1b80b5c6e983e34625af1e67da0a/Game/GameObjects/Card/card.gd#L130

If you have any code related questions hit me up on the BeansJam Discord :)

(+1)

Dman Thanks a lot! I tried using tweens and even did the TRANS_ELASITC one but it didnt come to my mind that i could also use the set_ease in the same line (or any lines below it). Thanks a ton for the detailed answer!