setup a scalable GUI with anchor points?

[digimbyte]

Hey guys, I finally got around to exporting my game to Android and I discovered a few issues
Specifically Scale

the issue is on HD screens, even though they are 4-5 inches contain 1600x900+ resolutions
and on my phone the GUI did not display correctly, Text was small and buttons far apart and stretched
the reason for this is the text is a set size of 22 and the buttons set to a ratio

the way to solve this, is to remove normalize and scale to increase text size and give more power and flexability over the GUI

now, I've come across some minor issues to do this.
Im not sure how I would use Scale GUI and alter the float depending on the size of the screen, maybe divide the screen size by a predefined size that would be ideal for the default scale

now the main issue, is how to anchor a button to one corner or the other using a pixel (not normalized) offset inside Scale_Gui
My attempt to anchor the button to the corner was to use GUILayout_Begin_Area however it clips anything outside its region
I'm not familiar if there is an alternative and ideal solution for this, so i was hoping someone might have some suggestions to use a normalized point and allow negative coords into an element

[Horror]

Well that's a coincidence; I just came here to ask for the same advice. My GUI is designed to be displayed optimally on an 800x480 screen, it uses X and Y world space positions to anchor the GUI to either corner of the screen, with pixelInset to adjust its position from there.

While all my individual elements are positioned correctly, they look very small on high res devices and way too big on lower res ones. I've tried various scripts to correct the problem, but none of them work.

So I too would be interested in seeing a foolproof playMaker solution to GUI scaling!

EDIT: Also, Scale GUI doesn't seem to have any effect on my GUI textures at all. What's up with that?

[digimbyte]

the way around it, is to set up variables that get the screen widthXhieght and add the leftXtop too it

I've been tryign to do it by editing the FSM of the button but its not liking it
I don't know how Hutong coded it but the Button "Left, Top, Width, Height" seems to be related to another script which i cant find, i would be shooting in the dark

but somewhere in the FSM for the Buttons and GuiGroups it needs the following

Code: [Select]

public FsmFloat AnchorLeft; // 0 -> 1.0 float
public FsmFloat AnchorTop; // 0 -> 1.0 float

rect.x = (Screen.width * AnchorLeft) + Left.Value;
rect.y = (Screen.height * AnchorTop) + Top.Value;
what this does is gets a normalized position from the screen Rect and simply adds the button offset to it
I haven't got it to work as FSM coding is some what fragile and limited on the GUIButton

Ideally this should be in its own GuiLayout but that's not possible due to the clipping which cant be disabled

[Alex Chouls]

Check out this sample scene:

PlaymakerSamples/TestLab/GUI/GUILayoutScreenCorners.unity

It shows how to anchor GUI to screen corners using GUILayout.

[digimbyte]

I downloaded and looked at the examples, its definitely allows an element to be pushed to that position, but Im wary as its not really anchoring it, but pushing it aside with an invisible region, i guess if you need multiple objects to one corner it needs to be in a sub Gui Area

my only issue is scale GUI which is crucial for mobile platforms, the issue with mobile being that even if a button is 'normalized' to the screen, the font isn't, requiring GUI scale to amend the issue
GUI Scale applied to the example scales the whole GUI and not a certain element

Maybe each element needs to be on its own FSM, but that could become a mess quite quickly

[digimbyte]

A Note to those looking for the solution, the current method is to use
GUILayout Flexable Space which fills an area or void and pushes elements aside which is nested in this order
GUILayout Begin Area
 > GUILayout Begin Vertical
  > GUILayout Begin Horizontal
   > Insert Top Left Elements here
    >GUILayout Flexible Space
   > Insert Top Right Elements here
  > GUILayout End Horizontal
 > GUILayout Flexible Space (this pushes the bottom elements down)
  > GUILayout Begin Horizontal
   > Insert Bottom Left Elements here
    >GUILayout Flexible Space
   > Insert Bottom Right Elements here
  > GUILayout End Horizontal
 > GUILayout End Vertical
GUILayout End Area

[digimbyte]

I ran into an issue and it seems GUILayout Buttons are NOT the same as GUI Button
which isn't compatible with any of the GUILayout actions

so now i have to redo my entire projects menu system to correct this
it seems foolish though because this is making a huge mess of actions when All i need is to have a few elements anchored to the screen which can be done quite easily, but not in playMaker

Maybe PlayMaker needs a GUI Drive system where you can anchor and work with a gui much more powerfully like XML or visually?

just my honest opinion but its become complex just to have 4 buttons in certain places.

[digimbyte]

I would suggest using a GUI solution, playMaker lacks GUI development

I'll be using NGUI from now on and controlling its states with playMaker behind it