Help with GUI
by skipper · in Torque 3D Professional · 05/06/2012 (4:17 am) · 2 replies
I am trying to edit the options screen and I have been playing around with the various settings in the GUI editor with a moderate amount of success. I have managed to change the background colour to a semi transparent dark blue and text to white in pretty much all the buttons and so forth.
I would like to have a background container that is not square, ie with rounded edges.
Now I could just use a single png bitmap but it would be a large file size. Now I noticed that the images for the buttons I have been editing have different sections for the different button states but also are partitioned into different sections for the different bits of a button. For example there's corners, tops and bottom sections of buttons, the advantage is the whole thing becomes scalable.
So this is my task to make a scalable container that can be reused in other GUI's, and with rounded corners. Ive made a bitmap I think will do the trick.
Where do I go from here?
I would like to have a background container that is not square, ie with rounded edges.
Now I could just use a single png bitmap but it would be a large file size. Now I noticed that the images for the buttons I have been editing have different sections for the different button states but also are partitioned into different sections for the different bits of a button. For example there's corners, tops and bottom sections of buttons, the advantage is the whole thing becomes scalable.
So this is my task to make a scalable container that can be reused in other GUI's, and with rounded corners. Ive made a bitmap I think will do the trick.
Where do I go from here?
About the author
Artist Developer
#2
In general:
Top Left -- Top Right -- Top Center (tiles)
Center Left (tiles) -- Center Right (tiles
Bottom Left -- Bottom Center (tiles) -- Bottom Right
The separator color that separates the various elements of the array can be any color so long as it is the color found as the first pixel of the image and is not used as a color within the image, as the engine code will read this color as a signal to define a new array area in the image.
I believe that all (most at least) of the GUI examples in stock Torque 3D make use of arrays. But here are a few other examples of borders for windows and container frames.
05/06/2012 (11:03 am)
I believe that all of the GUI controls that may use a bitmap can break them into arrays of pieces. Buttons are just that simple, as seen in your example, but you need to make sure the separator color appears as the first pixel (and row?) of the image. Windows or forms for containers use a slightly different array setup such that (in the case of windows) they may include various min/max/exit buttons (with normal/hover/pressed states), a row for the top of the border when fullsize, and a row for the top of the border when minimized -- of course a regular frame doesn't include buttons or the different images for the position of the top row. The arrays are similar but in a slightly different order than for that cheatsheet for buttons. In general:
Top Left -- Top Right -- Top Center (tiles)
Center Left (tiles) -- Center Right (tiles
Bottom Left -- Bottom Center (tiles) -- Bottom Right
The separator color that separates the various elements of the array can be any color so long as it is the color found as the first pixel of the image and is not used as a color within the image, as the engine code will read this color as a signal to define a new array area in the image.
I believe that all (most at least) of the GUI examples in stock Torque 3D make use of arrays. But here are a few other examples of borders for windows and container frames.
Ahsan Muzaheed
Default Studio Name
here is the answer from TRON,
http://dottools.net/downloads/imgs/t3d/TorqueButtonSkin.png