Skip to content

Creating a button animation with UIToolkit (Unity)

July 20, 2013

If you played already Café International for iOS (and seriously: you should!), then you might have noticed a special user interaction feedback throughout the game: buttons and other touchable elements jump a bit up and come back with a nice spring effect, plus a little fancy glitter particle effect. It gives just another way of interaction feedback that I personally like very much (which is why I did it that way 😉 ).

I wanted to have that now also for something I am doing with Unity, and fortunately the very flexible free UIToolkit add-on makes it really very easy to implement the exact same behavior. Since such an element generally also behaves like a button, we simply derive a new class UIJumpingButton from UIButton. With such a modified button you can do everything you could also do with a normal button: add touch up/down/move events, attach a sound, etc. In addition, there is a new touch event OnTouched that will only fire once the animation is completed and the button is back in place. You can decide then whether you want to fire something straight on the first touch (via OnTouchDown) or rather when things are settled again.

To achieve the jump effect, we just add some code in the onTouchEnded handler. So if a user touches the button it get’s highlighted, but he can still move the finger outside the button and release without anything happening then. Just if he releases inside the button, it will fire. We then apply a chain of two animations: jumping up a bit by a certain percentage of the screen height, and then falling back to the previous position with a slight bounce. When all is done, we fire the OnTouched callback, if set. Furthermore, we don’t allow another touch animation while the ongoing animation isn’t completed yet. And that’s basically all the magic to it.

This is how you would use jumping buttons:

UIJumpingButton b1 = UIJumpingButton.create("start.png", "startSel.png", 0,0);
b1.positionFromTopLeft(0.5f, 0.33f, UIyAnchor.Center, UIxAnchor.Center);
b1.onTouched += ( button ) => Debug.Log("Start pressed");

UIJumpingButton b2 = UIJumpingButton.create("options.png", "optionsSel.png", 0,0);
b2.positionFromTopLeft(0.5f, 0.66f, UIyAnchor.Center, UIxAnchor.Center);
b2.onTouched += ( button ) => Debug.Log("Options pressed");

And this is a video of what you’ll get then:

I compiled this sample as a unity package for you to download and try it out, plus you can grab the UIJumpingButton.cs class file and the ButtonGlitter prefab for the particle push effect from this download. It does also contain the current UIToolkit runtime, so it should run right away in any Unity project. If you want to test it inside a project that already contains UIToolkit, please delete the UIToolkit folder from my sample.

To get it going, just import it into your current or a new unity project and load the included demo scene then.

You can change the glitter prefab to any other style you like. Just experiment with the settings or the particle image − it’s fun! Or just switch it off, it you don’t like it at all. When you want to test it in the editor, just pull the prefab into your scene, so you can easily have it emit with a simple mouseclick and watch your changes instantly. Make sure to design the particles at low-res (use a small editor window), because the settings are automatically scaled up for higher retina resolutions at runtime and are expected to be set for low-res in the prefab.


From → Development

One Comment

Trackbacks & Pingbacks

  1. UIToolkit for Unity | The Rombos-Blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: