Game Development Community

Adding Gui breaks previous gui's?

by Jacob Wagner · in Torque Game Builder · 07/31/2005 (12:50 pm) · 6 replies

I noticed that when I added a gui like in matt's physics demo, it breaks the gui that was already there.

For example, after adding one gui, I can no longer use the File menu to go to options.

After adding a second gui (which only contained text controls) I could no longer access a slider gui that I had there previously.

I noticed that if I run matt's physics demo from the code that he supplied, the file menu still works, so maybe I'm missing something.

Here is the code I am using:

exec("./BaseControls.gui");
exec("./StatusGui.gui");

mainScreenGui.add(BaseControls);
mainScreenGui.add(StatusGui);

new GuiControl(StatusGui) {
   profile = "GuiDefaultProfile";
   horizSizing = "right";
   vertSizing = "bottom";
   position = "0 0";
   extent = "640 480";
   minExtent = "8 2";
   visible = "1";

   new GuiTextCtrl(moneyField) {
      profile = "GuiBaseTextProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "14 450";
      extent = "32 18";
      minExtent = "8 2";
      visible = "1";
      text = "Money";
      maxLength = "255";
   };
   new GuiTextCtrl(goodsField) {
      profile = "GuiBaseTextProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "509 450";
      extent = "32 18";
      minExtent = "8 2";
      visible = "1";
      text = "Goods";
      maxLength = "255";
   };
};

if(!isObject(GuiBaseTextProfile)) new GuiControlProfile (GuiBaseTextProfile)
{
   fontColor = "255 0 0";
   fontColorLink = "255 96 96";
   fontColorLinkHL = "0 0 255";
   autoSizeWidth = true;
   autoSizeHeight = true;
};

new GuiControl(BaseControls) {
   profile = "GuiDefaultProfile";
   horizSizing = "right";
   vertSizing = "bottom";
   position = "0 0";
   extent = "640 480";
   minExtent = "8 2";
   visible = "1";

   new GuiSliderCtrl(guiGoodsSlider) {
      profile = "GuiBaseTextProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "6 75";
      extent = "167 64";
      minExtent = "8 2";
      visible = "1";
      range = "0.000000 1000.000000";
      ticks = "10";
      value = "0";
   };
   new GuiTextCtrl() {
      profile = "GuiBaseTextProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "48 60";
      extent = "59 18";
      minExtent = "8 2";
      visible = "1";
      text = "Load Goods";
      maxLength = "255";
   };
   new GuiTextCtrl(guiProspectGold) {
      profile = "GuiBaseTextProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "47 150";
      extent = "59 18";
      minExtent = "8 2";
      visible = "1";
      text = "Money" SPC $player1.money;
      maxLength = "255";
   };	
   
   new GuiButtonCtrl() {
      profile = "GuiButtonProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "8 110";
      extent = "140 30";
      minExtent = "8 2";
      visible = "1";
      text = "Transfer";
      groupNum = "-1";
      buttonType = "PushButton";
      command = "transferGold(guiGoodsSlider.value);";
   };
};

#1
07/31/2005 (12:52 pm)
Another thing that is annoying:

when using the code above, if I change the resolution to 800x600, the gui's don't change to fit the screen, i.e. the text code that is on the bottom of the screen in 640x480 is near the middle of the screen in 800x600. From what I've read on matt's tutorial, it shouldn't be that way.
#2
07/31/2005 (5:14 pm)
And one more thing to top the cake:

I have two guitxtcontrols that I continuously use setText on. Only the text doesn't get updated.

However, if I go into the gui editor, click on the text, and then click 'apply', it just works perfectly from then on.

I tried setActive(true) on the text controls, but no success.
#3
08/02/2005 (5:48 pm)
Check out this description of the horizsizing/versizing parameters to gain some insight on your changed-resolution problem. Also keep in mind that gui items are relative to their parent containers, so when a text item for example is included within the braces of a GuiControl, when the resolution changes, the GuiControl changes first, then its children items readjust based on the parent's new position/extent.

Also there are profile parameters (check defaultProfiles.cs in common/ui) that define whether text specifically is auto-scaled based on resolution changes.

All of these things mixed together make for a fairly confusing layout scheme (though it's flexible enough to do almost anything reasonable and still allow arbitrary resolutions which is cool). There are a few anomalies too; If you have text on your screen that repositions and resizes based on the resolution, you can switch back and forth between two resolutions and sometimes they won't be exactly where they should be. A workaround I've found is to re-load the .gui's after each resolution change, because then it re-scales it from the default parameter values and not relative 'this-instance' positions.

In regard to some UIs stopping working when you do .add(), it sounds like they may be getting added as distinct elements and not children of a parent element? You could try to save out the end result and look at the element hierarchy to see.
#4
09/05/2005 (7:34 pm)
What exactly do you mean by 'save out the end result' and look at the element hierarchy? Sorry I don't understand. If you could explain what I need to do that would be great.

Does anybody else know what my problem is here?

I can reproduce my problem from an empty project with just a guitextctrl being added: here's the code I'm using:

textGUI.gui
new GuiControl(TextGUI) {
   profile = "GuiDefaultProfile";
   horizSizing = "right";
   vertSizing = "bottom";
   position = "0 0";
   extent = "640 480";
   minExtent = "8 2";
   visible = "1";

   new GuiTextCtrl() {
      profile = "GuiTextProfile";
      horizSizing = "right";
      vertSizing = "bottom";
      position = "292 179";
      extent = "23 18";
      minExtent = "8 2";
      visible = "1";
      text = "Hello";
      maxLength = "255";
   };
};

and then I exec the gui and add this under the 'add your own code here ' :

canvas.pushDialog(TextGUI);


And the result is I see the "hello" but I can't access the file menu on top
#5
09/06/2005 (12:49 am)
Well, by pure luck I found what I needed to know. I was doing a search for the 'popDialog()' function and down in the comments I found the following:

Eustacia Green (Nov 01, 2004 at 08:20)
If you don't want the top gui layer stopping lower gui layers from recieving mouse clicks than you can also use the GuiModelessDialogProfile for the profile of the GuiControl.


new GuiControl(ThemeEditorGui) {
profile = "GuiModelessDialogProfile";
...



that works like a charm!
#6
09/06/2005 (10:19 am)
In case you want to add this behavior to other gui profiles, the profile item that is doing this is "modal = false;". If you add this to other profile descriptions you'll get the click-through behavior and still retain the other settings (like font type, size, alignment, etc.) GuiModelessDialogProfile has no other settings aside from "modal = false;" so you'll get the engine defaults in all other values which may mess up the way some of your controls look.

Also in the engine code there is some indication that "modal" is depricated. I have no idea why, I use it myself, but there may be some quirks to it that I've not discovered yet. :)