koobas.hobune.stream
Screen Resolution and GUI cutoff issue. Android.
I was trying to create GUI, with the built in GUITextures but ran into a problem when I tested on a HTC Desire C, which cut off part of the GUI.
This made me try the GUI.matrix, which didn't work:
void OnGUI()
{
if (Application.platform == RuntimePlatform.Android)
{
Resolution resolution = Screen.currentResolution;
float width = resolution.width;
float height = resolution.height;
Vector3 offset = new Vector3 (0.0f, 0.0f, 0.0f);
Quaternion rotation = Quaternion.Euler(0.0f, 0.0f, 0.0f);
Vector3 scale = new Vector3(1.0f/width, 1.0f/height, 1.0f);
GUI.matrix = Matrix4x4.TRS(offset, rotation, scale);
}
}
Then I tried drawing GUI dynamically, which worked:
public class DrawHUD : MonoBehaviour {
GUITexture up;
GUITexture down;
GUITexture left;
GUITexture right;
void OnGUI()
{
up = GameObject.FindGameObjectWithTag("Up").GetComponent();
up.transform.position = Vector3.zero;
up.transform.localScale = new Vector3(0.04f, 0.05f, 0.00f);
up.pixelInset = new Rect(Screen.width/1.15f, Screen.height/3.7f, Screen.width/25f, Screen.height/7.5f);
down = GameObject.FindGameObjectWithTag("Down").GetComponent();
down.transform.position = Vector3.zero;
down.transform.localScale = new Vector3(0.04f, 0.05f, 0.00f);
down.pixelInset = new Rect(Screen.width/1.15f, Screen.height/11f, Screen.width/25f, Screen.height/7.5f);
left = GameObject.FindGameObjectWithTag("Left").GetComponent();
left.transform.position = Vector3.zero;
left.transform.localScale = new Vector3(0.04f, 0.05f, 0.00f);
left.pixelInset = new Rect(Screen.width/1.22f, Screen.height/6f, Screen.width/25f, Screen.height/7.5f);
right = GameObject.FindGameObjectWithTag("Right").GetComponent();
right.transform.position = Vector3.zero;
right.transform.localScale = new Vector3(0.04f, 0.05f, 0.00f);
right.pixelInset = new Rect(Screen.width/1.08f, Screen.height/6f, Screen.width/25f, Screen.height/7.5f);
}
}
For me the second solution seems messy, and not "good enough". I've tried googling for and experimenting for a few hours now, still haven't come up with a solution.
If you can help me out, it would be greatly appreciated!
Best Answer
I develop for android, and I'm going to assume IOS would act the same way, and with my experience gui.matrix is horrible.
Now I know it's how we are using it because many other people are able to get it to work but I was having the same issue as you. As I result I do exactly as you are doing in your second example.
All my gui components are displayed using coordinates that are a percentage of my screen size.
There are 2 things you can do to make it no different then just specifying "5,6,8,1" in your rectangle:
Make a variable that has Screen.Width and Screen.Height. Define these values in the Awake or Start method sense they don't change. Beyond that do the same thing for all your rectangles. That way you calculate it once and then just grab the values rather then executing them every GUI frame. Heres a snip-it from my UI script:
//initializing all the boxes
private void InitializeRects(){
box1 = new Rect(5f,(topPanelRect.height - topPanelRect.height/20f),topPanelRect.width/9f,topPanelRect.width/9f);
box2 = new Rect(screenWidth/4 - (screenWidth/4)/2,screenHeight/3, screenWidth/2 + screenWidth/4,screenHeight/2);
box3 = new Rect(screenWidth/2 + screenWidth/22,screenHeight/2 + screenHeight/6, screenWidth/5,screenHeight/7);
box4 = new Rect(screenWidth/4,screenHeight/2 + screenHeight/6, screenWidth/5,screenHeight/7);
box5 = new Rect(screenWidth/4,screenHeight/4, screenWidth/2,screenHeight/2);
box6 = new Rect(screenWidth/2 - (screenWidth/5)/2, screenHeight/2 + screenHeight/16, screenWidth/5,screenHeight/7);
box7 = new Rect(0, 0, topPanelRect.width, topPanelRect.height);
box8 = new Rect(((topPanelRect.width-(topPanelRect.height/2f + topPanelRect.height/6f))-3f), 2f, topPanelRect.height/2f + topPanelRect.height/6f, topPanelRect.height/2f + topPanelRect.height/6f);
box9 = new Rect(0, 0, bottomPanelRect.width, bottomPanelRect.height);
box10 = new Rect(3, bottomPanelRect.height/11, 250f, 50f);
box11 = new Rect((screenWidth/2)-screenWidth/4,bottomPanelRect.height/11,250f,50f);
box12 = new Rect((screenWidth/2)+screenWidth/20,bottomPanelRect.height/11,250f,50f);
box13 = new Rect(screenWidth/3 - (screenWidth/15)/2, screenHeight/15, screenWidth/3 + screenWidth/15, screenHeight/2+screenHeight/5);
box14 = new Rect(screenWidth/3 + screenWidth/23, screenHeight/5 + screenHeight/13, screenWidth/4, screenHeight/12);
box15 = new Rect(screenWidth/3 + screenWidth/23, screenHeight/3 + screenHeight/16, screenWidth/4, screenHeight/12);
box16 = new Rect(screenWidth/3 + screenWidth/23, screenHeight/2 + screenHeight/80, screenWidth/4, screenHeight/12);
box17 = new Rect(screenWidth/3 + screenWidth/23, screenHeight/2 + screenHeight/8, screenWidth/4, screenHeight/12);
box18 = new Rect(screenWidth/3 - (screenWidth/15)/2, screenHeight/3 - (screenHeight/7)/2, screenWidth/3 + screenWidth/15, screenHeight/3 + screenHeight/5);
box19 = new Rect(screenWidth/3 + screenWidth/23, screenHeight/3 + screenHeight/7, screenWidth/4, screenHeight/12);
box20 = new Rect(screenWidth/3 + screenWidth/23, screenHeight/3 + screenHeight/4, screenWidth/4, screenHeight/12);
box21 = new Rect(screenWidth/3 + screenWidth/23, screenHeight/3 + screenHeight/3 + screenHeight/50, screenWidth/4, screenHeight/12);
box22 = new Rect(0, bottomPanelRect.height/3, Screen.width-5, Screen.height+12);
box23 = new Rect(screenWidth - (screenWidth/3) - (screenWidth/9),topPanelRect.height+screenHeight/10, screenWidth/3 + screenWidth/10, screenHeight/2);
box24 = new Rect(screenHeight/50, screenHeight/50, screenWidth/3 + screenWidth/10, box23.height/4);
box25 = new Rect(screenHeight/50, screenHeight/14, screenWidth/3 + screenWidth/10, box23.height/4);
box26 = new Rect(screenHeight/50, screenHeight/7, screenWidth/3 + screenWidth/10, box23.height);
box27 = new Rect(screenWidth/4 - screenWidth/20, screenHeight/15, screenWidth/2 + screenWidth/10, screenHeight/2+screenHeight/3+screenHeight/10);
int yLoxationA1 = screenHeight/4;
int yLocationB1 = yLoxationA1 + screenHeight/20;
int yLocationA2 = screenHeight/2 - screenHeight/9;
int yLocationB2 = yLocationA2 + screenHeight/20;
int yLocationB3 = yLocationB2 + screenHeight/9;
int yLocationA4 = yLocationB3 + screenHeight/10;
int yLocationA5 = yLocationA4 + screenHeight/10;
int yLocationA7 = yLocationA5 + screenHeight/10;
int yLocationA6 = yLocationA7 + screenHeight/50;
box28 = new Rect(screenWidth/3, yLoxationA1, screenWidth/4,screenHeight/20);
box29 = new Rect(screenWidth/3 + screenWidth/25, yLocationB1, screenWidth/7, screenHeight/15);
box30 = new Rect(screenWidth/3, yLocationA2, screenWidth/4,screenHeight/20);
box31 = new Rect(screenWidth/3 + screenWidth/25, yLocationB2, screenWidth/7, screenHeight/15);
box32 = new Rect(screenWidth/2 + screenWidth/20, yLocationB1, screenWidth/10, screenHeight/11);
box33 = new Rect(screenWidth/2 + screenWidth/20, yLocationB2, screenWidth/10, screenHeight/11);
box34 = new Rect(screenWidth/4, yLocationB3, screenWidth/10, screenHeight/11);
box35 = new Rect(screenWidth/4, yLocationA4, screenWidth/10, screenHeight/11);
box36 = new Rect(screenWidth/4, yLocationA5, screenWidth/10, screenHeight/11);
box39 = new Rect(screenWidth/2 + screenWidth/35, yLocationB3, screenWidth/10, screenHeight/11);
box42 = new Rect(screenWidth/2 + screenWidth/35, yLocationA4, screenWidth/10, screenHeight/11);
box37 = new Rect(screenWidth/2 - (screenWidth/6)/2,yLocationA6,screenWidth/6,screenHeight/10);
buildMenuAllTowersFixedWidth = screenWidth/13;
buildMenuAllTowersFixedHeight = buildMenuAllTowersFixedWidth;
buildMenuAllTowersFixedY = Screen.height-buildMenuAllTowersFixedHeight-6-(int)bottomPanelRect.height;
buildMenuAllTowersFixedTotalBoxWidth = buildMenuAllTowersFixedWidth + 6;
towerList=BuildManager.GetTowerList();
for(int i=1; i<towerList.Length; i++){
buildMenuAllTowersFixedTotalBoxWidth += (buildMenuAllTowersFixedWidth + 3);
}
box38 = new Rect(0,buildMenuAllTowersFixedY,buildMenuAllTowersFixedTotalBoxWidth,buildMenuAllTowersFixedWidth+10);
box40 = new Rect(screenWidth/20,buildMenuAllTowersFixedY - screenHeight/6,screenWidth/8,screenHeight/8);
box41 = new Rect(screenWidth/5,buildMenuAllTowersFixedY - screenHeight/6,screenWidth/8,screenHeight/8);
}
And in my Start method I call InitializeRects();
And a part of my GUI looks like:
//this is the option menu from when you click the "options" button from inside the pause menu
void ShowTheOptionsMenu(){
//draw the box for the options menu
GUI.skin.box.normal.background = mapBackgroundBox;
GUI.Box(box27, "\nOptions");
//change the font to the smaller font for small screens
if(useSmallText){
GUI.skin.font=infoFont;
}
//sound effects volume
GUI.Label(box28,"Sound Effects Volume");
soundEffectsVolume = GUI.HorizontalSlider(box29, soundEffectsVolume, 0.0f, 1.0f);
//Music volume
GUI.Label(box30,"Music Volume");
musicVolume = GUI.HorizontalSlider(box31, musicVolume, 0.0f, 1.0f);
//change the font back to default font so it doesn't mess up the rest of the screen
if(useSmallText){
GUI.skin.font=defaultFont;
}
//sound effects on/off
soundEffectsMutedConvertBooltoInt = GUI.Toggle(box32, soundEffectsMutedConvertBooltoInt, "Mute");
//music on/off
musicVolumeConvertBoolToIn = GUI.Toggle(box33, musicVolumeConvertBoolToIn, "Mute");
//High detail on or off
showHighDetailConvertIntToBool = GUI.Toggle(box34, showHighDetailConvertIntToBool, "High Detail");
//Vibration on or off
playVibrationsConvertedIntToBool = GUI.Toggle(box35, playVibrationsConvertedIntToBool, "Play Vibrations");
//FPS on or off
showTheFPSConvertIntToBool = GUI.Toggle(box36, showTheFPSConvertIntToBool, "Show your FPS");
//ourTerrain on or off
showTheTerrainConvertIntToBool = GUI.Toggle(box39, showTheTerrainConvertIntToBool, "Show Terrain");
//auto save on or off
autoSaveOnConvertIntToBool = GUI.Toggle(box42, autoSaveOnConvertIntToBool, "Allow Autosave");
if(GUI.Button(box37, "Save")){
SaveThePlayerPrefs();
SetThePlayerPrefs();
showingOptions = false;
}
SaveThePlayerPrefs();
SetThePlayerPrefs();
}
Now this might not be the BEST way, or the prettiest, but it works. And it works pretty nicely. I have 4 different devices I test on, all of them are different dpi and screen resolutions - and my gui is pretty much identical on all of them.
Another cool thing is if you port out to ANY other platform, whether it is PC/$$anonymous$$AC/Xbox/etc your gui will be relatively identical. You wont have to change your gui just to port to a different platform.
Alright! Thanks a bunch! I guess i'll just need some more practice doing this. Thank you again for your time! Those tricks are what I was looking for!
It was a mess at first, but you get used to it. You learn tricks, like how to get your box centered and what not.
