In Development: 2D UI Tool for Unity 3

[Edit 2-2-11] This project is now dubbed QuadUI. Read more here.

In the 5 Unity games I have worked on so far, there has consistently been one job that has always been, in a best-case scenario, tedious. What I am talking about is 2D UI. The current implementation in Unity (3.1) is less than efficient when doing the 2D elements of a game. Now, I love the ability to do immediate-mode GUI, but when developing for low-end hardware and mobile that isn’t really an option. So the other out-of-the-box option is to use GUITextures, which are not only bad for memory consumption and bandwidth, but eat up those ever-so-important draw calls on our mobile hardware.

A couple other issues with how things are currently:

  • No draw call batching for 2D
  • Large memory bandwidth due to several uncompressed textures
  • No real editor for 2D built-in.

Now there are some fantastic solutions out there for doing 2D in Unity, some of them free, some not so much. What I have seen (and used) though, are not very artist friendly, or very time-efficient for setup. I found myself punching in way too much data into 3rd party classes, which then generated my UI at runtime (On a mobile device that left me a marginal overhead around Awake and Start).

I was also forced into using programmatic animations and tweening classes (some of which were outdated by the time Unity 3 was released), which the artist half of me is never happy with. To make that side of me happy, I had to write custom adapter classes and hack my way around it just to use Unity’s Animation Tool. There went a few hours on top of all that data I was plugging in.

Also, if you’ve been working on games, you’ll know things change during development… all the time. So when things do, the last thing I want to do is go back and change values that were punched in inside of the Inspector, hit Play to test, then repeat because the numbers I punched in weren’t right. I want to open up the Scene, drag some stuff around, save, and then get on with my life.

The last problem I see is, though they work with Unity 3 just fine, they were designed during the 2.x feature set and take time doing things that 3.0 does automatically to boost performance, like batching.

So with that said, what I wanted was to create something that uses my favorite solutions for these 2D inefficiencies, and make it friendly for artists. What I came up with was a tool which allows the user to generate a 3D quad, textured from a custom imported UI texture atlas and place it directly into the scene to use Unity’s very awesome Editor the way it was intended.

Currently I have a rough feature set implemented and am testing as well as iterating on it inside of my current projects. This process insures that the product is suitable for a production environment because, well, I used it during the production of my games and it worked for me. I’d say in another week or so I should have a base alpha release for anyone wanting to try it out.

For now, here is a teaser video of it in action:

Now that you’ve seen what it is doing, I’ll take a minute to clarify exactly what I am trying to achieve.

What this is:

This is intended to speed up development of 2D UI in Unity’s Editor, without the need for 3rd party 3D Modeling software. It is meant to provide the same solution as other at-runtime orthographic quad solutions, but at authortime where all of Unity’s built-in Editor features can be used as intended.

What this isn’t:

I am not trying to reinvent the wheel. Unity’s Editor is fantastic for fast prototyping and iteration. I don’t want to, and will not build a Flash IDE-like interface when Unity already has all of the tools it needs. For instance, working in an orthographic environment with your Game view as a preview (like you saw in my video) is wysiwyg already. Unity’s Animation Tool, which is much like that of the animation tools in Flash (CS4+) and After Effects, can be easily applied to create fluid and light-weight animations for your UI. Bundle that with the built-in Animation Events and you can create awesome menus quickly and easily.

That being said, here’s some features I’m planning on implementing:

  • Rulers
  • Zoom (for those big textures)
  • Bundled framework for making usable UI fast!
  • Built-in support for Time.timeScale independent UI animations. Animate even while paused.
  • Create Sprite Animations right from the Editor

As I said before, I have used (parts of) this tool in games I have worked on. As I need to achieve different things, I will undoubtedly add to it to suit my needs.

Once it hits a level of quality I am comfortable with, I will be releasing it on the Unity Asset Store, free of charge of course.

‘Til next time


Leave a Reply