Tasharen Entertainment Forum

Support => NGUI 3 Documentation => Topic started by: ArenMook on November 20, 2013, 09:19:16 PM

Title: UIPanel
Post by: ArenMook on November 20, 2013, 09:19:16 PM
Overview

UIPanel is a component that collects and manages all widgets underneath it. UIPanel is responsible for creating the actual draw calls using the widget's geometry. Without panels, nothing can be drawn. If you're familiar with Unity, you can think of a UIPanel as a Renderer.

UIPanel inherits all the functionality of its base class -- UIRect (http://www.tasharen.com/forum/index.php?topic=7013).

(http://www.tasharen.com/ngui/uipanel.jpg)

All panels have a Depth value which affects all widgets underneath. If you're creating a complex UI with multiple windows, it's often best to have one UIPanel per window. The depth value of panels carries a lot more weight than the depth value on individual widgets, so it's a good idea to ensure that your panels don't share depth values. If values get shared, draw calls will start to get split up frequently in order to preserve the draw order, resulting in a lot more draw calls than usual.
The panels can automatically Clip all children using the dimensions of your choice. To enable clipping, just choose one of the options under the Clipping drop-down, then adjust the dimensions of the purple rectangle in the Scene View like you would adjust the dimensions of any widget. If you're going down that route you can turn your panel into a Scroll View (http://www.tasharen.com/forum/index.php?topic=6763) and make it draggable fairly easily as well.

In NGUI 3.5.5 and earlier versions, multiple clipped panels would not work. Only the last panel would clip the contents. This limitation was lifted in NGUI 3.5.6.

By default, all of NGUI's panels will begin drawing with Render Queues of 3000 and go up from there. You can change that by choosing something under the Render Q drop-down list. If you want to add a particle system in between of two of your panels, simply make sure that the first panel's render queue is lower than the one used by the particle system's material, and the second one has it set to a higher than the particle system. If you want NGUI 2.X-like behaviour where all draw calls were Z-based instead of depth-based, specify an Explicit render queue (3000 is what NGUI 2.X used).

If you are looking for the documentation regarding the Anchors section, you can find it in the base class -- UIRect (http://www.tasharen.com/forum/index.php?topic=7013).

Pro-Tip

A kinematic Rigidbody gets added to your panels automatically because according to Unity this greatly improves performance in physics-heavy games. Moving static colliders is a very expensive operation in Unity, but moving rigidbodies is not.

Class Documentation

http://tasharen.com/ngui/docs/class_u_i_panel.html

If you have a question regarding this component or would like me to clarify something, just post a reply here.
Title: Re: UIPanel
Post by: OnlineCop on November 28, 2013, 06:19:10 AM
Could you clarify the static checkbox in regards to UILabels? Can we freely update UILabel.text values when the panel is marked as Static, especially if they scale or resize based on their Overflow settings?
Title: Re: UIPanel
Post by: ArenMook on November 28, 2013, 03:53:37 PM
Yes you can. The "static" checkbox on panels only tells the panel to not check transform-related changes -- that is position, rotation and scale. Everything NGUI-related will still cause the panels to update correctly.
Title: Re: UIPanel
Post by: poulpator on December 04, 2013, 04:52:09 AM
Hi,
I used to display meshes with shaders with alpha in panels. Since my update to 3.X, those meshes are not displayed anymore. If I change the shader to one without alpha or if I disable the Panel script I can see the meshes again. Any idea?
Title: Re: UIPanel
Post by: ArenMook on December 04, 2013, 05:30:55 PM
NGUI never drew meshes. Unity drew them itself.

All NGUI geometry is drawn on render queues 3000 and higher.  If you had a transparent shader-using mesh, it would remain on the render queue of 3000, thus would appear behind most elements. You need to increase its render queue in order to draw it over the UI.
Title: Re: UIPanel
Post by: pretender on April 05, 2014, 03:26:19 PM
There is no Alpha clip, only soft clip (using 3.5.6) on Unity3.5.7.
I used Alpha Clip before and now it's gone, will it affect performance on mobile?
Title: Re: UIPanel
Post by: ArenMook on April 06, 2014, 03:02:47 AM
It was just pointless to have it as you can achieve the same exact effect with a soft clip set to border of 1. There was no performance difference between the two methods that I could discern.
Title: Re: UIPanel
Post by: keysosaurus on April 07, 2014, 06:34:30 AM
I have a custom shader that I use, I named it (AlphaClip) and (SoftClip) so it could be used in clipped panels.

Is this not possible any more in the new system???
Title: Re: UIPanel
Post by: ArenMook on April 08, 2014, 01:37:05 AM
The way it's done has changed in 3.5.6 to allow nested clipping. Your old SoftClip shader should still work. There is no more AlphaClip.
Title: Re: UIPanel
Post by: keysosaurus on April 08, 2014, 11:02:02 AM
The shader is used to render eyes. It has two textures, one for the pupils and another used as a mask.
It uses texture offsets to move the pupils around, and works perfectly on non clipped panels.
"drawCall.dynamicMaterial.SetTextureOffset" is what i've been changing.

The offsets on the UITexture material seem to be updating in the inspector but the results can't be seen in game.

Any help would be greatly appreciated!
Title: Re: UIPanel
Post by: ArenMook on April 09, 2014, 04:16:24 AM
The texture offset was never used properly by NGUI. It was used one way with clipped shaders, and another way with non-clipped shaders.

Instead of setting the texture offset on the material, set it on the UITexture itself. It has the "UV Rect" you can set.
Title: Re: UIPanel
Post by: keysosaurus on April 09, 2014, 04:34:03 AM
The problem with doing it that way is both textures in the shader are then offset.
I only want to offset the main texture as the mask texture keeps the pupils inside the eye socket.

It worked before, just wondering what has changed? Or where I can tweak the code myself?
Title: Re: UIPanel
Post by: ArenMook on April 10, 2014, 08:04:50 AM
Sure you can. The main texture's UV matrix is not used in the new shaders. You will want to add TRANSFORM_TEX in the vertex shader to where the texture coordinate gets assigned. Check to see how it differs with the old version.
Title: Re: UIPanel
Post by: sebas on April 15, 2014, 06:16:40 AM
stupid question: when you say scale I assume you mean UIPanel.transform.scale. Is this the official way to change the scaling of a panel?
Title: Re: UIPanel
Post by: ArenMook on April 15, 2014, 10:14:07 AM
There is no transform.scale in Unity. Lossy scale, yes.
Title: Re: UIPanel
Post by: vikti on August 30, 2014, 02:32:46 PM
Have you got a code to adjust the size of a collider on uipanel ? (like on uisprite)
Title: Re: UIPanel
Post by: vikti on August 30, 2014, 02:37:34 PM
Ho, maybe I found a better way using an invisible widget.

Title: Re: UIPanel
Post by: Tulrath on September 06, 2014, 11:27:28 PM
Is there a way to reduce the alpha on a panel (say, for example to 0.1f) without fading the contents?
Title: Re: UIPanel
Post by: ArenMook on September 07, 2014, 08:51:56 AM
No, all alpha is cumulative.
Title: Re: UIPanel
Post by: eagle on September 09, 2014, 03:44:49 PM
My scenario is, i want to make 8 panels which i want to get in front as i click relevant button. No sequence of panels will be used, e.g. 1 will be default, and when i click 5, 3 & 7 are clicked, relevant panels should be shown respectively.

How i can achieve this scenario.
Your NGUI tutorials are minimum (i think NO) on panels, please showing this scenario in a tutorial will be much helpful.

Looking forward to your quick reply.
Title: Re: UIPanel
Post by: ArenMook on September 10, 2014, 01:34:57 AM
Starlink UI kit has an easy to use windowing system, source code for which I've posted on this forum a long time ago. UIWindow.Show(panel), UIWindow.Close(panel), UIWindow.GoBack() -- trivial stuff.

If you want to show multiple panels at the same time instead of one at a time, then I assume you will want to bring the last activated panel to front. NGUITools.BringForward can do that.
Title: Re: UIPanel
Post by: Rahkola on September 27, 2014, 12:57:49 PM
How is the layering of widgets handled? We would like to add particle systems in the UI and control both panel layer and the widget layer of the particle system.
Title: Re: UIPanel
Post by: ArenMook on September 27, 2014, 07:30:21 PM
If you want to insert particles in between of your UI elements, you will need to change the render queue of panels. By default every new panel comes directly after the one before it. If you need to insert a particle system, you will need to interrupt this order.
Title: Re: UIPanel
Post by: RetroGuy on October 01, 2014, 01:06:37 PM
Is there any way to animate panel scale without affecting bunch of anchored widgets below? I've tried to select "OnEanble" in Anchors Execute options, but of no avail: they continue to stick to panel borders following some weird algorithms whatsoever. Moreover, there is also impossible to move this panel as well. Is there any simple "official" workaround about that? All I'd like to do is to switch off all these smart features for a time, animate window as any other unity object, and that turn control to the panel again. Thanks.
Title: Re: UIPanel
Post by: ArenMook on October 01, 2014, 05:31:40 PM
Change the anchors to be OnStart.
Title: Re: UIPanel
Post by: RetroGuy on October 04, 2014, 04:16:53 AM
Oh, thanks. It works. Sometimes you just need to check updates before asking :)
Title: Re: UIPanel
Post by: bjennings76 on October 18, 2014, 12:08:40 PM
I struggled for a long time to get the UIPanel to freely resize, but to also respect the restrictions of the UIRoot. I haven't had much luck. It will only work one of two ways:
I feel like there's a setting I'm missing somewhere. I was able to fix it using a custom component, though, which toggles a UIPanel's constraints depending on the UIRoot's view ratio. I'll post it here in case someone else runs into the same problem:

  1. using UnityEngine;
  2.  
  3. [ExecuteInEditMode, RequireComponent(typeof(UIPanel))]
  4. public class UIConstrain : MonoBehaviour
  5. {
  6.     private UIPanel Panel { get { return _panel ?? (_panel = GetComponent<UIPanel>()); } }
  7.     private UIPanel _panel;
  8.  
  9.     private UIRoot Root { get { return _root ?? (_root = GetComponentInParent<UIRoot>()); } }
  10.     private UIRoot _root;
  11.  
  12.     private static float Ratio { get { return Screen.width*1f/Screen.height; } }
  13.     private float MaxRatio { get { return Root.manualWidth*1f/Root.manualHeight; } }
  14.  
  15.     private void Start() { UpdateAnchors(); }
  16.  
  17. #if UNITY_EDITOR
  18.     private void Update() { if (!Application.isPlaying) { UpdateAnchors(); } }
  19. #endif
  20.  
  21.     private void UpdateAnchors()
  22.     {
  23.         if (!Root || !Panel) { return; }
  24.  
  25.         // Ratio is less than max ratio, so release panel constraints.
  26.         if (Ratio < MaxRatio && Panel.clipping == UIDrawCall.Clipping.ConstrainButDontClip) { Panel.clipping = UIDrawCall.Clipping.None; }
  27.  
  28.         // Ratio is more than max ratio, so constrain panel.
  29.         else if (Ratio > MaxRatio && Panel.clipping == UIDrawCall.Clipping.None)
  30.         {
  31.             Panel.clipping = UIDrawCall.Clipping.ConstrainButDontClip;
  32.             Panel.baseClipRegion = new Vector4(Panel.baseClipRegion.x, Panel.baseClipRegion.y, Root.manualWidth, Root.manualHeight);
  33.         }
  34.     }
  35. }
  36.  
Title: Re: UIPanel
Post by: RetroGuy on October 29, 2014, 04:56:47 PM
I'd like to implement HP bars on top of characters in the game with NGUI. This UI should be rendered by main camera and be like a 3D object. I've tried to make a construction of UIPanel and label together, and it works fine all in all, but the panels keep rendering huge pink borders (probably treating in-game camera like UI one). It creates a big mess in my scene view, so I'd like to hide it somehow. I can simply get rid of it by commenting OnDrawGizmos code, but I don't want to modify it in such harsh way, especially considering it's quite useful when you make a fully-fledged windows. So the question is, is there some workaround about it? And, what is more important, had I implemented this task in a way it supposed to be?
Title: Re: UIPanel
Post by: ArenMook on October 30, 2014, 01:16:23 PM
In-game camera like UI one? Not sure if I follow you there. Your game window can be set to draw gizmos, which you can likewise turn off. Gizmos only draw if the component is not folded in inspector. Gizmos are also editor-only, and have no effect in the game. A pic would help me understand you better.
Title: Re: UIPanel
Post by: Cine on February 16, 2015, 02:13:42 AM
I am trying to have a scroll able panel inside a another panel.
The outer panel has unified anchors at
left -> right -150
right -> right 0
bottom -> bottom 0
top -> top 0
I then want to anchor the inner panel at
left -> left 10
right -> right 10
bottom -> top -45
top -> top -25
That part works just fine, but as soon as I enable soft clipping to get the scrolling view, the center of the clipping stays fixed according to some unknown origin, and not the actual position of the panel. And if I try to update the center or the offset in the inspector, the update is just ignored.
The end result is that whenever I change the size of the screen, the position of the content of the inner panel is left where it was, which means it is lost in clipping somewhere else.
How to fix it, so that it is possible to use clipping and achoring at the same time?
Title: Re: UIPanel
Post by: ArenMook on February 17, 2015, 10:34:45 PM
Yes, clipping and anchoring at the same time is possible -- however what you anchor them relative to is what matters. Anchoring one panel to another is not advisable. It's best to anchor panels to widgets or the camera. The widget can then be anchored to another panel if needed, although I strongly advise limiting the number of anchors used as they degrade performance.
Title: Re: UIPanel
Post by: Cine on February 20, 2015, 11:01:26 PM
Yes, clipping and anchoring at the same time is possible -- however what you anchor them relative to is what matters. Anchoring one panel to another is not advisable. It's best to anchor panels to widgets or the camera. The widget can then be anchored to another panel if needed, although I strongly advise limiting the number of anchors used as they degrade performance.

I cannot get it working though. No matter what I pick as the anchoring target for the panel, when I resize the target the part inside the panel is NOT moved/resized, although the panel itself is.
Title: Re: UIPanel
Post by: Cine on February 20, 2015, 11:35:23 PM
I finally figured it out... The anchoring in UIPanel is broken.
But if i ALSO make it a UIWidget and use anchoring there, it works just fine.
Title: Re: UIPanel
Post by: WinWin123 on August 14, 2015, 07:09:51 AM
hello, I am really new in Unity. Wanna ask that what's the difference between StartAt and explicit in Render Queue?
And what's the relationship between Render Queue, sort order and the depth value in UIPanel?
Thanks @@ I'm confused about these concepts.
Title: Re: UIPanel
Post by: ArenMook on August 14, 2015, 10:12:40 AM
If you open up the Panel Tool, you can see what render queues your draw calls end up with. "Start at" means the draw calls will begin at the number specified, and go up from there. So if you have 3 separate draw calls underneath your UIPanel (for example an atlas, dynamic font, and a UITexture), and you chose the "start at" to be 4000, you will end up with draw calls 4000, 4001, and 4002.

Sort order is used by the Unity's 2D system. It's not something you should worry about unless you are mixing Unity 2D and NGUI underneath the same camera.
Title: Re: UIPanel
Post by: WinWin123 on August 27, 2015, 05:06:42 AM
Thanks, That's very clear.
I am now having another concern.
I know that you encourage us to have a panel for each window.
I can see the advantage that solely setting the depth value of the panel can avoid windows mix up with each other if there happen to have two windows at the same time.
However, this increase the draw calls even when all elements in those panels are having same material or texture.
Is there any other ways to keep the draw call down to one in this case while I can still effectively handle the depth of these windows?
Thanks :)
Title: Re: UIPanel
Post by: ArenMook on August 30, 2015, 03:36:40 PM
Draw calls are created by panels. Separate panels = separate sets of draw calls. There is nothing that can be done about that, it's intentional. If you want fewer draw calls, use fewer panels.