Explaining horizSizing and vertSizing
by Tim "Zear" Hammock · 01/01/2002 (9:39 am) · 8 comments
Having experience with the Java language and gui objects, I found the 'layout' capabilities of Torque gui objects a bit difficult to wrap my head around. The settings for horizSizing and vertSizing seemed a bit un-intuitive. So I did a little digging and made these notes for myself. I hope you find them useful.
Tim 'Zear' Hammock
--------------------------
horizSizing and vertSizing
==========================
In general, these settings define how an object will be resized or repositioned when the object's parent container is resized. As a general rule, you can assume that the root container (the Canvas) will have a starting size of 640x480, and it (and all of the objects it contains) will be resized/repositioned from this state.
As any container is resized, all of its child objects are resized and/or repositioned according to the horizSizing and vertSizing properties of each object. If any of those objects are container with children of their own, they too will be resized and/or repositioned in the same fashion. This behavior cascades down the parent-child tree of objects. This provides a basic layout capability.
The basic settings for these two properties are: center, relative, left/top, right/bottom, and width/height. Each is explained below.
1) Center:
This setting will center the object in its container. Only the object's position is altered - the object's extent remains the same.
2) Relative:
When this setting is applied, the object in question will be resized and repositioned to maintain the same size and position relative to the parent container. For example, if the parent doubles in size, so will this object; additionally the space between the object and the parent's borders will double.
The result is similar to what you would see if you were to take a screenshot of the original visual layout and resize the resulting image in a graphics editor.
3) Left/Top & Right/Bottom:
These settings only affect position. Extent is unaffected. Simply put, the change in size of the parent is applied to the distance between the object and the specified edge of the screen. This means that the object will maintain its distance from the opposite edge (this is counter-intuitive IMHO).
If you are familiar with Java layouts, you may recognize that these are like the _inverse_ of the similar settings (North, South, East, West) in a BorderLayout (this is probably why I have a hard time with these)
4) Width/Height:
These settings result in changes to the extents (size) of the object only. The difference in size of the containing object is applied directly to the extents of the object itself.
The object will remain the same number of pixels from the edges of the parent container.
For you java folks, this is similar to the Center placement of a BorderLayout.
Tim 'Zear' Hammock
--------------------------
horizSizing and vertSizing
==========================
In general, these settings define how an object will be resized or repositioned when the object's parent container is resized. As a general rule, you can assume that the root container (the Canvas) will have a starting size of 640x480, and it (and all of the objects it contains) will be resized/repositioned from this state.
As any container is resized, all of its child objects are resized and/or repositioned according to the horizSizing and vertSizing properties of each object. If any of those objects are container with children of their own, they too will be resized and/or repositioned in the same fashion. This behavior cascades down the parent-child tree of objects. This provides a basic layout capability.
The basic settings for these two properties are: center, relative, left/top, right/bottom, and width/height. Each is explained below.
1) Center:
This setting will center the object in its container. Only the object's position is altered - the object's extent remains the same.
2) Relative:
When this setting is applied, the object in question will be resized and repositioned to maintain the same size and position relative to the parent container. For example, if the parent doubles in size, so will this object; additionally the space between the object and the parent's borders will double.
The result is similar to what you would see if you were to take a screenshot of the original visual layout and resize the resulting image in a graphics editor.
3) Left/Top & Right/Bottom:
These settings only affect position. Extent is unaffected. Simply put, the change in size of the parent is applied to the distance between the object and the specified edge of the screen. This means that the object will maintain its distance from the opposite edge (this is counter-intuitive IMHO).
If you are familiar with Java layouts, you may recognize that these are like the _inverse_ of the similar settings (North, South, East, West) in a BorderLayout (this is probably why I have a hard time with these)
4) Width/Height:
These settings result in changes to the extents (size) of the object only. The difference in size of the containing object is applied directly to the extents of the object itself.
The object will remain the same number of pixels from the edges of the parent container.
For you java folks, this is similar to the Center placement of a BorderLayout.
About the author
#2
02/21/2006 (2:59 am)
I've been getting myself in a right mess with the gui editor until reading this. Great work!
#4
05/14/2007 (8:00 pm)
Thanks it avoid me digging too :D 
#5
08/09/2008 (5:25 am)
good catch
#6
09/13/2009 (6:40 pm)
well you know its good info , when it is helping people over 7 years later! 
#7
12/06/2011 (5:37 pm)
Almost 2012 and this post is still really useful -- If any GG folks read this, this should go into the docs somewhere 
#8
07/03/2013 (6:55 am)
Time's marching on. It's 2013 and this was exactly what I was looking for. 
Torque Owner Ryan "check" Olson