Health GUI
by Michael S · in Torque 3D Professional · 04/08/2012 (11:33 am) · 11 replies
Hello, I made my health similar to that of gears of war. I would like to know how I can get the images to fit the screen fully on different sized screens? Thanks in advance.
Alright, to help you help me, I will show you what I need to go full screen, its sort of just the basic idea, as the image is not that detailed, just the basic.
That needs to fit full screen, the images are all the same size, and go based on the amount of health you have. The script is set, it all works, it just does not fit screens properly.
Alright, to help you help me, I will show you what I need to go full screen, its sort of just the basic idea, as the image is not that detailed, just the basic.
That needs to fit full screen, the images are all the same size, and go based on the amount of health you have. The script is set, it all works, it just does not fit screens properly.About the author
#2
in the sizing set to width and height.
Note that this will probably block any mouse interaction the playGui depends on, but try it and see.
John
04/09/2012 (9:30 am)
In the GUI editor try the GuiBitmapCtrl or maybe the GuiBitmapBorderCtrlin the sizing set to width and height.
Note that this will probably block any mouse interaction the playGui depends on, but try it and see.
John
#3
04/09/2012 (5:59 pm)
Did not work, thanks for the reply though.
#4
04/09/2012 (6:04 pm)
GuiBitmapCtrl should have worked...just expand the whole thing across the screen and use other properties besides width/height and set the visible property to 0. When you want to use it, just use your control.setVisible(true); Viola, it should appear.
#5
04/09/2012 (6:36 pm)
I got the script set up already, with that command. However, it does not fit the entire screen. I need to make it work for all screen sizes as well, and thats what I need help with.
#6
04/09/2012 (7:59 pm)
Read through the GUI Editor section in the documentation.
#7
04/10/2012 (7:43 am)
Couldn't find anything that tells me how to get full screen images on different size screens.
#8
Try setting position to 0,0 and fiddle with the horizSizing and vertSizing attributes of the bitmap control. You could also manually set the width and height in the respective gui's onWake() callback.
The trick with the documentation is to realize that you can usually find what you're needing if you follow the inheritance chain - if you don't see anything useful in the docs for the control you're using, look at its parent, and keep moving up the chain until you find the function you're looking for. There is usually an inheritance diagram at the top of the page for the object you're dealing with, or at least a link. For instance - all GUI controls derive from GuiControl (surprise!). This object contains the "baseline" GUI control functionality that all controls should need, and each specialized control then adds functionality to support its own particular needs.
04/10/2012 (8:43 am)
The GuiControl Documentation covers all base GUI object functionality - including layout and resizing options....Try setting position to 0,0 and fiddle with the horizSizing and vertSizing attributes of the bitmap control. You could also manually set the width and height in the respective gui's onWake() callback.
The trick with the documentation is to realize that you can usually find what you're needing if you follow the inheritance chain - if you don't see anything useful in the docs for the control you're using, look at its parent, and keep moving up the chain until you find the function you're looking for. There is usually an inheritance diagram at the top of the page for the object you're dealing with, or at least a link. For instance - all GUI controls derive from GuiControl (surprise!). This object contains the "baseline" GUI control functionality that all controls should need, and each specialized control then adds functionality to support its own particular needs.
#9
Select the PlayGui GUI canvas by clicking on the dropdown selection box located near the top left side of the Torque 3D game window and just to the right of the Play button within the toolbar, and then selecting PlayGui - ???. ??? being a randomly chosen objectID of that canvas that is a numerical value.
Then on the top right side of the Torque 3D window select the PlayGui item in the treeview, of which is the root canvas node of the entire GUI canvas. Once selected you will see in the property editor beneith the treeview that the field names and values are updated to reflect that you have selected a GameTSCtrl object named PlayGui.
At the top of the treeview there are several tabs and you will want to click on Library so that a list of GUI control objects are available. The controls are list as categorized, such as 3D, Buttons, Containers, etc.. Select Images category to list Image based controls. Note that there is a bug in T3D where sometimes you will have to click on the category twice to close and then open it again in order to see all controls that are available in that category.
For this example we'll just use GuiBitmapCtrl image control, so click on it once and then go back to the canvas treeview and properties editor by clicking on GUI tab on the top of the library of GUI controls list. You will see now that there is a GuiBitmap control, of which is a child control under PlayGui control, and that it is currently selected. Within the layout view the control is seen as a black outline with resize box controls around the edges currently positioned at the top left side of the layout view.
In the properties editor set the extent field to match the layout canvas size, normally the default canvas size is "1024x768 (XGA, 4:3)" which is seen and change able by the dropdown selection box on the right side of the same dropdown selection box you used to choose PlayGui for editing. So, if your current layout canvas size is 1024x768 then set the extent value to 1024 768.
Now the GuiBitmap control should be taking up the entire canvas. Next, change the horizSizing field to width and vertSizing field to height.
Now the GuiBitmap control will always take up the entire canvas whenever it is resized. To test this simply change the layout canvas size by using the dropdown selection box discussed in the paragraph above, which again is to the right side of the GUI canvas dropdown selection box.
The layout canvas size dropdown selection box is displayed in the format of "DispXxDispY (Name, Ratio)"
DispX is the horizontal size of the display resolution.
DispY is the vertical size of the display resolution.
Name is the common name given to the display resolution.
Ratio is the aspect ratio of the display resolution.
Anyway, now you can save your changes to the PlayGui by going to the File menu and selecting Save, or use Ctrl+S hotkey.
And that is how you setup a GUI control to take over the entire GUI canvas no matter what resolution the game window is set for.
Note that in the canvas treeview controls that are at the top or listed first in the treeview are the bottom most position. Meaning, they draw first, but they visually apper to be at the bottom of the canvas as the controls listed last or at the bottom of the parent will be drawn last and visually appear on top of everything else. So, you can drag and drop the control to a Z position depending on where they're listed in the treeview. Note that yet again there is a bug where you have to select a control after dragging and dropping it into another position in order for the treeview control to redrawn and reflect the real layout of the canvas within the treeview.
04/10/2012 (9:22 am)
Run your Torque 3D game project and then press F10 to show the GUI editor once the main menu is displayed.Select the PlayGui GUI canvas by clicking on the dropdown selection box located near the top left side of the Torque 3D game window and just to the right of the Play button within the toolbar, and then selecting PlayGui - ???. ??? being a randomly chosen objectID of that canvas that is a numerical value.
Then on the top right side of the Torque 3D window select the PlayGui item in the treeview, of which is the root canvas node of the entire GUI canvas. Once selected you will see in the property editor beneith the treeview that the field names and values are updated to reflect that you have selected a GameTSCtrl object named PlayGui.
At the top of the treeview there are several tabs and you will want to click on Library so that a list of GUI control objects are available. The controls are list as categorized, such as 3D, Buttons, Containers, etc.. Select Images category to list Image based controls. Note that there is a bug in T3D where sometimes you will have to click on the category twice to close and then open it again in order to see all controls that are available in that category.
For this example we'll just use GuiBitmapCtrl image control, so click on it once and then go back to the canvas treeview and properties editor by clicking on GUI tab on the top of the library of GUI controls list. You will see now that there is a GuiBitmap control, of which is a child control under PlayGui control, and that it is currently selected. Within the layout view the control is seen as a black outline with resize box controls around the edges currently positioned at the top left side of the layout view.
In the properties editor set the extent field to match the layout canvas size, normally the default canvas size is "1024x768 (XGA, 4:3)" which is seen and change able by the dropdown selection box on the right side of the same dropdown selection box you used to choose PlayGui for editing. So, if your current layout canvas size is 1024x768 then set the extent value to 1024 768.
Now the GuiBitmap control should be taking up the entire canvas. Next, change the horizSizing field to width and vertSizing field to height.
Now the GuiBitmap control will always take up the entire canvas whenever it is resized. To test this simply change the layout canvas size by using the dropdown selection box discussed in the paragraph above, which again is to the right side of the GUI canvas dropdown selection box.
The layout canvas size dropdown selection box is displayed in the format of "DispXxDispY (Name, Ratio)"
DispX is the horizontal size of the display resolution.
DispY is the vertical size of the display resolution.
Name is the common name given to the display resolution.
Ratio is the aspect ratio of the display resolution.
Anyway, now you can save your changes to the PlayGui by going to the File menu and selecting Save, or use Ctrl+S hotkey.
And that is how you setup a GUI control to take over the entire GUI canvas no matter what resolution the game window is set for.
Note that in the canvas treeview controls that are at the top or listed first in the treeview are the bottom most position. Meaning, they draw first, but they visually apper to be at the bottom of the canvas as the controls listed last or at the bottom of the parent will be drawn last and visually appear on top of everything else. So, you can drag and drop the control to a Z position depending on where they're listed in the treeview. Note that yet again there is a bug where you have to select a control after dragging and dropping it into another position in order for the treeview control to redrawn and reflect the real layout of the canvas within the treeview.
#10
04/10/2012 (12:23 pm)
Thank you Nathan, I think I can work it out from here. Thanks everyone :)
#11
Set the position to 0, 0. Scale your image to the entire screen and then save it. That's how I do my elements with that situation now.
04/10/2012 (2:55 pm)
You may also want to give horizSizing = relative; vertSizing = relative; a go as well. Set the position to 0, 0. Scale your image to the entire screen and then save it. That's how I do my elements with that situation now.
Torque Owner Michael S