UIWidget

[ArenMook]

Overview

UIWidget is a basic NGUI component. In simplest terms, it's just a rectangle that you can position on the screen however you like. This widget, while has an area, is also completely invisible at run-time -- making it ideal for use as a container holding other components.



UIWidget also happens to be the base class for all drawn NGUI elements -- including sprites and labels that you use to create your user interfaces. UILabel, UISprite, UITexture and UI2DSprite classes all derive from UIWidget.

• You can move the widget by pressing the mouse anywhere within the rectangle and moving it around.
  
• As you move the widget, it will snap to the edges and center of other nearby widgets and panels. Hold Control if you don't want snapping to occur.
  
• You can drag the round handles around in order to scale the widget.
  
• Hovering the mouse just outside the round handles will let you rotate the widget. Hold Control if you don't want angle snapping.
  
• You can add a collider to make this area intercept events, and you can anchor other widgets to it if you like.
• If you have a box collider on the widget, you will see a new option: Box Collider. It's on by default, and it will automatically resize the collider to match the widget's dimensions.
  
• You can quickly add a child UIWidget to the selected object by using the shortcut key ALT+SHIFT+W.
  

In the code, the widget's position is specified using the Transform component -- just like any other game object. The position is always relative to the widget's Pivot point. A pivot point basically means "the point widget rotates around".

Widgets also have Depth that controls their order when clicking on them (and in case of derived classes such as Sprite and Label -- their draw order). This order can be observed by right-clicking on the widget in the Scene View and choosing the Select menu. Doing so will give you a list of all the selectable widgets underneath the mouse in the same order that they will be drawn / receive events -- top to bottom.



The same context menu can also be used to add siblings and children to your widgets as well as attach scripts and create new elements.

If you are looking for the documentation regarding the Anchors section, you can find it in the base class -- UIRect.

Class Documentation

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

If you have a question regarding this component or would like me to clarify something, just post a reply here.

[kasparlund]

Hi

In NGUITools.cs line 290 there is the following statement
if (!w.isVisible) return;

I believe this is inconvenient because it prevents you to calculate layout and sizes before display including setting the right collider area using the UIWidget feature to update the collider.

Could this be improved in a future version. Alternatively UIWidget could update the collider area when it becomes visible ?

[ArenMook]

Fair enough. I can remove it.

[heeroz]

"aspect ratio" is helpful, but how about one more aspect ratio options, "Fill" ? Just same as UIStretch "FillKeepingRatio" Style.
Useful for which I want it to fill the screen like splash screen.

[PoN]

What is better(performance, decrease drawcalls) to use if i would like to make a window in a game - UIPanel or UIWidget ?

[ArenMook]

Panel is what draws widgets. That's like asking what's better to use -- a file or a folder -- just doesn't make much sense.

It's generally a good idea to have one panel per window.

[Lautaro]

Hi! I have a prefab with a hierachy of different gameobject with NGUI widgets. They are inventory slots. I have 8 of them as the inventory. Then i have another one that follows the mouse to show what you have picked up from the inventory. This hand-slot is rendered behind then inventory slot. How can i make it render in front?

[ArenMook]

Put it underneath a different panel that has a higher depth.

[Lautaro]

Brilliant! Thanks.

[VapapeurTeam]

Hello,

The documentation page for UIStretch (this one) says that UIStretch is now deprecated and invites you to visit the Widget or Panel documentation instead.

However, I don't see how I can mimic the behaviour of the old UIStretch using the Anchor features of a Widget. It seems to be replacing the functionality of the old UIAnchor script (like, I want my sprite to be 10px from the bottom of the screen no matter what), but for example if I want my sprite to always have a vertical size equal to 10% of my screen vertical resolution, how can I specify that in the Widget ? I would have used a UIStretch to do that, but here, all the input seems to be in pixel so I can't do relative sizes.

Thanks in advance.

[ArenMook]

Change the anchor target to be "custom", and give it a relative value. 10% would be 0.1: http://www.tasharen.com/forum/index.php?topic=7013.0

[VapapeurTeam]

Wow, alright, I completely missed that Custom thingy. It's awesome, thank you

[balzaque]

Hi, I'm trying to make 4 widgets stay docked on the four corners of the screen.

My current settings:
Scene on 4:3

All widgets
size: 400x100, all anchors set to Advanced and all anchors not used set to None

Widget01:
Left, Targets Left, 20
Top, Targets Top, -20

Widget02:
Right, Targets Right, -20
Top, Targets Top, -20

Widget03:
Left, Targets Left, 20
Bottom, Targets Bottom, 20

Widget04:
Right, Targets Right, -20
Bottom, Targets Bottom, 20

When I try to resize the scene, like to 16:10, the widget sizes start to change for no reason and they don't stay where they are supposed to. Am I doing something wrong here? The target for the anchor is the "UI Root" and currently having only a UIPanel since I'm not using the UIRoot component. I also tried to use Custom on the anchors settings but it seems that as soon as I lose focus on the Widget the settings go back to the old value.

Thanks!

Edit: just figured out what I was doing wrong, the items inside the widget need to be anchored to the right part so when things stretch they follow staying in the right place. Fighting over this during the weekend but at least know I think I'm starting to understand how to do things right. xD

[ArenMook]

If you don't set anchors on some sides, it will behave as if anchored to the center (they will stay where you left them).

If you want something to remain anchored to the top-left, you need to set all 4 anchors. Left to left, right to left, top to top, bottom to top.

[PoN]

before i have animated scale of transform , but now i should animate Dimensions of UISprite, how can i do that?
thanks.