What are the considerations to creating GUI in IOS?

Unity Engine
1

Hello, I am making a game for IOS. Now I have to make the GUI.
I would like to know what are the considerations to keep in mind when making the graphical interface of menus, etc. to iPhone, iPod Touch and iPhone.

What are the resolutions to use for each device and version?
I must make only one GUI and resize? or should I create a GUI specified for each device?

At the moment I am doing the GUI designed for 960 x 640 resolution.

2

one tip from my experience with unity ios and gui, its stay away from buttons or any other interactive gui control, its fine to display stuff, although if you have too much items to display the draw call skyrockets to space, but buttons are specially crappy on ios… unresponsive, buggy and heavy on resources, they never seem to catch the touches right, so i just made my own replacement for buttons drawing the texture and basic Rectangle check for touches

also , gui can be scaled very easily with some tricks, like getting the aspect ratio of the screen in comparison with the intended resolution

i use this to scale rectangles for touch checking

Vector2 resMultiplier = new Vector2((float)1 * Screen.width / 1024, (float)1 * Screen.height / 768);

also you can scale the unity gui in the same manner

GUI.matrix = Matrix4x4.TRS(Vector3.zero, Quaternion.identity,new Vector3((float)1.0 * Screen.width/1024, (float)1.0 * Screen.height/768, 1.0f));

use one or the other but not both, because gui elements are drawn taking rectangles as their position and size, if you scale the rectangle, and then tell gui to scale everything too, you will end up with wrong looking gui and inaccurate touch checking

for the resolutions of iOS devices

iPhone and iPod Touch Retina is 960x640

pre Retina iPhone and iPod Touch is 480x320 which is Retina / 2

and iPad and iPad 2 is 1024x768

between iphone and ipad not only they used different resolutions, but also different aspect ratios, so that kind of scaling tricks are essential if you intend to release something for both

hope this helps

3

For scaling GUI in javascript without messing with Screen calculations, I uploaded this short code a while ago on the wiki that replaces the Rect structure with a scaledRect method. It auto formats all dimensions on your GUI so you can use hard coded values and still be resolution independent.

http://www.unifycommunity.com/wiki/index.php?title=ScaledRect

4

That is very similar to my helper class, but this includes some extra features:

using UnityEngine;
using System.Collections;

public static class CSP {
	
	public static Vector2 targetRes = new Vector2 (800, 600);
	
	public static float X (float pos) {
		
		float returnPos;
		
		float xFactor = Screen.width / targetRes.x;
		
		returnPos = pos*xFactor;
		
		return returnPos;
		
	}
	
	public static float Y (float pos) {
		
		float returnPos;
		
		float yFactor = Screen.height / targetRes.y;
		
		returnPos = pos*yFactor;
		
		return returnPos;
		
	}
	
	public static Vector2 Vec2 (Vector2 pos) {
		
		Vector2 returnPos = new Vector2 ();
		
		returnPos.x = X (returnPos.x);
		returnPos.y = Y (returnPos.y);
		
		return returnPos;
		
	}
	
	public static float GUIX (float pos, float xScale) {
		
		return (Screen.width*pos)-(Screen.width*(xScale/2));
		
	}
	
	public static float GUIY (float pos, float yScale) {
		
		return (Screen.height-(Screen.height*pos))-(Screen.height*(yScale/2));
		
	}
	
	public static Rect GUIRect (float x, float y, float xScale, float yScale, Vector2 cutOff, bool moveDown) {
		
		if (x != 0)
			x = (Screen.width*x)-(Screen.width*(yScale/2));
		
		if (y != 0)
			y = (Screen.height-(Screen.height*y))-(Screen.height*(yScale/2));
		
		xScale = Screen.width*xScale;
		yScale = Screen.height*yScale;
		if (moveDown) {
			y += yScale-(yScale*cutOff.y);
			yScale *= cutOff.y;
		} else {
			y -= yScale-(yScale*cutOff.y);
		}
		
		return new Rect (x, y, xScale, yScale);
		
	}
	
	public static Rect Rect (float x, float y, float width, float height) {
		
		return new Rect (CSP.X (x), CSP.Y (y), CSP.X (width), CSP.Y (height));
		
	}
	
	public static Rect Rect (Rect rect) {
		
		return CSP.Rect (rect.x, rect.y, rect.width, rect.height);
		
	}
	
}

Supports Rects, X&Y values, Vector2, and GUITextures.

5

Thanks for the great input! Do you have any examples at hand of buttons vs. a no-button approach to see the performance issue?

6

yes this interests me.
I am building my first title and am just getting into the gui.

what about the asset store?

7

There are quite a few Unity GUI based Assest Stroe titles.
NGUI -$55
And
EZGUI -$200
Seem to be the most popular

I am currently going thru the process of deciding which if any suit my needs better.

The real bonus of these assests is that they reduce draw calls.
Something critical to performance.