Introducing UIToolkit for Unity available on Github
(Intro tutorial available on YouTube here: http://youtu.be/WeV1zbMpm5k)
We are proud to make available an amazing tool for creating HUD's, menus and animated sprites today! UIToolkit aims to make creating interactive menu systems and HUDs with a single draw call for multiple resolutions/devices dead simple. That's quite a mouthful and a tall order. The library comes with a bunch of different UI widgets out of the box and it makes creating your own widgets extremely simple. Mouse support is available while in the Unity editor for quick and easy testing along with a debug mode that displays the touchable rectangles in your scene live. Some conveniences for dealing with HD resolutions (iPhone 3 vs iPhone 4 for example) are optionally provided and include:
- automatic texture swapping to a double resolution texture for HD
- automatic reconfiguration of UV coordinates
- automatic handling of double resolution UIFonts
The kitchen sink and text test demo scenes included with the UIToolkit are an exceptional example of the power of the system. You can run these demo scenes on a non-retina iPhone, retina iPhone and an iPad and the exact same code will layout the controls and text in the same places. On top of that, the retina and iPad will receive textures that are twice the size automatically so they will remain pixel perfect and looking crisp!
Built in UI Components
UIToolkit provides all the standard controls you would expect and more. There is an exceptional attention to detail with regards to the way the controls feel when using them. For example, all touchable UI components can have highlightedTouchOffsets added. This mimics what Apple does with their iOS controls by adding a padding around the control that is activated while the control is being touched. If you set the highlightedTouchOffsets to have an extra 30 pixels and a user touches the button, they can slide their finger an extra 30 pixels outside the boundary of the button and it will remain highlighted. You can experience this by opening any Apple app on your iPhone with a button in it and touch your finger on it than slide it around off the button further and further until it is deselected. This behavior is available out of the box for any controls included with UIToolkit or any custom controls that you add. So what does UIToolkit include out of the box?
- UISprite: the base of every component that can be seen. All UISprites can have animations added to them that can be played on demand.
- UIButton: standard button with selected state, optional sound on touch down and delegate action on touchUpInside
- UIContinousButton: UIButton that can either report every frame that a finger remains on it or when a finger touches down or up
- UIToggleButton: 3 state button that can be used just like a checkbox if desired
- UIProgressBar: standard progress bar that offers 2 modes of progression: texture stretching or just revealing the texture as progress advances
- UISlider: slider that works in both the horizontal and vertical direction
- UIKnob: rotating knob control
- UIText and UITextInstance: reads in a .fnt file and displays text including line breaks (base code courtesy of EskemaGames)
- UIJoystick: joystick control with configureable dead zone and background image
- UISwipeDetector: control that is capable of detecting swipes in any combination of directions (up, down, left, right)
Animations Baked in to Every Component
Animate localScale, alpha, rotation and position with one line of code. You can animate to, from or from-to for any of the animation types and specify your easing style. You can even create your own easing equations if you so desire.
Why are we releasing such an awesome product for free?
Over the last couple years we have seen a lot of really fun games made with Unity thrive in the App Store. We have also seen a bunch that are solid games with less than optimal looking menus and HUDs made with the standard Unity GUI classes. Unity GUI works great on desktop but it does not perform optimally on mobile devices. Enter UIToolkit. If you look at some of the top games in the App Store there is one thing they all have in common: polish. Try playing around with the menus, pause screens and HUDs on some of the great Unity-made games out there like Gears and BattleHeart. They are smooth as silk and look great on retina, non-retina and the iPad. These are highly polished games that have a great feel from the moment you launch them all the way through to the end. UIToolkit helps reduce the man-hours to get this kind of polish and we want to see every Unity developer succeed so this release is us doing our part to help the community provide a better end product.
UIToolkit was designed from the start to be as easy as possible to extend. We want the community to make some really cool controls that can be shared. Creating a new control can be done easily by just extending the UITouchableSprite class and implement one or more of the touch-related methods: onTouchBegan, onTouchMoved, onTouchEnded. That's all it takes. If you make an awesome custom control feel free to send us a pull request on Github and we will include it for the rest of the community to use.
So, Let's See Some Code
UIToolkit has an easy to use workflow and API. Once you have your textures created (using the free version of the excellent Texture Packer) you can reference them by name. This is all it takes to make a button in the top-left corner of the screen that has an extra 30 pixel touch offset padding when highlighted:
- var playButton = UIButton.create( "playUp.png", "playDown.png", 0, 0 );
- playButton.highlightedTouchOffsets = new UIEdgeOffsets( 30 );
Pretty simple, right? You may notice that this doesn't do anything all that magical with regards to layout though, so let's see an example of creating a UIToggleButton with relative positioning (in the top-right corner) so that it works on all resolutions:
- var x = (int)UIRelative.xPercentFrom( UIxAnchor.Right, .1f );
- var y = (int)UIRelative.yPercentFrom( UIyAnchor.Top, .1f );
- var toggleButton = UIToggleButton.create( "cbUnchecked.png", "cbChecked.png", "cbDown.png", x, y );
Not all that much more difficult. Now go download it and add that extra polish to your game so that you end up with a hit! Get it now on Github!
Last edited by Prime31; 05-06-2011 at 04:31 PM.
This looks fantastic! Very generous of you to give it out for free. Thanks!!
Awesome! Great work!!! Thanks very much for such a generous contribution to the unity3d community.
Thank you very much !
Life's What You Make It - don't forget it's YOU
Just starting my new project (which will also include your Adwhirl option on iOS) so this has come at a fantastic time
Thank you so much for releasing a gem for free...
Well, I like your products, so I'm really excited. Will try it out.
* Layouts and Containers - I don't see any containers in there. Are you planning to add layout/container type controls? Ie, panels that hold other objects that can be adjusted/animated/moved/scaled by just affecting the parent? This type of thing is incredibly powerful when building little panels of buttons. They can all fly on at the same time.
* Scroll Bars - Goes along with Containers.
* More? Are you considering this done or are you planning to add to it?
* Asset Store? Are you going to add this to the Unity Asset Store?
Look forward to trying it out.
* UIPanel is actually next on my list. It didn't quite make the initial release but being able to group buttons/widgets and move them around is incredibly handy. We wanted to get this out ASAP so the UIPanel got pushed out of the initial release.
* Scroll bars are on the roadmap but a little ways out.
* I don't think this will ever be done. We plan on using it in every game we make so it should see plenty of love in the future. We also are hoping to see some new UI controls coming from users out there. Which brings me to...
* ...absolutely not going to be in the Asset Store. We want this to be a community project, not something the we alone support. It was made to be easily extensible and we would love to see what creative controls can come from other folks using the library.
@MikeD thanks for this invaluable community resource!
This definitely looks promising and making it free / community supported is amazing
I've had a browse through the code and was wondering if there's a way to determine if a gui event has been fired. If I have a 3d scene and I'm going to fire a ray into it to perform some action, I only want to do this when the user hasn't clicked the user interface (To prevent both clicking the button and modifying the scene behind the button at the same time). Can this be done by simply testing if getButtonForScreenPosition() is null before firing the ray? or is there a more correct way of handling this situation?
@Tainted, everything in the UIToolkit is run from an orthographic camera in 2d. You *could* pull that off with a little work but it isn't the focus of the toolkit.
would be great to have 3d UI toolkit, thanks prime(31) really cool work as always.
@anti001, I know it isn't free, but Bradys EZGui works in 3D and is a fantastic product that you should definitely consider if you haven't already.
Sorry I didn't explain myself very well. The 3D scene stuff is all my own code. Basically my code works like so
- bool guiEventOccurred = HandleGUI();
- if( ! guiEventOccurred )
- //Perform my own code where I use the Input.touches.position to fire a ray in 3D and select an object.
- //I don't want to select an object which is behind a button on the screen
Since my gui code is horrible, I'd love to change over to using this system. I'm just trying to figure out the kinks before I commit myself to performing all the code changes.
@TaintedLemon, same situation here- probably is a common use case. At first glance at the code, I think either what you suggested with getButtonForScreenPosition() or perhaps something using UISwipeDetector "Swipe detector view - big, giant touchbleSprite behind all others". Probably there are other possibilities.