EZ GUI - Powerful, Low draw call GUI solution

Hi... going full time suddenly on my iOS project, which explains the sudden burst of questions.

I'm not far enough along to start testing on the iPhone yet, so don't have the provision certs yet, but did want to ask if I'm digging myself a hole here:

I'm using Truecolor format on my 2D ortho game, in order for pixel perfect to work, and my carefully-crafted images to look just right on my Mac.

Is that going to pose any problems once I move the product to the iOS? Wasn't there something about compression? I do know if I use a compressed format on the mac, all the images look like s....

So: if anyone has been there/done that, I'd like to know before I dig myself a bigger hole!

TIA

 

You probably are.
The thing is, you only got 20mo for an ios projet and true color are huge and just unity and your code will be about 10mo (9,7mo for my binary which isn't compressed in the final iphone .apk)

So you should use PVR compression and there my advice is (at least we did it like this) don't compress using Unity, build have your own PVR tool, this way you will have a way better quality than the one offered by unity automatic compression (which is strangly also pvr)

 

First: thanks for your response. I appreciate it.
Next: does "mo" = megabyte? I don't know the "mo" abbreviation.
While I am an programmer, I'm not so sure I want to spend the time to "build my own PVR compression tool." Can they be purchased?
But more to the point, how do you actually use/set up sprites Unity to use compressed files? Every time I tried it (importing/setting as type compressed) the vertical dimension was totally screwed up, and I could not (with hours of trying) figure out how to get it to display pixel-for-pixel perfect in the game window. Scaling certainly isn't the answer. Obviously I've missed something pretty basic here, but at least I tried before I asked!

Sorry to be such a rank beginner here, but I guess I've got to ask to move myself out of the newbie category, eh?

TIA (again)

 

@renman3000
a. I'm not sure I understand the question. If you want something to be stationary relative to the camera, you can either make it a child of the camera, or just don't move it at all and use a separate camera to render it. See the tutorial video about using multiple cameras.

b. If I understand your question correctly, you are using rays internally, but you don't need to worry about this, aside from being aware that you cal "block" input by placing colliders in front of your UI elements if you don't put them in a separate layer.


@SeikoTheWiz
It could be that one or more of your elements is set to pixel-perfect? Which would cause it to resize at a different resolution, and therefore appear in a different place.


@Gigiwoo
Aside from rolling your own behavior via an input delegate, I'd say the only other built-in features that might be of use here is drag drop, just always handle the "drop" and ignore it. And yes, Dreamhost is more like Nightmarehost at the moment! Total and utter disaster!


@tvalleau
I think SeikoTheWiz means to use PVRTexTool (which you can download for free). Regarding the resizing of the atlas, yes, this will happen if the atlas isn't square, since PVRTC requires square textures. In this case, just check the "Force Square" box in the atlas build wizard and it will always make sure the resulting atlas is square so as to satisfy PVRTC without stretching.

 

Thanks, Brady... but here's where I'm still confused. SeikoTheWiz says to use PVRTC compression, and you've supplied several things I needed to know about it (thanks!) ... but... in the SM2 docs, you say:

"If you desire pixel-perfect rendering, it is recommended that you ...[no mip etc and ] disable compression."

So: I'm confused. I'm asking ONLY about iOS output. Is PVR best? required? With upwards of 260 dpi, sharp images are pretty much mandatory, eh?

Now: I'm off to find the PVRTC tool... TIA

 

The PVRTC compression is added in texture import window.

http://unity3d.com/support/documentation/Components/class-Texture2D.html

 

@tvalleau
Yeah sorry, mo is the french for mb
I'm not the one who did it on our project, but our unity version (3.4) automatically used some PVR for "automatic compressed" and it wasn't good quality, so we used the PVRTC tool which more suited our needs.

The best quality is of course true color, but your project will have a way bigger size.

@brady
edited: I finally found what was the issue, for an unknown reason the callback was called twice in a row and I didn't clear the list between! Sorry for the trouble!

 

Whoops! Didn't back read enough! Ignore me.

 

Thanks, SeikoTheWiz.... I'm learning the ins and outs.

I appreciate your courtesy!

 

So i have a newb question, what are and how are the objects, buttons etc, in EZGUI handled. Meaning, after a half day of messing around, i was surprized to find that a button is treated as an object. So if this is true, what is EZGUI? Just scripts that handle typical GUI elements?

 

With the exception of Unity's built in "OnGUI and GUI.x" code, all other UI solutions (that I know of) are using GameObjects and Layers in some form.

EZGui uses Cameras, Layers, Raycasting, Hit Testing, Mesh Generation, Texture manipulation, Atlas Packing and other methods (all available from Unity) to bring your UI to life.

And yes, it is just a series of scripts - but they *don't* handle typical GUI elements. These scripts create the elements needed from your graphical elements and the basic code built into Unity.

 

Hi Brady,
I'm having an odd intermitant error when using Bleed Compensation on a UIStateToggleBtn. Basically I have my y bleed set to 2 which looks fine on launch.

This object is then enabled/disabled as it appears on various screens however the texture that makes up this button it interrmittantly being 'stretched'.

I was just wondering if this was a known issue/ if theres a quick way or resolving it?

Cheers,
- Adam G

 

Ok, so it is better than OnGUI, just because it is far less stressful plus it has prefabricated options out the wawzoo? Also, building a hud, i am guessing just child the hud object within the camera?

And thanks.

 

@renman - I use a variety of hierarchies. I have all of my HUD-GUI elements under one root object called, 'UI_HUD_HD' or 'UI_HUD_LD' (high def, low def). Under that root, I have game objects for different parts of the apps such as 'Main Menu', 'Developer Menu', etc... I use them like 'folders'. And under those, I have game objects with panels for the 'left_panel', 'top panel', etc... Then come the EZGUI controls themselves (buttons, toggles, etc). At first, I used LOTS of those ez position helpers, but over time, I realized I needed less than I thought.

This hierarchy is wonderful for control. I can hide entire parts of the tree, I can move whole branches by moving higher up nodes. Coupled with this, I use a single C# script to deal with all of the basic connections/callback code for the UI. I made public vars for the buttons, panels, etc... that I can then enable, show, etc.

Here's the most important tip I can give you: the starting condition for your panels is VERY tricky. EZGUI has code for 'InitialState:Hidden' but it doesn't do what you think it does. You have to manually hide stuff yourself by setting scale to 0.001 or moving the object off screen.

As I became more comfortable with EZGUI, I started using it for other 2D behaviors, textures, etc...

Good luck,
Gigi.

 

Thanks Gigiwoo,
Very helpful.
Your "'UI_HUD_HD' or 'UI_HUD_LD' " are these empty game objects?


And tho I have not done it yet, I am imagining that I could just move child object to a different parent to move location? It is not a big dea, I am sure I will sove this when the time comes. Just curious to see exactly how you are thinking.



Thanks!!




edit.
I also just began to use it. I realize I need a UIManager in scene for any EZGUI events and or object to be seen. If this is true, what I did was create a empty object, attached a UIManager script. I then created another empty object and attached a UIActionBtn script. I the UIActionBtn asks for a manager. So, I turned "Managed" to on, and opened the panel to select a Manager. However, in the scene panel, there was only None as a selection.

What am I doing wrong and where is the best place to learn, and ask these questions?

Thanks

 

renman3000: Don't be afraid to use empty GameObjects as directories. This is one of their intended uses.

Create a new "Empty GameObject", name it something appropriate, and then add the other GameObjects as content. I would suggest "resetting it to origin" by using the "reset" option in the component "COG" gizmo:


... This will reset the transform.position and transform.rotation to (0,0,0) and transform.localScale to (1,1,1). This way you will have better information on the contents of this GameObject.

You can make any hierarchy you want out of GameObjects. These are all made from using "Empty GameObjects" as directories:

 

Until the EZGui/SM2/EZGameSaver forum comes back up, this is the best place, yes.

 

Ok. Great! thanks for the tip.

Now I do have a question. I am just watching the button video tutorial. Brady (i think) creates a UI Manager, and a button. He then sets the layer of Button to GUI and says that this is very important. Two things from my end. I was expecting the UI Manager script to create or have some type of preset GUI layer on creation. It does not. So I would have to create my own GUI layer. But how does this relate to the UI Manager. What difference does it make to it? Or is it just that I need to set all UI Managed objects to that same layer?


Also, in the Control Editor, I can set the Script. This means selecting any script attached to any game object in scene. So, would I ideally select buttonScript on button, for my button? Secondly, Method, is the next panel. Am I just typing in a functions name? Also label and transitions. I suppose I need to complete the video vs half way, but thanks!!!!



edit.
One more thing. Do I need to "Build Sprite Atlas" for each button (or EZ GUI interactive object, that uses sprites, animations)? Also what does this do? Does it simply take all spites and or animations involved with that object and compile them into a single atlas? What if I have two buttons, both using sprites from a single atlas I created, then I will need to Build Sprite Atlas twice. But what if A, the buttons are identical? What if b. they have different sprites, from the same sprite sheet I created?

 

Does anyone know if there's a delegate that fires when a UIBistateInteractivePanel is shown/dismissed? I've been looking around the docs and code but haven't seen anything obvious that provides this type of event notification.

 

Layers are very important to understand for many Unity related issues:
http://unity3d.com/support/documentation/Components/Layers.html

including Layer Based Collision Detection:
http://unity3d.com/support/documentation/Components/Layer Based Collision detection.html

If you look at cameras:
http://unity3d.com/support/documentation/Manual/Cameras.html

... and look at "Culling Mask" you can see how Cameras use layers to cull groups of objects.

The basic theory is that you set up one layer as your "UILayer":


... and you put all of your "UIObjects" on that layer:


... then you set your main camera to "ignore" the "UILayer":


... and finally set your UICamera to "view only" the "UILayer":


You should also read up on "clear flags":
http://unity3d.com/support/documentation/Components/class-Camera.html
http://unity3d.com/support/documentation/ScriptReference/Camera-clearFlags.html
http://answers.unity3d.com/questions/126214/how-does-clear-flags-on-cameras-work.html

This way you can render your UICamera viewing only your UILayer over your game, which is being rendered though your "MainCamera".

 

Great, thanks.
So in general, I was thinking I was, for my HUD to just make them children of my Main Camera, and was not going to worry about a second camera. But are you suggesting, that your practice is to place all UI (EZ-GUI interactive objects) under an second UI Camera? Edit. I suppose to each their own the really. :.?

 

For me, I find it's best to have one MainCamera for the game view, one UICamera for the UIView (which I make orthographic and set the orthographic size to 1/2 the height of my target resolution so that 1 unity unit = 1 pixel). I put all of my UIObjects and the UICamera into an empty parent GameObject (called something like UI) and then I set that parent GameObject up a (0, 1000, 0) so it is not in my way... I make sure that everything in that parent GameObject is on the UILayer and that the camera is only viewing the UILayer.

 

Ok Great,
Thanks Little Angel. My next step is to look at how to handle two cameras at once. But it all makes much better sense.

Thanks.




edit:

How do I know my target resolution? is this based on what device the app is running on?

 

This is a semi bump due to my edited question above. But also a new question.

How do I assign a UI Manager to a UI object. For instance my empty gameobject, "button", has a UIActionBtn Script attached. When I attemp to ad a manager, via the inspector. I can not. The only option i am given is "None".

How do I properly assign the UIManager?

 

Yet Another Question: I know Brady stresses the number of atlases used. I take that each atlas requires a drawcall. (I have a vague idea what that is: a pass through the rendering (?) ) And the more drawcalls, the slower the framerate.

So: a practical question here: >how important< is the number of draw calls? That is, should I bend over backwards to try to get everything into a single atlas, or will 2 or three be OK in a given scene? What about static items in drawcalls - Backgrounds and other items that are not animated?

Say I have an animated sprite moving across a static background. Under iOS, am I going to be -way- better off using a single atlas for the background + sprites, or is an atlas of static images, and one of animated sprites OK to use on these less powerful devices?

I understand the theory generally: I'm asking about practical advice.

TIA, once again.

 

So how do i do this?

 

You don't. You just need an instance of UIManager in the scene. Make a UImanager object, and you're done.

 

Hmm.
I am slightly confused. I had it working in that I had a second camera, UI Camera, a UI Layer. I set the camera to orthographic. I set its culling mask to UI Layer only. I created a object, plane with a sprite attached, adjusted so it should be visible to the UI Camera. Set it, the plane object layer to UI Layer. And ran the program but I see nothing.

It did work for a bit but I am not sure what I changed.


:.?

 

Let me respectfully suggest you view the videos here:

http://www.sanneblad.com/2011/11/02/introduction-to-unity-and-ez-gui/

These do a fine job of explaining how EZGUI works.

 

Ok thanks.
I just can not explain how an object that was picked up by the UICamera, suddenly is not.


But thanks.

 

There are lots of possible reasons you can't see something, not just one, so it's impossible to diagnose in a forum. You could have unchecked it; it could be off screen; it could be hidden behind something; it could be on the wrong level; you could have neglected to rebuild the atlas; it could be turned 90 degrees to the camera....and so on and on...

(not to mention that, vis-a-vis supplying answers, I'm a rank beginner myself!

 

Right.

Unchecked what exactly? Managed?



And as far as rebuilding the Atlas, a random sprite I added to the UI Object, in question.... I went to Tools, AB Software, Build Atlases but am told... Sprite "CattleSkull" is not associated with a SpriteManager, and can therefore not be included in the atlas build.

Sorry for the questions, I am just learning this product.

 

every object has a checkbox next to it. if you uncheck it, the object is not included.

Sounds like you're using Managed Sprites, and that's an advanced option. (No: I have no idea how to use it, since I've never yet had the need.)

You're beyond me at this point with that error. I'm afraid I have to back out now now anyway... dinner; new iPad; my own work. Perhaps someone else will pick up the thread.

Meanwhile, may I -strongly- suggest that you view those videos. You'll find that EZGUI is -much- easier than you're making it!

Good luck!

 

ooOOOOoo new iPad. So jealous. Not really, I just got a 2, but I hear the double resolution is great.

Thanks man!

 

@renman3000

I don´t know if you got this working or not but just make sure you have set your cameras depth setting.

If your main camera has depth 0 (it is 0 by default) then your UI camera must have a higher depth value in order to be seen through the main camera at runtime.

 

I agree:

Renman: See this from one of my previous posts:

In General, Renman3000: You are trying to run before you can walk. Stop what you are doing. Create a new project. Import the newest package of EZGui and follow one of the tutorials step by step with the manual/docs open so you can get to grips with EZGui and learn to understand how it works.

It also sounds like you are missing some of the underlying concepts used by Unity (camera, camera depth, clear flags), all of which are "intermediate" concepts. These are good to know and may be hampering your progress. If you have not had a chance to to thru some tutorials, I'd suggest you look in the teaching section for the list of tutorials and give them a shot. It's best to get some practice under your belt before striking off on your own.

 

Whee!

Congratulations, Brady!

 

That would be:

http://forum.anbsoft.com/

 

Awesome-azzmoh.


And thanks for all the tips guys, really appeeciate. Very excited about building this gui.





YUSH.

 

Hi there,
So again, I am having a bit of difficulty. Perhaps some one can explain what is wrong in my appraoch.

I created an emptyObject, named it UIManager, and attached a UIManager script. Left all the setting to default.
I created an emptyObject, named it btn, and attached a UIActionBtn script. Left everything at default (except I added textures for each state (active, normal..)) and I can not see anything in game run. I checked "Managed" and I get this error.

Managed sprite "Btn" has not been assigned to a SpriteManager!
UnityEngine.Debug:LogError(Object)
SpriteRoot:Awake() (at Assets/Plugins/Sprite Scripts/Support/SpriteRoot.cs:897)
SpriteBase:Awake() (at Assets/Plugins/Sprite Scripts/Support/SpriteBase.cs:1313)
AutoSpriteBase:Awake() (at Assets/Plugins/Sprite Scripts/Support/AutoSpriteBase.cs:242)
AutoSpriteControlBase:Awake() (at Assets/Plugins/EZ/GUI/Support/AutoSpriteControlBase.cs:791)


So I guess I am wondering is how you use the SpriteManager? Is this from SM2? I Have this, but what if I didnt? Anyhow, point is I do and am unsure what to do.

 

Renman3K: Now that the A&BSoft forums are open (http://forum.anbsoft.com/) I'd suggest posting there, as there is a lot more traffic, Brady's marked attention and a huge body of work that you can search.

 

Great. Thanks LA.



!!!

 

@Brady
Would it not be more efficient to allow all threads to be created and posted then if offensive be taken down? It is just a bit of a drag to post a question, then have to wait an undisclosed amount of time.

Thanks
Ren

 

To whom it may concern,
I am posting my question here as 2 hours is too long for me to see my question, thread, posted to the EZ GUI Boards. I hope you can understand and if you have the ability, to do something about it.


Thanks.
//
///
////
///////
//////////
/////////////
Now my question, as you may or may not know I am struggling with the very basics. I get all the concepts but for some reason I am never geting the results.

Scene contains
1. "btn", an empty gameObject, with UIButton script.
2. "UI Manager", an empty gameObject with a UI Manager script.
3. "Sprite Manager", an empty object with a Sprite Manager Script.

What I have done
I have selected that "btn" should be managed and selected "SpriteManager" as it was my only option.
I have set all texture states for "btn"
I have set a material for "btn"
I went to build atlas for btn, but am told that...
Error Quote:

I am really miffed that I can not get this going. Please can someone point out what I am probably doing wrong?? I am watching the videos and have followed along. I think I got it, but I dont. From those steps that I listed, what am I missing?

 

a sad bump.

 

Renman3K: I think you'll need a little more patience! (^_^) TBH, the fastest place for answers outside of the docs and tutorials is the anbsoft forum.

 

Sure,
but why do they have to approve any thread first? I mean it really slows things down. The same posts have been static alll day. I mean that in it self slows the community, that slows the products reputation from growing. If a thread is so bad it needs to be deleted that can be done, no problem, but really I think Brady should look at the Unity forums and every other (most) where by you post and people can respond immediately.

I know I probably sound like a winey baby, but I did end up not getting anything done today because I want to learn EZ GUI but am stuck on the single matter as posted above. Can you see what I am doing wrong?

Thanks.

 

HI there,
I am just wondering how one might use an interactive panel in the iOS? The example tutorial uses a over function to trigger the event. There is no over in iOS. I could use a button to move a panel, but then I lose all the built in panel transitional effects.

Also, I was thinking the UIAction button would be for a button where I pressed and held. Sending multiple fires as long as I hold down. However initial tests say that is not the case. Can someone explain the UIAction Btn?

Also, When using SM2, and the Sprite script. There is the portion where you need to decide the "Lower Left Pixel", I see why, but how do you insure an accurate sizing and positioning? Do I read my Materials size via its inspector? usually 1024. I have played with the numbers but can never see anything.

One more thing, when I create an object to use with PackedSprite, with in the inspector, Texture Animations, Element, with in the video tutorial there is a "Frame" option. In that you enter the number of frames used in the animation. "Frame" does not appear for me. With in Element I have Name, Loop Cycles, Loop Reverse, Framerate, On Anim End and that's it! How do I get the Frame option to show? or make relevant adjustments?

 

@Hilm
Stretching will definitely occur the more bleed compensation you use. A value of 2 will effectively "stretch" the texture out by 2 pixels on each side.


@tvalleau
Regarding draw calls, it really depends on your target hardware. Older iOS hardware (iPhone 3G and earlier), for example, would start bogging down in a big way at around 20-30 draw calls. iPad 2/3, on the other hand, can eat WAY more draw calls before slowing down.


@renman3000
Regarding post moderation, that is not an option I chose. In fact, that feature is supposed to be disabled, and is in fact turned off in the forum settings. But for some reason, it is still enforcing it, and I have not as yet figured out why. Since my webhost pulled the forum down without asking me first, it has had to be re-installed with a new version, and so there are all kinds of little strange things like this happening that I'm trying to work out. Believe me, I don't like it any more than you do, and I've done everything I know to do to turn it off (in fact, it was already turned off, but it still does it).

Regarding interactive panels, the example does indeed use an "Over" behavior, but the UIInteractivePanel is not limited to "Over", it can be dragged as well.

Regarding UIActionBtn, you need to look in the docs. UIActionBtn is probably not what you want. As for repeating, if you want that behavior, just check the "Repeating" box in the inspector.

Regarding lower-left pixel, this is based on the actual texture size of your atlas as imported by Unity. So yes, the size shown in the inspector should be correct. Remember that this value, as described in the docs, is interpreted the same as in any image editing app like Photoshop, where 0 is at the top/left of the image, and width-1 is the right-edge of the image, and height-1 is at the bottom.

Regarding PackedSprite and "frames", you seem to be looking at the wrong video or the wrong component. What you describe sounds like the "Sprite" component, not the PackedSprite component. PackedSprite doesn't require you to manually specify the number of frames. You just drag the images you want onto the timeline and that defines the frames of the animation.

 

Hi at anyone I am kind of very much wanting to figure out something quickly. I am trying to figure out how to get a UIBtn on tap, to instruct a UIPanel to transition. Is this possible? or would I need to just tween the panel myself?