GUI Resolution
by Robert Fritzen · in Torque 3D Professional · 10/29/2011 (8:01 pm) · 9 replies
I'm sure this has been asked many times, but a search on my end is coming up blank.
How do you make your GUI's account for the many different screen resolutions, and full screen/windowed mode. Obviously this is a very important part of the game is to have a working GUI interface, and not some elements flying off the screen or in very odd positions due to resolution issues. I would have figured this kind of information to be in the docs.
Anyways, how do you make GUI's that are relative to all screen sizes, instead of absolute to a certain size?
How do you make your GUI's account for the many different screen resolutions, and full screen/windowed mode. Obviously this is a very important part of the game is to have a working GUI interface, and not some elements flying off the screen or in very odd positions due to resolution issues. I would have figured this kind of information to be in the docs.
Anyways, how do you make GUI's that are relative to all screen sizes, instead of absolute to a certain size?
About the author
Illinois Grad. Retired T3D Developer / Pack Dev.
#2
In most cases you'll want to create a GuiControl object (with its extent set to your design resolution (640 x 480, 800 x 600, etc.) and horiz/vertSizing fields set to 'relative'). This will create a blank/invisible GUI control to act as a parent container for other controls. It will fill the entire window and resize to fit the resolution.
From there you can create new controls as children and set their respective horiz/vertSizing fields to whatever is appropriate.
As the screen resolution changes, the parent GuiControl will resize to fill the screen and this change will be propagated to all of the child controls. How the child controls handle this change will depend on what their horiz/vertSizing fields are set to. If they're set to 'relative', for example, then the child controls will scale upwards/downwards and adjust position to keep the same relative size/location within their parent (GuiControl).
10/30/2011 (12:32 am)
This (old) post does a decent job of explaining the basics: http://www.garagegames.com/community/blogs/view/1892In most cases you'll want to create a GuiControl object (with its extent set to your design resolution (640 x 480, 800 x 600, etc.) and horiz/vertSizing fields set to 'relative'). This will create a blank/invisible GUI control to act as a parent container for other controls. It will fill the entire window and resize to fit the resolution.
From there you can create new controls as children and set their respective horiz/vertSizing fields to whatever is appropriate.
As the screen resolution changes, the parent GuiControl will resize to fill the screen and this change will be propagated to all of the child controls. How the child controls handle this change will depend on what their horiz/vertSizing fields are set to. If they're set to 'relative', for example, then the child controls will scale upwards/downwards and adjust position to keep the same relative size/location within their parent (GuiControl).
#3
10/30/2011 (7:47 am)
Yes. This can be annoying when integrating changes to existing GUIs. When doing this it's best to work with the original GUI in its original size. Otherwise the relative positioning will result in your new elements scaling to odd sizes that don't match the preexisting elements when you change resolutions.
#4
I looked for appropriate method but couldn't find a console method to make my dynamically created gui a child of the GUIcontrol.
02/04/2013 (12:16 pm)
I am trying to create dynamically GUI elements. How to make them a child of an already existing GUIControl? I need this to preserve size (needed when changing resolution to have them well positioned and sized)I looked for appropriate method but couldn't find a console method to make my dynamically created gui a child of the GUIcontrol.
#5
Edit:
www.garagegames.com/community/forums/viewthread/50830
02/04/2013 (3:31 pm)
Aren't GUIs simsets/simgroups? Maybe it is something like:%parentgui.add(%childgui);
Edit:
www.garagegames.com/community/forums/viewthread/50830
#6
This is what my code look like:
Then I create dynamically the child Gui:
I also tried with add(). On resolution change the parentGui resizes itself the right way, while the childContainer Gui doesn't.
02/04/2013 (11:30 pm)
In fact I tried out exactly this. I also used addGuiControl() console method, but it doesn't do the job.This is what my code look like:
new GuiControl(parentGui) {
Profile = "GuiDefaultProfile";
HorizSizing = "relative";
VertSizing = "relative";
position = "0 0";
Extent = "1024 768";
MinExtent = "8 2";
Visible = "1";
};Then I create dynamically the child Gui:
%newcontainer = new GuiControl(childContainer) {
Profile = "GuiDefaultProfile";
HorizSizing = "relative";
VertSizing = "relative";
position = "0 0";
Extent = "1024 768";
MinExtent = "8 2";
Visible = "1";
new GuiAnimatedBitmapCtrl() {
profile = "GuiDefaultProfile";
HorizSizing = "relative";
VertSizing = "relative";
position = "0 300";
extent = "1024 120";
minExtent = "8 8";
visible = "1";
helpTag = "0";
lockMouse = "0";
wrap = "0";
is3d = "0";
Interval = "30";
DML = "art/gui/example.dml";
angle = "0.0";
};
};
parentGui.addGuiControl(%newcontainer);I also tried with add(). On resolution change the parentGui resizes itself the right way, while the childContainer Gui doesn't.
#7
Perhaps that will fix it.
The other controls say: isContainer = "0";
02/05/2013 (12:07 am)
I just am looking through the default menu control which is a chunkedbitmapcontrol. It has this: isContainer = "1";Perhaps that will fix it.
The other controls say: isContainer = "0";
#8
What I wanted to do with this dynamically created GuiAnimatedBitmapCtrl is to delete an older one and create at its place the new GuiAnimatedBitmapCtrl. Therefore before I delete the old Control I get its position with getPosition() and extent with getExtent() and give it to the new GuiAnimatedBitmapCtrl.
I didn't want to go this way, seems very poor as solution, but it does do the job. Thanks!
02/05/2013 (12:49 am)
Actually I found a way to fix this.What I wanted to do with this dynamically created GuiAnimatedBitmapCtrl is to delete an older one and create at its place the new GuiAnimatedBitmapCtrl. Therefore before I delete the old Control I get its position with getPosition() and extent with getExtent() and give it to the new GuiAnimatedBitmapCtrl.
I didn't want to go this way, seems very poor as solution, but it does do the job. Thanks!
#9
02/09/2013 (3:41 am)
@Lyudomir, can't you just change the properties of your existing GuiAnimatedBitmapCtrl to match your new GuiAnimatedBitmapCtrl? That way you don't have to delete and create a new one.
Torque Owner Nathan Martin
TRON 2001 Network
The example script GameBrowserGui.gui provided with my GuiModernTextListCtrl resource is a good example of proper use of such fields.