Vertical Placement with GUI.Matrix

I am using a GUI.Matrix to scale my whole GUI. But now I can't vertically place things right.

Code (csharp):

1. function OnGUI () {
2.     var tOffset = Vector3 (0.0, 0.0, 0.0);
3.     var tRotation = Quaternion.Euler(0, 0, 0);
4.     var tScale = Vector3(1.0*Screen.width/1024, 1.0*Screen.width/1024, 1.0);
5.     var tMatrix = Matrix4x4.TRS(tOffset, tRotation, tScale);
6.     GUI.matrix = tMatrix;
7.     GUI.skin = myNewSkin;
8.     GUI.Label (Rect(896, 0, 113, 113), GUIContent(abutton));
9.     if (reading) {
10.         GUI.Box (Rect(262,150,500,150), showup);
11.     }
12. }

See how my GUI.Box is placed at 150 pixels for its Y value? Well the placement changes with different resolutions. The X, set at 262 (which I found to be the perfect center for this box), does not change. Why are they behaving differently, and how do I fix it? Thanks!

 

If im not mistaken 1 * anything = anything - not sure why thats there.

Code (csharp):

1. 1.0*Screen.width/1024

The incorrect placement is certainly to do with the math, but I'm not sure what result you want. If you could give a little more detail that would help.

 

It's to force it to parse as a float; otherwise you get an integer as a result, which is not correct in this case. Yes, it's kinda ugly, but necessary. (JavaScript isn't perfect....)

--Eric

 

Code (csharp):

1.  
2. parseFloat(Screen.width)/1024.0
3.  

They are behaving different because you are using the x value of the relative screen size in both the x and y part of the scale vector. This causes it to scale always relative to the x axis. When you change the screen aspect you get problems. So what you need to figure out is how to place the gui up or down depending on the aspect. If you can't figure that out, the rumored 3rd person tutorial does this elegantly and you can study it when it comes out.

 

But I have to multiply by the same thing or my GUI elements won't be square on any resolution that has a larger width than height.

 

Meep. I've been trying but I still can't get it. I guess I'll wait for the Third Person tutorial then. Really though, shouldn't automatically scaling the GUI with Screen resolution be built in. I can't think of any practical situation where you would want GUI elements NOT to scale.

 

GUI is often done to be pixel-perfect, and scaling it up by say, 10% will often look REALLY bad (try zooming in a bit on your using Universal Access, to see what I mean).

Quite often, you want to center a menu on-screen (possibly in front of a scaled background), or put it in the lower-left corner or somesuch thing

 

Ooh, that's a good point. My GUI in this game was designed on a huge resolution, so it will look good on smaller ones.

 

In most cases, especially outside of games, you generally always want to GUI to be pixel perfect - no one likes looking at filtered 2D images with fuzzy text.
If you look at most RPG's when you go to a higher res, they still keep the GUI 1:1 - you just get more screen real-estate. If your monitor supports really high-res, its probably big, so things tend to stay reasonably proportional.

GUI scaling outside of Zoom/Scale/Genie style animations is generally an eyesore and best avoided unless you have images with little detail and huge text.

 

Having in-game GUIs be able scale is kind of necessary, though. The DPI of monitors isn't going down, and the OS itself is supposed to be heading in that direction, though I don't think resolution independence made it into the initial Leopard release. You can already see the problems with games released when 640x480 or 1024x768 was considered normal...run them at 1920x1200 and the GUI is so small you can't read it at a glance anymore, even on a large monitor. Even without resolution independence, you're already looking at scaled bitmaps all the time in OS X (the icons); the solution is to make the bitmaps big enough that they're always scaled down, because scaling up is indeed ugly.

--Eric

 

It should be as easy to make resolution independent UIs as fixed UIs. Unity shouldn't make that decision for me. We are using the old GUITexture/Text stuff in a newer project because implementing our ideas and GUI designs in the new system was a PITA.

I think UT needs to try and implement a super polished, resolution independent, fully animated and bubbly UI using the new system.

-Jon

 

SIDEBAR:
Incidentally, Leopard does use the widgets, etc. necessary for resolution independence. Apple is eating their own dogfood for awhile to get the glitches out before giving us a little slider for the UI size and pushing Core UI on developers.

Apple is using some clever ideas using a mix of fully rasterized and vector (via pdf) parts, even using a sort of texturing idea (but all in 2D.) If you've seen the Leopard UI, you've already seen it being used.

You can read about it in John Siracusa's exhaustive Leopard review at Ars-Technica.
Here's the review:
http://arstechnica.com/reviews/os/mac-os-x-10-5.ars
Here's the specifics about UI:
http://arstechnica.com/reviews/os/mac-os-x-10-5.ars/10

 

So use higher resolution textures. See Big Bang Brain Games. I think it would have looked like ass if we did a pixel-perfect GUI, as it'd have to be real small for compatibility. I think one of the reasons it got great reviews is because it looked nice at 640x480 all the way to 2560x1600, and aspect ratios all the way from 5:4 to who knows. And we didn't have to even make 100 different GUISkins!

-Jon

 

@aarku:
UnityGUI CAN scale GUI just fine - that's what GUI.matrix is for - you've got complete control over it (and can also hande a 90 deg rotation for weird kiosks / whatever), so I'm not sure I see where it's lacking.

Nobody said you ever had to do 10 GUI skins - with GUI 2.0, you're in (possibly too) complete control.

 

When I used GUI.matrix, mouse events broke, and I think you told me it wasn't very fixable. I guess this must have changed silently?

-Jon

 

Yes. GUI.matrix should work fully.

There are some issues if you upload perspective matrices, but for the move/scale/rotate, all is fine AFAIK (and if there is bugs, please file them so we can get it in the next update)

 

All right, it's not working here after trying rotation and scaling separately. I'll file bugs.

-Jon

 

Damn...

But file away - and I'll fix 'em like mad (BWAAAAAAAHAHAH)

 

Fundamentally, I think you can design for a given resolution and then develop a scaling / offset strategy for other cases.

And remember, you're going to need to deal with both scale and aspect ratio.