Design GUI for Android/iPhone/PC

Do you guys have any tips when designing a GUI for multiple platforms? How can i streamline the development? Should i always use Screen.width and Screen.height relative positions? What about size?

Here is the basic approach we use:

var optimalHeight : int   =  1200;

var welcomeRect   : Rect  =  Rect(200, 200, 400, 300);

function getScale () : float
{
    return Screen.height / optimalHeight;
}

function OnGUI ()
{
    var scaledRect = scaleRectangle(welcomeRect);

    GUI.Label(scaledRect, "I am a scaled Label);    
}

function scaleRectangle ( someRect : Rect ) : Rect
{
    var theScale : float = getScale();

    var theX : float = theScale * someRect.x;
    var theY : float = theScale * someRect.y;
    var theW : float = theScale * someRect.width;
    var theH : float = theScale * someRect.height;

    return Rect(theX, theY, theW, theH);
}

The above code bases the scale entirely on the screen height, but it should be pretty obvious how to incorporate height and width.

@dannyskim

Thanks for the help, but i didn’t want a solution like EZGUI or similar. I wanted to rely on bare Unity GUI, not only for performance purposes, but for easy upgrade.

@jahroy

Thank you so much for the idea. It’s a very clever approach. As for positioning, what do you use? To position the buttons/labels accordingly to the screen size?