The New GUI
While most people at Unity are busy trying to get 4.0 launch-ready, we have a dedicated team trying to get our new GUI ready for a later release. We figured it was time to share a few details about it. To give you an idea of what we’ve been cooking, here is a quick test I put together in 1 day:
When making GUI for games, all assumptions about how controls should look (or sound) go right out the window. It was critical for us to give you full flexibility, so our solution uses animations for everything. Let’s look at a (slightly dull) button:
This button consists of 3 elements: the background image, the outline and the label. In the new GUI Editor, these would be made with different elements.
This is very powerful as it allows you to animate each element separately. The Button component on the root object plays animations on its children in response to user action. Each of these animations can activate hierarchies of GameObjects, so if you want to add a sound on hover, simply drag in a clip to the GUI Editor while recording into the Hover state. No coding required.
We’re always doing everything we can to make your work in Unity be as smooth as possible. This extends to the new GUI system, where we built a complete editor up from scratch. Simply drag your freshly-assembled buttons into the GUI editor, move them around, resize, reparent, animate them. Have some favorite UI controls you keep returning to? Just drop them in the toolbar, and they’ll sit there right next to the built-in ones – ready for when you need them.
In order to aid in layout flexibility we adopted Apple’s sizing model for controls. Each GUI element has a local size relative to its parent, and a collection of resizing flags that tells how to handle the parent changing size. Combined with parenting, this is a great way to handle the different aspect ratios of modern devices.
The GUI system also has a master scale factor in order to make it easy to support Retina displays.
3D groups enable full perspective transforms of your UI elements and are useful to create depth in your designs. You can see this used in the radar element. Each blib is it’s own unique object with animations in all 3 dimensions.
The image you see on the right was built in the GUI Editor with no scripting involved.
The timelines view provides explicit control over the render order of items. The topmost layers are (surprise!) on the top, and you can easily drag items up and down the timeline.
Any textures used in the GUI are atlassed automatically. To minimize draw calls, we employ dynamic overlap detection and use that to figure out which elements we can switch around without causing any visible depth changes. The GUI shown on the top of the post is rendering in 5 draw calls.
The new GUI system will ship with an array of standard built-in controls, as well as finely tuned thumbstick controls for mobile games. The GUI system includes full support for multitouch. To respond to, e.g., a user button press interaction, you can simply drag in a GameObject and choose which method to call. From the C# side, this is simply a delegate, so you can also hook everything up from code. All the built-in components are fully scriptable.
If you want to make your own controls, you can derive from GUIBehaviour. This gets you callbacks for OnMouseOver, OnMouseOut, OnKeyDown, OnMouseDown, etc. All of our controls use the animation system for full flexibility, so you can mimic that – or you can do pretty much anything from code.
That’s it from me! I’m on a complete high over having a full day of making a GUI that felt both creative and fun! I’ll use some of that energy to fix some bugs in this baby – so we can get it into your hands :)
If you have any questions about features or details, please post them below and I’ll do my best to answer them!