Game Development Community

How to make GUI independant of screen size?

by Mike Stoddart · in Torque Game Engine · 06/17/2002 (2:53 pm) · 13 replies

How would I layout and configure a GUI so that it is independant of the screen width and height?

I want to make a small panel across the bottom of the screen that will always use the full width of the screen regardless of the screen width, but I can't see a way of doing this.

I also want to position a text label at the bottom right hand side of the screen, again, independant of the screen width and height. I thought it might be related to the vertical/horizontal sizing option in the editor, but my experiments with this option produced nothing usable.

I tried searching the forum and resources, but I couldn't find anything. If I missed some documentation or topics in the forum, just point me there!

Any suggestions?

Thanks

#1
06/17/2002 (2:58 pm)
horizSizing = "relative";
   vertSizing = "relative";
should do the trick...
#2
06/17/2002 (3:13 pm)
What is it relative to though? This is the part I don't understand? Relative to the upper left corner of the screen/parent? If so, I'd still need to know the screen width and height to place something in the bottom right of the screen at every resolution.

Thanks
#3
06/17/2002 (3:18 pm)
Yeah, this confuses me all the time, too... I don't know what it is relative to, but it works this way... it always uses the whole screen then...
To place something "bottom right of the screen at every resolution", use this:
horizSizing = "left";
         vertSizing = "top";
(always the opposite of where it should be placed)...
#4
06/17/2002 (3:24 pm)
What you want to do is very resolution dependant.

For your first sample I'd brobably go with the following settings

horizSizing = "width";
vertSizing = "top";

This will set your control to be as wide as it's parent container, and the vertical position will always be x distance from the bottom of the screen where x would be say 5 pixels, it would always be 5 pixels from the bottom of the screen regardless of the resolution.

For your other example I'd say you want to use:

horizSizing = "left";
vertSizing = "top";

EDIT: Hehe.. a bit slow on the typing, but I can explain how they work.

relative resizes based on the percentage the control takes up when the screen is at 640x480. When you resize to any other resolution it will always be in the same place on the screen Percentage wise. So if your control is 5% away from the top and left of the screen at 640x480 it will be 5% away at 800x600.

The other options, Top,Left, Right, Bottom... All tell the system to resize the control in that direction. The control is still increased in size based on the Percentage of 640x480 it is. The difference is that if you specify Bottom, Right the control will expand in that direction. So if it was 5 pixels away from the top and left it would still be 5 pixels away from the top and left.

The last two option Width and Height tell the control to resize to match the current width or height of it's parent container.
#5
06/17/2002 (3:47 pm)
Just a minor correction of LabRat's post...

All of the sizing options tell the control how to resize when its parent control is resized. The parent most (content) control is always sized to the current screen resolution.

The top, left, right and bottom sizing options control set the sizing to the areas outside the control in that direction - so if you set sizing to "right" then the control will stay fixed relative to the left edge of its parent control when the parent resizes. It's not exactly the most intuitive way of naming things, but it seemed like a good idea at the time ;)
#6
06/17/2002 (3:53 pm)
I did forget to mention that the top parent control gets set to the current resolution didn't I
#7
06/17/2002 (4:41 pm)
Frankly, it all sounds like a bit of a mess :))

Maybe someone could actually fix it so that it made sense, its not a HUGE job I dont think.

I'd like to see someone have a go with the gui editor, it'd be nice if it ran in a higher res, then allowed more "edit" space, for stuff like a toolbar, scratch space, maybe a pasteboard metaphor (like a page layout program, where you have a "page" in the center and dead space either side.

That'd allow a lot more fun with moving controls.

Thing is, this is a relatively simple change, and would make quite a lot of difference to the gui (which to be fair, lacks quite a lot of flair :))

Phil.
#8
06/17/2002 (5:06 pm)
Thankyou! I got it working. :)
#9
06/17/2002 (5:09 pm)
I run my editor in 1024x768 ;p
I know at least part of what you mean by the not enough workspace. We're limited to the 640x480 window size (would moving up to 800x600 be appropriate now?

And when working at 1024x768 the wasted space on the bottom and right hand side of the screen are annoying.

Maybe I will take a whack at re-structuring the GUI Editor layout. Add a menubar like the Mission Editor has, make use of the deadspace when running at higher than 800x600 resolutions.
#10
06/17/2002 (5:18 pm)
That's a great idea Harold. It's annoying working with the GUI editor, as there is less screen real estate to work with than you have in the game.
#11
06/17/2002 (11:37 pm)
OK... changing the GUI Editor GUI is not possible at the moment.

The GuiEditCtrl does not see position offsets, so it always calculates the position of click areas relative to the upper left hand corner being centered at 0,0.

If someone wants to take a look and confirm, Fix or disprove this fact, please do.
#12
06/18/2002 (1:15 am)
Microsoft has phased out 640x480.....Personally I'd like it if torque did also.

-Tim aka Spock
#13
06/18/2002 (7:05 am)
Microsoft has also phased out Linux, but hopefully GG won't.

:P

Sorry, couldn't resist it!