EZ GUI - Powerful, Low draw call GUI solution

UPDATE:
EZ GUI 1.01 is now available and includes several new features and tweaks as well as a couple of bug fixes. You can obtain it at the group mentioned in your order receipt e-mail. Have fun!

P.S. If you are using SM2 with EZ GUI, you will probably also want to update to the new 1.52 version of SM2 as well.

 

Hello,
well i'm very happy with EZ.
The only thing i still cant figure out is how to create a Radar.
Well if someone know and like to share plz do it
@ Brady i sent you a Radar script a while ago.... maybe you have now the Time after final release .... ;-)
thank you so much !
kerstin

 

UPDATE 2:
New tutorial video posted:
http://www.anbsoft.com/middleware/ezgui/

@Muckel

Now that I have a bit more time, I'll go over that script and see if it is something that would be a good fit for EZ GUI. One thing about it if it is just a display, that is, it doesn't receive any input but rather just displays information, you might just use the SimpleSprite class that comes with EZ GUI instead, or SM2 if you want it to use sprite animation. Anyway, I'll give it a look when I get some time. Thanks again!

 

Just to be clear, all the button animations in the teaser video (e.g., moving buttons and sets of buttons on and off screen) are done with EZ GUI? SM2 is not needed? If so, that's just what I need. The only thing that's keeping me from getting EZ GUI right now is Unity's uncertain future for iPhone/iPad development. If we are going to be limited to web delivery with Unity apps, then our use of Unity will be much more limited.

BTW, one additional feature that would make EZ GUI everything I could ever want would be expanded text input capabilities. In particular, the ability to make spreadsheet-like data entry tables is something I really need and so far have not found a way to implement (well) in Unity. If I could do that, I could live happily ever after with Unity, and never have to deal with Adobe or Director ever again.

Keep up the GREAT work!

 

Hey, Muckel!

Good (and Sorry) to see you here.

Sad about not seeing you in the SpriteUI thread.

Good you are here!

 

Okay, sorry about that everyone, I just dug up information that Google has temporarily disabled downloading .zip files from their groups, which explains the message when trying to download the update. So I've re-uploaded the update in RAR format until Google re-enables .zips. You may need to right-click and Save Target As.

Now I'm back to work on more tutorials...

Have fun!

 

I purchased the EZ-GUI + SM2 bundle a few days ago and I'm very pleased. So far I've only scratched the surface of all the capability these two packages can provide, but I really like what I see. Excellent work Brady!

I also want to express my gratitude for the tutorial (#2) that you posted earlier today. I really appreciate the detailed explanations you provide in this one. Very helpful!

Cheers,
Mal

 

Thanks for the kind words, Malveka. I've just posted another tutorial, and I hope everyone enjoys it as well.

Thanks again.

 

This is awsome stuff Brady!!! Can't wait to use this in my next game

 

Hey Brady - toying around with the latest version. Just want to put up a short note here to say how excited i am about the new release. This is simply amazing - i was never expecting that you woul hook up a complete tweener library and stuff like that. All in all the product is by far so much more than i was expecting to get for the money. I can recommand the purchase to any of you guys.

Keep up the good stuff!

P.S. - i observed a little bug while tweaking/changing the transitions for existing objects. The changes will sometimes not be saved/recognized. Or i am missing something in the workflow...

Cheers,

 

Brady - sorry just was working a bit more longer with and have discovered that i have simply made everything wrong while doing the transitions... Mea culpa. Everything is working perfect - excepting the dumbass user (me). But this will happen, if i don't watching the tutorials and don't read the documentation

Cheers

 

No problem, Sandor. Thanks for the kind comments. I'm glad you're enjoying it.

 

Well this is so much better now !
With SM2 EZ together it's really a bummer !!!
I'm so happy that i port my HUD GUI in one day over to EZ ....
all is working well except for my Radar but i'm shure Brady will find a solution soon ;-)
Also Brady the tutorials are awesome also the Introduction Video ... now i know much more what i can do with it!
I can recommend this for everyone !!! A must have !

@ Little Angel - if i saw the first post from you here i know i had also to swich ). I really like how you explain and help people !!!

