I have just released a new GUI system for Unity that streamlines the developer work flow whilst keeping key features like sound, vibration, WYSIWYG, and animation. Please do take a look at the videos on my website and the information on the unity asset store, both links are at the end of this post.
Thank you!
Summary
GUIEgg is a brilliantly easy to use GUI system for Unity that includes animation, sound, and editor integration. GUIEgg looks great by using textures to draw button states, this means you can create great looking user interfaces without all the fuss.
Features
GUI is visible in the editor, without pressing play (WYSIWYG)
Supports iOS, Android, and Flash
Dynamically and automatically handles varying screen resolutions
Animation of GUI elements
Sound integration
Lightweight GUI event system
Video tutorials and documentation
Requirements
Compatible with the current versions of Unity (4.0, including free).
Return on Investment
The cost of GUIEgg equates to roughly 10 minutes of a software engineer’s time. In return GUIEgg can save you days of work on a single user interface compared to Unity’s built in GUI functionality. For a demonstration of how effectively an interface can be built using this system see the introduction video tutorial.
Very nice asset, you did a remarkable job making the process of GUI creation elegant. The professional and simple tutorials are well done as well. What did you use to capture the videos? I’m looking for a good video recording application (there are many) and was wondering what you used.
I have a couple feature requests
First are tooltips, I didn’t see any mention of this in the video tutorials. My game will have a great many options and tooltips are essential for helping the player learn the icons in the GUI.
Second is a system where icons/text of the GUI can exist in a sort of dialog box. I’m working on a city builder game and when the player selects the button for data overlays I need to activate a sub-set of icons for each overlay, but I need them to appear in a sort of dialog box to help organize and visually represent their relationship to the initial icon. I could sort of do it with a button background color but I’d rather drag icons into a dialog that’s parented with the initial parent icon. Naturally I would need the dialog to scale with the content it contains.
Third is a little more abstract, when the player clicks a building I need to display a draggable dialog to display the information for that building. The data it contains will be dynamic so I will need to update the information as the game progresses. So, naturally dragable dialogs will be important. I will need to create generic dialogs for building info and populate them programmatically at run-time as needed.
Fourth are more anchor points for docking dialogs or other GUI features. TOP_MIDDLE, BOTTOM_MIDDLE, LEFT_MIDDLE, and RIGHT_MIDDLE would be a great edition.
Finally a checkbox for the inspector for the GUI options to lock scale when resizing elements, that way when X size is changed Y changes automatically. This is mearly a convenient workflow feature that will help ensure an image doesn’t get skewed when laying out the GUI.
Thanks for the great asset, if you include the features above you will get a purchase from me, guaranteed!
Your first and second points include the need for text descriptions of buttons, etc. My current method is to add text boxes to each image when text is needed. This works well. I also recognise that tool tips and intrinsic text for all widgets is useful for many developers. Consequently, I will upload an update with tool tips and intrinsic text soon.
Your second point also speaks about grouping icons. This is a great idea. I currently would add an image of the shape to group the items and display it behind the icons. I actually did this already for a project I had and it works well. I will however, add this to my road map.
Clearly the additional anchor points are simple to implement. Just a few lines. If you want it then it’s done!
So too is the last point about the scale locking. However, this is actually already added. The developer can lock the texture so it is never stretched, only shrunk. I could extend this feature further so the texture is not even shrink. In relation to the aspect ratio: the aspect ratio is always respected. A developer usually wants their GUI to be at a set ratio. Consequently, I always resize according to the shortest edge. However, I plan on adding a check box to allow the aspect radio to be ignored (just in case a developer wants to do so).
My goal throughout all of this is to make the GUI really intuitive to create. Clearly there are more verbose tools that cost many times more but this tools is aimed at those developers who want to save time on their GUI creation but still want a great looking GUI. I also like the design paradigm where the whole GUI can disappear with some nice animation and a single click. This is popular with my work.
(Oh, and the video capture was completed using CamStudio)
I understand you can lock the size so it reacts to the window at run-time, my reference was actually for the editing of the GUI in Unity, you manually set the x and y dimensions independantly, my suggestion was to allow the user to lock the aspect ratio during layout so a change in X size is reflected in Y size without having to set Y size. This would help with non-square images as the user wouldn’t have to calculate the ratio in order to input the proper values.
So lets say an image is selected that is 24 x 135. If I go in the editor and change x to 42, currently I’d have to manually set y to whatever that ratio is, what I suggest is you allow a checkbox to lock the scale so when I change x to 42, y automatically changes to the value needed to preserve the original aspect ratio. This would be done in editor before window resizing is set up.
Allowing floating dialog boxes to be draggable and subsequently dockable to the aforementioned anchor points would be so fantastic I’m sure many people would be able to use this feature for more complex games. I know it can be done, I am just not sure how complex it would be.
For tooltips I imagine a field for GUI elements to have a string element that can be set in editor or programmatically that would pop-up the text when onmouseover is detected for the GUI element. Your system can then calculate the best place to position the text based on the amount of text, location of GUI element, and some visual settings (like tooltip background color/opacity).
In the GUI for my game there will be a master button that all other GUI elements are children of. This button will be discreet and in a corner and allow for the entire GUI to be hidden. This will allow players to take screenshots without the GUI. Icing on the cake will be the animation shown when the GUI is re-activated.
Are their any parameters to animation type/speed? I imagine if the button is docked in the lower left corner and clicked a dialog docked to MIDDLE_LEFT wouldn’t need to go toward the master but slide off the screen to the left. Basically an option to animate the GUI element based on a couple factors: Unroll from Parent, Slide to docking point, or just appear. It is these subtle features that really make a GUI and game stand out as professional and what I want for my game.
The aspect ratio lock within the editor is a useful idea. I can read the texture aspect ratio and use that. This way the developer doesn’t have to input any dimentions. Then if they adjust x or y the other can be automatically ajusted. I’m putting this on my road map for the near future.
The tooltips are exactly what I am working on now. After a set duration the tooltip is placed on the screen in as best a position as possible.
As I was saying before, the master button shrinking the whole GUI is a great paradigm and works well with the GUIEgg system. The shrinking of the GUI to a set anchor point is currently do-able with this release. The main button would just tell each GUI component to contract and each component is set to its anchor.
Finally, in relation to the animation, the animation can be configured to animate according to a user defined time and animation style. I use iTween as my tween calculator. Consequently, all of iTween’s current aminations are available (and I’ll add new animations as they appear). Thus, this should be automatically expanded going into the future.
Hope this helps. Just repond if you want to know where other features are going.
Great news that tooltips are being added, this will greatly improve a games learning curve for people who skip tutorials and documentation, which I daresay is most people.
Seems a very nice gui system. I wanted to buy it today but it is for unity 4 only …
(Grrrr… As I said again in this forum, many of us have not upgraded to unity4 yet)
Thanks for the Unity 4 feedback. I’ll take an afternoon to try it in my old Unity 3.5 and see how much work the regression would be. In principle it should OK to create a 3.5 version but let me get back to you on that.
No, the license on iTween means I can add it as an internal dependency within a namespace to create context isolation. What this means is the developer doesn’t have to worry about any dependencies. GUIEgg will just work independently, out of the box!
Thank you, The widgets I have implemented so far are those I’ve needed on my own projects. However,there are a host of widgets that I’m thinking about, mainly those obvious examples like a combo-box. Suggestions taken. I will post a road map on my website shortly,
I have had a few emails about GUIEgg relating to the PieMenu. Yes, GUIEgg has a PieMenu widget and there is a video tutorial that shows the PieMenu (Introduction). I will create a video that shows how to use it in detail later but it’s as simple as the rest of GUIEgg. You create the menu in the usual way and then set one parameter on the root menu (Drag on the GameObject that the PieMenu is to track). That is it. The specific parameter is under PieMenu in the properties list.
Oh, and thanks or those who have brought GUIEgg so far, it’s MUCH appreciated (becasue of how Unity run things I have no idea who you are, but thank you!!!).
