Scaling Unity GUI Elements for iPhone 3

Unity Engine
,
1

Hi,

Im currently working on my first Unity project. I have been creating all of the GUI elements using OnGui(). I have however been creating all of these elements based on the iPhone 4 retina screen. When I build the project for the iPhone 3g the GUI elements appear to be way way too big.

Is there any way I can fix this?

2

How are you specifying the size and location of your buttons, etc?

You should be able to size and position them based on the Screen.width:

unction OnGUI () {
GUI.Box (Rect (0,0,100,50), “Top-left”);
GUI.Box (Rect (Screen.width - 100,0,100,50), “Top-right”);
GUI.Box (Rect (0,Screen.height - 50,100,50), “Bottom-left”);
GUI.Box (Rect (Screen.width - 100,Screen.height - 50,100,50), “Bottom-right”);
}

3

Thanks for the reply,

I have been setting them with pixel values rather than based on screensize. Ill implement that which should solve the positioning of the elements, but the size of the elements will still be effected by the lower resolution of the iphone 3g screen.

I also have a couple of GUI Textures which are used as joysticks and are dependent on the settings of the GUI Texture component. These also resize to incorrect proportions when built on a lower resolution device :frowning:

4

Can you not set the GUITexture Pixel Inset according to your screen width and height?

“To use it effectively, you need to set the scale of the GUI Texture’s Transform to (0, 0, 0). Now, the Pixel Inset is in full control of the texture’s size and you can set the Pixel Inset values to be the exact pixel size of your Texture.”

5

Do you mean attach a script to the GUI Texture which sets the inset relative to the screen?

6

Yup.

http://unity3d.com/support/documentation/ScriptReference/GUITexture-pixelInset.html

7

Nice that worked. Thanks mate! I didnt have to use the Screen as a reference, just halved the relevant values:

  • if(iPhoneSettings.generation != iPhoneGeneration.iPhone4){*
  • gui.pixelInset.width = gui.pixelInset.width / 2;*
  • gui.pixelInset.x = gui.pixelInset.x / 2;*
  • gui.pixelInset.height = gui.pixelInset.height / 2;*
  • gui.pixelInset.y = gui.pixelInset.y / 2;*
  • }*
    I still have the issue with the sizing of the onGui() elements. I guess i could do a similar thing, check the phone version then halve the element sizes accordingly. But then the fonts wont be the correct sizes… I wish there was a simpler way :confused:
8

Maybe based on the screen size you could use a different font point size?