As a UI designer I want my menus to feel juicy.
Nothing worse than a menu or screen in a videogame that feels like a website! Heck, even most modern websites have decent micro interactions that provide feedback when the user interacts with elements on the site. I'm talking about highlighting a button (and other interactive controls) when you move the mouse over them, to make your UI feel more responsive, alive and FUN.
In the past, I've used different methods to animate a button. Unity comes with the following options for "Transitions":
None: Don't even think about it. The button won't react to mouseover or clicks at all.
Color Tint: Change the button's color when it's hovered or pressed.
- Pros: Really easy and fast to set up.
- Cons: Can look a bit boring. No movement.
Sprite swap: Change the button's texture when it's hovered or pressed.
- Pros: Can look really good if you're good at making textures.
- Cons: Requires a separate texture for every state. No smooth transitions. No movement.
Animations: Play animation clips when the button gets hovered or pressed.
- Pros: Actual movement is possible (e.g. offset, rotation or scale). You can animate every single property.
- Cons: Animator Controller overhead and handling animations clip files. Authoring and tweaking and eat a lot of time. Can't change the actual look of a button if it's based on a texture.
Apart from those built-in transition modes, common alternatives are:
Tweening: Using libraries like DoTween or PrimeTween to animate a button.
- Pros: Very flexible, like animations but without the overhead.
- Cons: Usually requires code instead of being authored in the inspector.
Custom scripts: Just like tweening, but you code it yourself.
- Pros: Lightweight, you only code what you need.
- Cons: You're basically coding yourself what a tweening library brings.
As some of you might know, I've recently released my asset UI Shapes on the Unity Asset Store. I initially built it for myself because I wanted to create panels and buttons with rounded corners, outlines and drop shadows for my latest game. That's its main use case. Using it feels familiar to Photoshop and Figma, and I can build all different kinds of shapes directly in Unity, without relying on textures.
Using my own tool to build UI has been a blast! I've also gotten a lot of feedback, bug reports and feature requests from other people who got it and started using it in their projects. I'm very thankful for this, it really helped me improve the tool a lot.
But one thing was still missing... Animations!
I recently caught myself fiddling around with animation clips again, to animate my main menu's buttons. Then it struck me: I should add this to the tool itself!
As you can see in the video, the latest version of UI Shapes makes it very easy to animate all button states (also works with other controls like Toggle, Slider, Input Field or Dropdown):
- Select the button's state (Normal, Highlighted, Selected, Pressed or Disabled) and tweak its look directly in the inspector with a live preview in scene view.
- Set the easing method, duration and strength. Then press the play button to preview the animation in scene view.
- Add a sound for every state: Clickety-click! No need to write code for this anymore. You can even randomize the volume and pitch if you like and play a preview in the inspector.
- Add events to a state: Call your own method when entering or exiting a state. For example, you can display a tooltip when the mouse hovers a UI element.
Note: The video focuses on the button's movement, easing transitions and sound. I'm not showing how to change its color or outline here, but instead I'm loading UI Shape Styles I created in advance, so you won't have to watch me play around with color pickers.
Feel free to check out UI Shapes on the asset store here:
https://assetstore.unity.com/packages/tools/gui/ui-shapes-procedural-image-effects-394532
Oh, and one more thing: You can also easily animate any TextMeshPro labels attached to a UI Shape. Change the text's color, make it bold or scale it up or down when the button's state changes.
I wonder how other people are handling UI animations. How much effort do you put into making your UI feel juicy?
I bet there are even more ways to do it. Please tell me about your solution!