GUI layout question

[Robin]

Hi there,
I follow up on the question from the Unity Forum: http://forum.unity3d.com/threads/93287-2D-Toolkit-2D-in-Unity-made-simple-RELEASED/page102

To be more specific, what I'm interested to know is how easy it is to create layouts using 2D Toolkit UI. For example, let's say that I need to create a view with a label positioned 30% of the screen witdh and 20% screen height from the top-left corner of the screen. Then I need to position a button of size 30%*screenWidth x 20%*screenHeight centered horizontally at a height = Screen.height * 0.8f.

I also want my text font for the label and the button to be of a certain size depending on the screen resolution since I want my GUI to look the same on both iPad3 and iPhone 4 and 5. This is pretty easy to do with GUI Skin and Custom Styles using Unity GUILayout class.

Since 2D Toolkit has drag and drop GUI components I'm wondering if I have to adjust the positioning of the GUI elements when I load the view the first time or if there's some way to define how the layout of the components should be the same way Unity GUI does. Or is there some automatic adjusting of the view? I mean, if I drag and drop a component in the middle of the screen while I'm using Unity with the iOS iPad Wide setting, what happens if I switch to Android in one of the landscape resolution modes available in the editor? Is my GUI still the same or do I need to add some code that detects the resolution and then re-calculate the positioning?

Examples are welcome

Thanks a lot

[unikronsoftware]

With regards to absolute positions like that - it just doesn't work, as there isn't a system to dynamically resize elements. Its coming in a future release, but it doesn't exist for now. You're limited to positioning fixed size (or scaled by camera) elements at screen corners. The fact that components can't "resize" themselves is potentially an issue, for example, if you want a text input box to filll 90% of the width of the screen.

You can certainly write a script to reposition for different aspect ratios / resolutions - resolutions is usually easier, as you scale first and worry about position correction later.

If you use the tk2dCameraAnchor as the root, set it to center and drop a sprite onto it, it will be anchored to the center of the screen regardless of resolution. You can do the same with all the edges of the screen. This is completely usable in your case, but the limit will be what I mentioned above, components can't resize themselves.

[Robin]

Thanks for the answer.

Is there some example/tutorial about some GUI that works on iPad 3 and iPhone 5 for example, and how to manage the positioning and sizing dynamically by calculating the screen size and the world position of the different elements? Or do people usually create 2 separate GUI, one for iPhone4, one for iPhone5, one for iPad3 etc?

[unikronsoftware]

What kind of UI are you aiming for specifically? If you have any images of what you're trying to do I could probably give you some specific advice.

[Robin]

I don't have a specific design, my question was in general.

I often have to code GUI where I have, for example, a back button on the top-left corner of the screen, a text field in the middle of the screen and a button centered at the end of this text-area. Now, with the Unity GUI it's very easy to setup the layout so that all those elements (both buttons size, font size etc.) look exactly the same on all devices (iPhones, iPads, Android etc.). If 2D Toolkit GUI has drag and drop this means (I guess?) that if I place a button on the top-left corner of the editor view that world position will need to be changed when the GUi is shown on a bigger screen. Same for the font of a text area...now with the Unity GUI Rich Text feature (new since Unity 4 I think) I can just use <size = mySizeVariable> text </size> and calculate mySizeVariable only once when my view os loaded (it will be big for high resolution and smaller with small resolutions of course).

I was wondering if there's a tutorial or example with the workflow used in 2 Toolkit GUI that shows this kind of implementation. I've seen tutorials but they all assume you work with one screen size only, while most of the time I need to code GUI that work and adatps well on all iPhones models, all iPads models, all Android models etc.

You mentioned the 'anchors' right? But I guess those too have a world positioning that needs to be changed depending on the device resolution. In this case if I have 15 gui elements all with their own anchors do I need to recalculate the correct world position for all 15 anchors?

Thanks

[unikronsoftware]

2D Toolkit doesn't have any specific support for auto-layout like that. You will have to code that stuff yourself should you need it, or choose a more "layout friendly" GUI system, or even use the built in Unity OnGUI stuff. Alternatively, you can mix 2D Toolkit with multiplatform toolkit, that will let you configure for different resolutions.

2D Toolkit handles anchoring to screen perfectly fine, and scaling for different resolutions is performed using either tk2dCamera to automatically do it for you, or orthographic camera size tweaks to rescale to fit. You also don't HAVE to position stuff visually, you can simply instantiate and position stuff in code - we do that for complex lists.