Thanxxx
kerstin

 

UPDATE:
I've posted a second tutorial on panels. This time covering how to create a navigable menu, as well as how to easily size your controls/sprites when using a non-orthographic camera.

 

Brady:

One bit of criticism about EZ GUI:

You don't charge enough!

Seriously. (Not that I mind, but...)

For $49.95, less than a days labour at $10/hour, we not only get this great bit of software, but absolutely fantastic support and professional level docs and tutorials.

 

@Angel - have to agree with you But i hope that the installed Unity userbase of 170K devlopers will make the work profitable. I hope that a LOT of people will embrace Brady's solution...

Cheers,

 

Haha, thanks, Little Angel. It is an introductory price, after all.

Oh, and I'm not sure how much of an angel you are... look at your post count! :twisted:

Thank you too, Sandor. I appreciate the kind words.

 

I watched your tutorial on panels and wizards and was curious how you tied the panel in and out animation with the fog sprite panels.

 

yeah I was also wondering that

 

Ahh, I was wondering when someone would ask about that.

Okay, here's how I did it:
I created a ship-load of foggy-looking sprites, and made them all children of a single GameObject. I saved a reference to this parent object in a script. Then I had my Change Panel buttons (such as the option button, or a back button) also invoke a MoveForward() or MoveBackward() method in my script. Inside MoveForward() and MoveBackward(), I animated the parent of the fog sprites, thereby moving all the fog sprites at once, with a line of code like this:

Code (csharp):

1.  
2. AnimatePosition.Do(fogParent, EZAnimation.ANIM_MODE.By, Vector3.forward * -10f, EZAnimation.sinusInOut, 1.5f, 0, null, null);
3.  

This line tells EZ GUI's animation system to play an animation of type "AnimatePosition", apply it to the fog parent object (fogParent), and move it in the negative Z *by* (note the mode) 10 units. And it eases in a sinusoidal way, and takes 1.5 seconds, no delay, and no start or end delegates ("null, null"). Since in the demo the panels move using sinusInOut, then the fog moves the same way, the same distance, and for the same duration, as the panels, making it appear that you are moving through a fog bank every time you proceed from one panel to another.

