Exactly Positioning GUI Textures

I have found it quite a bit of a chore to position GUI Textures on the screen. For example, I have a 128x256 texture that I would like to place exactly in the top left corner of the screen. However, since my texture is positioned using screen coordinates and is a fixed pixel size, rather than saying "0px from top, 0px from left" it becomes an impossible task as far as I can tell. I must be missing something, but I can't figure out what it is.

I have attached 2 pictures of the problem. The second shows how it looks at a smaller size, but when it is blown up full screen it looks like the first.

 

Perhaps what you (and I) want is a new feature -- which is the option to express GUI (graphic and text) object's positioning (and sizing) in 2d pixel terms rather than 3d coordinates.

 

I'm agreed with you guys!

 

Can you position it dynamically based on the width and height determined via the Resolution class?

 

It would be nice if you had similar levels of control over GUI texture layers to the control you have over Text layers, i.e.

Setting the anchor point (then to stick something in the top-left you'd set its position to 0,1 and its anchor to top-left).

Allowing objects to be displayed as "true pixels" (i.e. at native scale)

I'd also like to see both text and texture layers have the ability to display at the correct aspect ratio and not just as "true pixels".

I am going to cross-post this into wish list.

 

This is already possible by using the pixel inset (which in my opinion should be called "pixel offset", btw) in combination with the position.

If you want to place a texture thats 128 by 64 pixels anchored at the top-left corner of the screen and have it rendered pixel-correct, set the options like this:

Code (csharp):

1.  
2. Position: (0, 1, 0)
3. Scale:    (0, 0, 1)
4. Pixel inset:
5.     Xmin: 0
6.     Ymin: -64
7.     Xmax: 128
8.     Ymax: 0
9.  

This can of course be generalised to all four corners:

Top-right:

Code (csharp):

1.  
2. Position: (1, 1, 0)
3. Scale:    (0, 0, 1)
4. Pixel inset:
5.     Xmin: -128
6.     Ymin: -64
7.     Xmax: 0
8.     Ymax: 0
9.  

Bottom-right:

Code (csharp):

1.  
2. Position: (1, 0, 0)
3. Scale:    (0, 0, 1)
4. Pixel inset:
5.     Xmin: -128
6.     Ymin: 0
7.     Xmax: 0
8.     Ymax: 64
9.  

Bottom-left:

Code (csharp):

1.  
2. Position: (1, 0, 0)
3. Scale:    (0, 0, 1)
4. Pixel inset:
5.     Xmin: 0
6.     Ymin: 0
7.     Xmax: 128
8.     Ymax: 64
9.  

If you want to shift the texture by a certain amount of pixels from the edge, just add or subtract the amount to both *min and *max. (ie. to Xmin and Xmax to shift along the X axis and Ymin and Ymax for the Y axis.) Just make sure that Xmax-Xmin=image width and Ymax-Ymin = image height, and that the scale is set to 0 otherwise the texture will be scaled.

 

fyi, http://otee.dk/Documentation/Manual/Making a GUI.html

Also, you can do "anchoring" by using two gameobjects. Make your GUITexture a child of a GameObject and position that parent GameObject at 0.5,0.5,0. Now move your child GUITexture where you would like it to be in relation to the anchor. Now position your anchor at say, the upper left corner of the screen.

You can adjust for aspect ratio with something like this:
http://unify.bluegillweb.com/scriptwiki/index.php/GuiRatioFixer

Using these techniques we successfully have laid out complicated GUIs for an upcoming game.

-Jon

 

Thanks -- these workarounds are exactly what I'm looking for.

And yes, the properties are very oddly named.

Edit: I would argue that needing to nest objects and mess with a bunch of subtley interacting properties just to position a graphic at position X,Y on the screen seems very un-Unity-mission-statement-like.

In WoW you can drag UI components around on the screen when you play. Given that this might involve switching from (say) a top-left anchor to a bottom-right anchor (and hence moving something around in the hierarchy on the fly) it seems pretty ugly for a shipping game.

If I want to produce a game with a really good 2D interface* overlaid on top of the action, these shenanigans could really come back and bite me.

* One that the player can interact with versus something that merely displays game state.

 

Hey, take this and edit to fit your needs.

http://unify.bluegillweb.com/scriptwiki/index.php/DebugConsole

A draggable gui element. Clamping to edges is left as an excercise to the interested reader.

d.

 

(In best David Bowie voice): You're good. You're very, very good.

 

Don't know if this is of any help but for positioning GUITextures I found that this was helpfull especially for making dynamic GUITextures that change size on user demand.

Code (csharp):

1.  
2. Scale(0,0,1)
3. Position(0,0,0);
4. x: As normal Screen x Position
5. y: 0-height of your image.
6. width: Width of your image
7. height: Height of your image
8.  

That above will relate to a normal 0,0 coordinate. placing the GUITexture image in the top-left corner. Don't know if this is of any help to anyone but it has helped me. Go Unity!