koobas.hobune.stream
GUI matrix Center on screen on different aspect ratio
How can I center the matrix on my screen?
Above image is created with below code and represents the screen in 16/9 aspect ratio. The box field is my interface area created in a 16/10 aspect ratio, so I need it to center in the other resolutions.
public var gSkin :GUISkin ;
// Resolution in wich the interface is designed.
var nativeWidth :float = 1680;
var nativeHeight :float = 1050;
// I set these in a awake function based on desktop resolution
var screenWidth :float;
var screenHeight :float;
function Awake()
{
screenHeight = Screen.height;
screenWidth = Screen.width;
}
function OnGUI()
{
var hScale :float = screenHeight / nativeHeight;
GUI.matrix = Matrix4x4.TRS (Vector3(0, 0, 0), Quaternion.identity, Vector3 (hScale, hScale, 1));
GUI.skin = gSkin ;
// Testing position
GUI.Box(Rect(0,0,nativeWidth,nativeHeight), "box");
}
How can I have the box/GUI matrix centered? I tried this with no luck:
function OnGUI()
{
var hScale :float = screenHeight / nativeHeight;
var wStart :float = (screenWidth - nativeWidth) /2;
GUI.matrix = Matrix4x4.TRS (Vector3(wStart, 0, 0), Quaternion.identity, Vector3 (hScale, hScale, 1));
GUI.skin = gSkin ;
// Testing position
GUI.Box(Rect(0,0,nativeWidth,nativeHeight), "box");
}
And another attempt at the wStart value without the expected result:
var wStart :float = (screenWidth - (nativeWidth/hScale)) /2;
As usual, when giving up and seeking help I suddenly find the solution myself ;) When calculating the start position I should not divide by scale but multiply.
For people wou can use it, this scales the GUI based on the vertical hight of the screen, keeps the aspect ratio and centers it over the width of the screen. Native Width and Native Height is the resolution used when designing the GUI.
public var gSkin :GUISkin ;
// Resolution in wich the interface is designed.
var nativeWidth :float = 1680;
var nativeHeight :float = 1050;
var screenWidth :float;
var screenHeight :float;
function Awake()
{
screenHeight = Screen.height;
screenWidth = Screen.width;
}
function OnGUI()
{
var hScale :float = screenHeight / nativeHeight;
var wStart :float = (screenWidth - (nativeWidth * hScale)) /2;
GUI.matrix = Matrix4x4.TRS (Vector3(wStart, 0, 0), Quaternion.identity, Vector3 (hScale, hScale, 1));
GUI.skin = gSkin ;
// Testing position
GUI.Box(Rect(0,0,nativeWidth,nativeHeight), "box");
// Create the GUI based on the native values
}
to center anything on any resolution you would typically go (I'm not really familiar with js so I will do it in c#)
// get the center of the screen then move half way up the size of the box
float centerHeight = Screen.Height * 0.5f - nativeHeight * 0.5f
//repeat for center width
float centerWidth = Screen.Width * 0.5f - nativeWidth * 0.5f
by doing this you are taking the exact center position of the screen then subtracting half of the box from it, that will put the box exactly in the center
Also multiplying by 0.5f is the exact same as dividing by 2 but computers can multiply faster than they can divide
