Position sprites programatically

[Petroz]

I'm really loving NGUI it is really great. There is one thing I am having trouble with, I am trying to place sprites programatically and I cannot make sense of how the transform position relates to screen space.

I am trying to create a sprite that is 64x64 pixels and position it at these screen coordinates. I know the 2D position for the sprite in pixels but setting the transform x and y of the sprite did not position the sprite correctly. I am testing with a resolution of 800x480 "NexusOne Wide". Through some experimentation I have discovered that the left border is at approximately x = -615 and the right border at x = +615. All objects in my hierarchy have a scale of (1, 1, 1) and are positioned at (0, 0, 0). What is the expected conversion from transform x and y to screen space x and y?

[Nicki]

if you set your UIRoot to the height of your device, it will translate to 1.0 == 1 pixel.

If it's set up correctly, it will be centered in 0,0,0, unless you have an UIAnchor that changes that.

(-10, 0, 0) will be 10 pixels towards left.

in your example the height should be 480.

Obviously, your icon will be centered as well, so you have to account for that. (-800+(64/2)) is all to the left, for instance. Or should be.

[Nicki]

Oh, and make sure your play window is actually the size you want it to be, or it will be weird.

[ArenMook]

Petroz, make sure to uncheck the "automatic" checkbox on UIRoot and specify the height of the target screen (480).

[Petroz]

Thanks for the prompt feedback!

I just auto upgraded from an old version from a couple of months ago and never had a 'root' object. My 'NGUI' GameObject which is the parent of all my UIPanels did not have any UIRoot object attached, it did have a UIPanel component itself. I'm not sure if it never had one or it got nuked when I upgraded. I'm not sure if it is meant to have a UIPanel or not.

I have now added a UIRoot but that caused all the UI widgets to dissapear (presumably offscreen). I would like to support a variety of resolutions, I would just like to know how to programatically get the screen bounds so that I can convert from screen position to NGUI position.

[TericDragon]

I have recently dealt with this same problem; hopefully I can help you a bit.

I developed my UI at 16:9 screen ratio with the 'automatic' option turned off in the UI_Root.  My manual height was set to 640.

I always make sure that everything is a child of the UI_Root->Camera.  Under the camera, I put my main UI parent, then add UIAnchors as children to that object (anchors for the bottom, left, upper right, center, etc.).  Every widget and object I add to the user interface becomes a child of one of those anchors.

Important note: Every child in the hierarchy under the UI_Root (except for the widgets thesmselves) should have their scale set to 1, 1, 1.  If not, then your widgets will be way out of proportion, or perhaps invisible.

Now, when I adjust the screen size or ratio, the anchors automatically adjust my widget positions to compensate.

One drawback of using UIAnchors, however, is the fact that they are only in relation to screen space.   From what I've been able to tell, UIAnchors cannot be used to set widget positions within, say, a parent game object that is smaller than the screen.

[TericDragon]

Also:

In order to convert from screen position to NGUI position, I do the following in code:

1. var screenWidth = (float)UnityEngine.Screen.width;
2. var screenHeight = (float)UnityEngine.Screen.height;
3. var sixteenByNine = 16.0f / 9.0f;               // Because the UI was developed in 16:9 ratio
4. var screenRatio = screenWidth / screenHeight;
5. UIScale = screenRatio / sixteenByNine;
6.  

Then later on, when I wanted to space several buttons each 100 NGUI units apart:

1. var posIncrement = 100.0f * UIScale;
2. SetButtonXPos( buttonHands, posIncrement );
3. SetButtonXPos( buttonLegs, posIncrement * 2.0f );
4. SetButtonXPos( buttonFeet, posIncrement * 3.0f );
5.  

(Where the function SetButtonXPos() simply sets the x-component of the button's transform.localPosition)

[ArenMook]

When you attach UIRoot, it will scale your game object to 2/ScreenHeight. You need to set the Camera's Orthographic Size to 1.

[Petroz]

Thanks for the answers guys. I guess I will attach the UIRoot and manually reposition all my widgets back to the correct positions.

I'm still not entirely clear on how to get the absolute width and height in NGUI units. I need to position things relative to 3D objects using Camera.WorldToScreen point so I need to know the actual dimensions of the NGUI UI. I do not want to keep the ratio and have it letter-boxed, I need to have it go to the edge of the screen.

[ArenMook]

Look at the "so you want to make health bars" sticky in this forum.

[Petroz]

Thanks, it looks like the Camera.ScreenToWorldPoint was the missing piece of the puzzle. I very much appreciate your assistance and patience. Thanks for the great product and outstanding support!