In my script, I also saved an array of all the fog sprites (by iterating through the parent object's children), and in Update() I check the world-position of each fog sprite, and if it goes too far in one direction, it "wraps" the sprite back to the other side of the desired area.

I actually made extensive use of the various EZAnimation-derived classes in-script in the demo scenes. As you can see, you can use it with non-EZ GUI objects. It's sort of like iTween, but much faster and efficient on mobile devices since it doesn't perform lots of repeated allocations/deletions. Instead, it caches animator objects and reuses them, so no garbage collection stuttering in your game! You can just start an animation from a single line of code and forget about it without any worries.

I hope that helps!

 

^_^ or should I say: :twisted: ?

I hadn't noticed that until you pointed it out:


... and of course within a post it is gone...

But I did save it for posterity!

 

Say...

You mention in your tutorial video about opening closing panels using one line of code... (about 0:10:50 in Tutorial #4)

Do you know where I'd find reference to that? I'll admit I'm a bit crap when it comes to reading code documentation without examples. I've dug thru the docs, and I'm sure it's pretty obvious to a regular coder. I'm sure I just grab one of the referenced methods and invoke it... but I can't figure out which one or how.

In general, I'm unclear how to bring in and dismiss panels using code. (Or any controls for that matter...)

I've followed the Getting Started in the docs, and I can open and close a panel with a UIPanelTab from an EZGUI element, and once panels are opened, your tutorials show how to use the existing code elements to move thru them with transitions... but what about panel or button control from within the code? (Prolly just panels, can't imagine needing to control a single button...)

Currently in OnGUI, I have everything controlled with booleans or switches:

Code (csharp):

1. function OnGUI () {
2.     //  Quest Window
3.     if (openQuestWindow) {
4.     //  If the "open quest window" toggle is true...
5.         GUI.Window (1, questWindow, DrawQuestWindow, "Quest");
6.         //  ... then draw the Quest Window
7.     }
8. }

Code (csharp):

1. function DrawQuestWindow () {  
2.     switch (currentQuestProgress) {
3.         case QuestProgress.Eligible:
4.             if (GUI.Button (new Rect (10, startY, 130, 30), currentQuest.title)) {
5.                 OpenQuestDetailsWindow (currentQuest);
6.             }
7.         startY = startY + 35;
8.         break;
9.  
10.         case QuestProgress.Etc.
11.             etc.
12.         break;
13.     }
14. }

Just thinking out loud a bit... I'll dig in and get my hands dirty after a cup of coffee...

 

If you have a "lone panel" and want to play its BringIn/Dismiss Forward/Backward transitions, just do:

Code (csharp):

1.  
2. myPanel.StartTransition(UIPanelManager.SHOW_MODE.BringInForward);
3.  

You could replace the "BringInForward" bit with DismissBack, DismissForward, or BringInBack. You'll find these enums listed in the scripting reference under UIPanelManager.

If, on the other hand, you want to bring in/dismiss a panel as part of a menu/wizard, and therefore through a UIPanelManager, you do something like this:

Code (csharp):

1.  
2. // Bring in the panel by reference
3. panelMgr.BringIn(panelReference);
4.  
5. // or bring in the panel by name
6. panelMgr.BringIn("My Panel");
7.  
8. // or bring a panel in in a specific direction:
9. panelMgr.BringIn("My Panel", UIPanelManager.MENU_DIRECTION.Backwards);
10.  
11. // or dismiss the currently-showing panel:
12. panelMgr.Dismiss();
13.  
14. // or dismiss in a specific direction:
15. panelMgr.Dismiss(UIPanelManager.MENU_DIRECTION.Forwards);
16.  

You'll find all the various permutations available in the scripting reference under UIPanelManager.

 

Delete/Destroy:

In the docs there is this:

I was looking this up, as I was trying to make sure I deleted the sprite script and was unclear how to use Delete().

My search, however:
http://unity3d.com/support/documentation/ScriptReference/30_search.html?q=Delete

... has reached a dead end. Is there a good example of using Delete() on a specific instance of a script?

Unfortunately, searching for terms like "Destroy" and "Delete" in the forums (and the search engine ignores "(", so I can't even search for "Delete(" ) leads to too many irrelevant hits...

(FWIW: I'm trying to resize my array of buttons I created in the example on page 4, and - as the sprites are instantiated - it seems that I have to destroy all of the existing sprites before I rebuild a new group with a new size.)

 

(Face-palm)

You mean this:

It suddenly occurred to me that if I couldn't find it in the Unity docs, it might not be a Unity thing...



SO - In case someone else finds this and wants resolution, this is what I did:

Code (csharp):

1. for (var i : int = 0; i < buttonArray.Length; i ++) {
2.     buttonArray[i].Delete();
3.     Destroy(buttonArray[i].gameObject);
4. }

 

Good find Little Angel. I have not been doing this in my game so this is quite valuable!

 

@Little Angel

I may be misunderstanding how you're working with that button array (I'm assuming its for your inventory system), but since iPhone performance doesn't much like garbage collections, is there a reason you're needing to destroy the buttons instead of re-using them by just Copy()'ing another button type? Just wondering, incase it is due to something I can improve.

 

...

I could work on a way of not destroying the buttons.

...

This was a first pass solution. In my former life as an OnGUI user, it was easy enough to just resize the array. In EZGUI, the first solution was to destroy all the previous buttons, resize the array and recreate it.

Now that I've been thinking about it, I could create a large number of buttons (larger than I'd ever need, within reason) and point the working but empty slots to an empty slot texture, and the buttons associated with a range outside the working array to a texture of nothing.

Unfortunately my brain is not big enough to make these great leaps and I need to step up the slope one stone at a time...

The next step is going to be able to have a scrollable panel that contains UIButtons!

 

Actually, you can just do:

button.Hide(true);

And that'll make the unused button(s) invisible, and in fact it actually disables its renderer so it's not eating any performance. Or possibly even better:

button.gameObject.active = false;

 

In unity iphone, whenever I run Window -> UI Control Editor, I get the following error

Unable to find required resource at 'Editor Default Resources/Builtin Skins/Lucida Grande.ttf'
UnityEditor.EditorWindow:Show(Boolean) (at /Users/build/builds/unity-iphone/iphone/Editor/Mono/Generated/Utility.cs:671)
UICtlEditor:ShowEditor() (at Assets/Editor/Editors/UICtlEditor.cs:67)


Do you have any idea Brady? The editor will show up momentarily, but once it is minimized I cannot get it back. I'm guessing this symptom is a side effect of the error.

 

Actually, the EZ GUI docs address this as it is a harmless bug in Unity iPhone which does not exist in later Unity versions. Unity iPhone will give this erroneous message pretty much whenever an editor script tries to draw any content into an EditorWindow. But Unity is just saying it can't find its built-in font, which in the end, doesn't actually impact the functioning of the editor.

The minimization issue is another matter. I haven't seen that happen. In fact, I didn't think it was possible to minimize the Unity iPhone window or its editor windows? Can you describe in more detail the steps to reproduce this?

 

Whats the best way to have the sprites scale to the devices screen size. IE I want to have the buttons created for iPad and want them to be shrunken and pixel perfect for iPhone 3G/s and 4.

 

Well, you won't be able to use the same graphics to be pixel-perfect both on iPad and iPhone unless you want the sprites to be larger, proportionately, on the iPhone since the iPhone's screen has fewer pixels.

See Tutorial #2 to see what I mean.

Otherwise, if you want to use the same graphics, the best-looking approach for both platforms would be to size your graphics so that they are pixel-perfect on the iPad, and then scale down for iPhone (turn off mip-mapping and they'll still look good shrunken down on iPhone). The way to do this is to uncheck pixel-perfect, and then go to Custom->Size Sprites, and then select the camera used to render your sprites/controls, and set the height to 1024 (if in iPad portrait) or 768 (if in iPad landscape). This will size the sprites to be pixel perfect at that resolution, but will let them size down proportionately at lower resolutions.

Let me know if you have any questions about this.

 

Hello there,
Is there any Anchor/auto-resize feature on EZ GUI/SM3 in case we change the screen aspect/resolution?
Cheers,

 

Yes, there are still the anchor and auto-resize features familiar in SM2. Though I'm not sure that these are relevant to a resolution change. Perhaps you mean a way to "anchor" an object to a certain screen-space position in the case of a resolution/aspect ratio change? Not automatically at the moment, no.

But if pixel-perfect is disabled, since the controls are positioned in world space, they will continue to occupy the same percentage of screen area regardless of resolution. If pixel-perfect is enabled (and an orthographic camera is used to render the controls), then the controls will always display at a 1:1 pixel ratio on start, regardless of resolution. If the resolution changes after the scene is loaded for some reason, you can update the relevant controls by calling SetCamera(), which re-calculates their world-space size to be pixel-perfect.

As for repositioning, the easiest way to handle it in a situation like the iPad where you know the two possible aspect ratios is to put your controls under a single parent GameObject, and then just have a position for each possible aspect ratio and set it in Awake(). So for instance, if you know on iPhone (3:2) you want your control to be at (-10,0,0), and on iPad (4:3) to be at (-12,0,0), then just do something like:

Code (csharp):

1.  
2. function Awake()
3. {
4.    if(iPhoneSettings.model == "iPad")
5.       guiParent.transform.position.x = -12;
6.    else
7.       guiParent.transform.position.x = -10;
8. }
9.  

That would move all controls at once.

 

Fantastic !!! now i have weekend YES!

 

Yes, just make sure all your controls are under the same GameObject, and then declare a variable like "guiParent" somewhere in your script like so:

Code (csharp):

1.  
2. // C#
3. public GameObject guiParent;
4.  
5. // JS
6. var guiParent : GameObject;
7.  

Then drag the parent GameObject onto the "Gui Parent" slot that appears in the inspector for your script.

 

The EZ GUI page now has another tutorial available. This time about wizards, and using a multi-camera setup.

Enjoy!

 

Code (csharp):

1.  
2. // This will run forever (a negative duration
3. // tells it to loop infinitely.
4. AnimateRotation.Do( radar.gameObject, // the object to be animated
5.    EZAnimation.ANIM_MODE.By, // Rotate by this amount
6.    Vector3.forward, // 1 degree about the Z axis
7.    EZAnimation.linear, // Linear interpolation
8.    -0.1f, // Do it in 0.1 seconds, infinitely (hence the negative)
9.    0, // no delay
10.    null, // no start delegate
11.    null);  // no end delegate
12.  

This was exactly what i'm looking for..... but it doesn't work...
it rotates z 0-0.1 and then it goes back to 0

Code (csharp):

1.  
2. var radar : GameObject;
3.  
4. AnimateRotation.Do( radar.gameObject, EZAnimation.ANIM_MODE.By, Vector3.forward, EZAnimation.linear, -0.1, 0, null, null);
5.  

I use the Code in the Script where i all put my HUD functions like your Demo.js...

Is there any documentation about EZAnimator ?
... would like to use it more
thank you
kerstin

 

Brady, these video tutorials are so helpful. As a non-coder, I was drowning in tutorials, code snippets, and manuals about the Unity GUI and I was about to throw up my hands and give up. With your three EZ utilities, I am beginning to see the light. Many thanks.

 

@Muckel
Sorry about that, I had forgotten about it re-setting to the start value at loop iteration. I'll have an option not to do that in the next release, so the code will work. Oh, and you'll find the documentation for using EZAnimator in-script in the scripting reference (there's a link to the reference on the left side in the EZ GUI docs).

@lmari
Thanks very much for the kind words. They are much appreciated.

 

I just purchased EZ GUI a couple of days ago and have been trying to figure things out. It has so many capabilities it might take me quite some time to explore them all. Great job!

Is there anywhere to ask specific questions about EZ GUI? On the web site it mentions a support forum, but it doesn't seem to work. I've gotten stuck pretty much at square one and don't know where to turn, other than here. So for now, I'll just ask my question here, and you can let me know if this is not the right place.

I can't figure out how to position buttons precisely on screen. I have a row of buttons, all 64x64, that will live at the bottom of the iPad screen. I've laid out the interface in Photoshop and know exactly where each button needs to go, but don't see how to position them in screen coordinates with EZ GUI. I can drag them around in the scene view, or change their offsets, but neither of those are screen coordinates. And when the user rotates from portrait to landscape or turns the iPad upside down, the buttons will need to be repositioned. So how do I put my first button 32 pixels from the edge of the screen, and each successive button 64 pixels to the right? Then in landscape, the buttons need to start 160 pixels from the left, and so on. For example, if I drag a button to the left edge of the screen in the Scene view, then set its X offset to 32, it ends up 122 pixels from the left. How do I translate X and Y positions and offsets to screen coordinates?

I'm also a little confused by the height and width values shown in the inspector. The button graphics are 64x64, but the height and width shown are both 16.6667. They look correct on screen, so I guess I just don't understand the coordinate system(s) being used.

 

This thread is a good place for such questions. The forum you may have seen mentioned on my site was hacked and has had to be taken down for the moment, and it was only for my consumer products at the time.

Basically, I think the confusion is coming in as a result of the paradigm shift going from Unity GUI (which is in screen space) to EZ GUI (which is in world space). All of the coordinates in EZ GUI are in world/local space as opposed to screen space, as EZ GUI controls are basically 3D meshes. This is how some of the cool EZ GUI effects are possible, and also necessary to the draw call savings that result from being able to batch 3D objects together in the scene.

This is why the width/height values are not in screen coordinates, but rather world coordinates. When you use the various methods available in EZ GUI to size controls in a pixel-perfect manner, it calculates the appropriate world size based upon the screen resolution and the camera's orthographic size. But there is a way to, essentially, be able to position items in screen units, and that is to set your UI camera's orthographic size to half the height of the screen, in pixels.

So for instance, if you're designing for iPad landscape as your default, set the camera you're using for your UI (may be your main camera) to have an orthographic size of 384. This will mean that for every 1 world space unit, there is a corresponding screen space pixel. So, for instance, if you need to move your button, as you said, 64 pixels to the right, you move it 64 world units to the right in such a setup.

When the user rotates the device, you can move your controls by the appropriate units as though they were pixels and it will be correct. As mentioned earlier, for changing aspect ratios, etc, it is handy to put all your controls as children of a single parent GameObject, and then just move that one object in your script so that they all move together as one with only a single position assignment.

If your main camera won't work well being set to either orthographic, or to an orthographic size which matches your screen resolution as described above, then you can use a separate camera for your UI. See tutorial #5 for instructions on how to setup and use a dedicated UI camera.

Please let me know if you have any more questions. Thanks!

 

Thanks! I figured there was a (simple) way to convert between world space and screen space, but didn't know how the orthographic camera size worked (already using a separate UI camera). My graphic designer (also my wife) will be very happy that I can place controls exactly where she wants them to be. Funny how artists can tell just by looking when something is just a pixel or two off.

Might be worthwhile including something about this in the docs, as I'm probably not the only one who needs to position controls precisely in screen coordinates.

 

Question

I want to write out a status sentence. For example lets say

Player A has hit Player B for 60 damage.

I would like "A" to be yellow, "B" to be green, and "60" to be red. The rest should be black.

I know I can do it by splitting it into 7 text mesh objects. Since they batch I don't mind that idea. I am wondering how to change the text color without adding draw calls.

I know I can access the TextMesh.font.material.SetColor(color c) function to set the color. Will this not duplicate the material and end up costing me 4 draw calls for this one sentence?

 

Yes, unfortunately, Unity has chosen to expose virtually nothing about the TextMesh component in-script. So the only way to change the color of a TextMesh is to change its material color, which will cause it not to batch.

Alternatively, you could store a disabled "copy" of a TextMesh with the desired color on another child to the object in question, then enable/disable the appropriate ones with ".active = true/false". That will preserve batching among TextMeshes of the same color.

I think I am going to try to "roll my own" text mesh solution soon to get around this. So stay tuned.

 

Hi - just installed and I'm having some troubles. I'm running Unity iPhone 1.7 and getting all sorts of errors with the scripts right after importing the package.

The screenshot is pretty big so I won't embed it.

http://www.nocturnalware.biz/temp/unity5.png

I tried sending a PM instead of posting here but I'm finding all the PMs I send lately just sit in my Outbox and never move to the Sent Items. Anyone know if this is a problem with the forum?

 

You mention in the docs and video that you can fill in the background of a panel (e.g. a draggable window) with a graphic, but don't mention the best way to do that. I created an empty game object, made it a child of the panel, and attached the Simple Sprite script to it. But the simple sprite requires it's own material. Is there a better way? Like would a disabled button be more efficient drawcall-wise?

Same thing with dynamic text. For example, a digital display of the the current value of a slider. What's the best way to do that?

One other thing I noticed is that the sprites are rendered differently than the buttons. The sprite graphic, which is identical in color and alpha to the buttons, renders brighter. I had to set the Main Color of the sprite's material to a medium gray (Emissive Color is black) to get it to match the button graphics. I thought I might be doing something wrong, so I made a second sprite and it too needed the color tweaked, although to a different value.

 

After using your SM2 code for several months now to make a 2D game I am blown away by how much time and effort that you have saved me. Everything works exactly as promised and the customer support and tutorial videos are phenomenal. I'm too late in my current project to integrate EZ GUI (I already rolled my own gui system using SM2) but after watching your teaser video I had to buy it. I'm really looking forward to jumping in there and making use of it heavily for my next title. I've used a lot of commercial game development middleware (some of it was insanely expensive) and the experience of using your wares is right up there with the best of them. Thanks for all the great work!

 

Hey guys, I just purchased EZGUI along with SM2 and I'm going to be digging into it this weekend. I'm going to be away from the internet though, and it would be great to have all of the tutorial videos without needing to stream them... is there anywhere to download them currently?