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.
Extending UIToolkit
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!
