GuiBitmapButtonControl Problem

#1 To fix this you would do the following to your buttons

new GuiControl(InspectDlg) {
	profile = "GuiDialogProfile";
	horizSizing = "right";------------------change this to "Relative"
	vertSizing = "bottom";------------------change this to "Relative"
	position = "0 0";
	extent = "640 480";
	minExtent = "8 8";
	visible = "True";
	setFirstResponder = "False";
	modal = "False";
	helpTag = "0";

#2 Unfortunately that doesn't work, infact, only makes it worse. Doing that makes it resize it to weird dimensions in any resolution. Even right after I change it to the right dimensions in the gui editor. here is my code.

//--- OBJECT WRITE BEGIN ---
new GuiChunkedBitmapCtrl(MainMenuGui) {
   canSaveDynamicFields = "0";
   Profile = "GuiContentProfile";
   HorizSizing = "width";
   VertSizing = "height";
   position = "0 0";
   Extent = "640 480";
   MinExtent = "8 8";
   canSave = "1";
   Visible = "1";
   hovertime = "1000";
   bitmap = "./entropytitle.jpg";
   useVariable = "0";
   tile = "0";

   new GuiBitmapButtonCtrl(playbtn) {
      canSaveDynamicFields = "0";
      Profile = "GuiDefaultProfile";
      HorizSizing = "relative";
      VertSizing = "relative";
      position = "292 230";
      Extent = "82 24";
      MinExtent = "82 24";
      canSave = "1";
      Visible = "1";
      Command = "loadMyMission();";
      hovertime = "1000";
      groupNum = "-1";
      buttonType = "PushButton";
      bitmap = "./buttons/play";
   };
   new GuiBitmapButtonCtrl(optnbtn) {
      canSaveDynamicFields = "0";
      Profile = "GuiDefaultProfile";
      HorizSizing = "relative";
      VertSizing = "relative";
      position = "275 260";
      Extent = "137 22";
      MinExtent = "137 22";
      canSave = "1";
      Visible = "1";
      Command = "Canvas.pushDialog(optionsDlg);";
      hovertime = "1000";
      groupNum = "-1";
      buttonType = "PushButton";
      bitmap = "./buttons/options";
   };
   new GuiBitmapButtonCtrl(quitbtn) {
      canSaveDynamicFields = "0";
      Profile = "GuiDefaultProfile";
      HorizSizing = "relative";
      VertSizing = "relative";
      position = "295 285";
      Extent = "75 23";
      MinExtent = "75 23";
      canSave = "1";
      Visible = "1";
      Command = "quit();";
      hovertime = "1000";
      groupNum = "-1";
      buttonType = "PushButton";
      bitmap = "./buttons/quit";
   };
};
//--- OBJECT WRITE END ---

Should i then be using a different button for each resolution? Or should I just only use one resolution? This is getting quite annoying. Thanks.

#3 Well thats strange.. Im not a gui guru myself and that fixed my resizing problems maybe if you post a screenshot of "how it should look" and "whats screwed up" and we might be able to fix it

#4 Edit: I should note that this goes from 1024x768 to 800x600 to 640x480.


You can see how the buttons begin to get taller and overlap eachother. This is with how I originally had it, with horizontal center and vertical relative. It appears that relative does what it is supposed to, resizes it to be relative to the amount of space being taken up in the height of the different resolutions. However what i am wanting, and i may have been a little muddy in my discriptions earlier, is to have the buttons stay the exact same size, the original file size in all resolutions, while staying in the relative position. For instance one is 137 x 22. I want it to remain that size and in the same relative position when i resize. Perhaps I am going about this in the wrong way, but I don't know any other way to go about it. Thanks.

#5 Ahhh ok I see what you are trying to do... One more question then we may find a solution:) when you edit your gui do you have the resolution @ 1024x768 or 640x480? the reason i ask is that when you design and create your gui in the lowest resolution it works in all other resolutions but not vica versa.

But with this i cannot give you a direct answer because i do not know how to do this myself but this document should help you find a solution

#6 I usually do it in the lowest, while I have the engine running full screen in the highest, so that I can see the whole thing at once. I just am ending up with if I dont' have it on relative the buttons either move way down the screen or way up the screen, if i use top or bottom for verticle, and center just wont' work since it piles them all in the center of the screen. Thanks for help so far.

#7

Quote:
Calculate all sizes and positions relative to the
component's size and position. Do not store
positions of sub components in fields - this will
force you to write custom resizing code for this
component.

Only thing in that document that applied to my problem, and honestly meant nothing to me, or atleast from what I know it meant nothing to me. I guess I can make it only in 1024x768 but that won't help with a computer with widescreen, assuming torque can even support widescreen formats.

#8 Out of curiosity try putting your minextent to '8 2' which is the default i think. You will probably have to reset your positions. thats what i did, and i am not experiencing your issue. Horizontal scaling in my gui is still off a bit but for prototyping purposes it works ok. main positions are held nicely

#9 That did not help either. It seems i have a choice without editing any source code, either have the buttons stay in place through a resolution change or have them stay the same size, but never both. I've edited nothing in my file except adding the buttons and changing the background file. I've been trying to resolve this issue on and off since 2004 even with a three year absence and a whole new game make-up still no gain here. And this is only the main menu, no clue what kinds of problems i'm going to find from here in.

#10 Wrap all your button controls in one "container" control - a regular guiControl with a borderless profile works fine. Then you can have your buttons set to vert-center hor-bottom. This should keep them all in the same relative position to each other that you set them up as and prevent them from being resized at all.

Then set the wrapper control to be center/center - this will keep your buttons always in the center of the screen.

#11 Seems I've bitten off more than I can chew, I have no idea what you are talking about James, nor would I ask you to take the time to explain or show me what you mean. It seems every question I have with this engine leads me to another question then to another. I won't stop you from showing me how, but know i'm not asking, don't wanna take too much of anyone's time. Thanks.

#12 Sorry, I suck at taking screen shots, but here goes...

Notice the "ButtonsGroup" control I have selected now (its almost cut off on the image though ). Its resizing is center/center. It is a regular guiControl. All button-controls are children of the ButtonsGroup





I have one button selected. Its resizing is right/bottom. But since its parent control ( the ButtonsGroup ) will never change size ( because it is center/center ) the resizing on these buttons isn't important - they will always stay the same size, in the same relative position to one another, and in the center of the screen.





Here I changed the resolution - still working.

#13 Ok those screenshots are just too horrible looking. Heres the whole gui - now you can look at it in TGB yourself '-)

//--- OBJECT WRITE BEGIN ---
%guiContent = new GuiControl(menuScreen) {
   canSaveDynamicFields = "0";
   isContainer = "1";
   Profile = "GuiDefaultProfile";
   HorizSizing = "right";
   VertSizing = "bottom";
   Position = "0 0";
   Extent = "800 600";
   MinExtent = "8 2";
   canSave = "1";
   Visible = "1";
   hovertime = "1000";

   new GuiBitmapCtrl(BackgroundControl) {
      canSaveDynamicFields = "0";
      isContainer = "0";
      Profile = "GuiDefaultProfile";
      HorizSizing = "relative";
      VertSizing = "relative";
      Position = "0 0";
      Extent = "800 600";
      MinExtent = "8 2";
      canSave = "1";
      Visible = "1";
      hovertime = "1000";
      bitmap = "resources/puzzleArt/backgrounds/background1.jpg";
      wrap = "0";
   };
   new GuiControl(ButtonsGroup) {
      canSaveDynamicFields = "0";
      isContainer = "1";
      Profile = "BorderLessControlProfile";
      HorizSizing = "center";
      VertSizing = "center";
      Position = "200 111";
      Extent = "400 378";
      MinExtent = "400 340";
      canSave = "1";
      Visible = "1";
      hovertime = "1000";

      new GuiBitmapButtonTextCtrl(SinglePlayerButton) {
         canSaveDynamicFields = "0";
         isContainer = "0";
         Profile = "GuiButtonProfile";
         HorizSizing = "center";
         VertSizing = "bottom";
         Position = "122 24";
         Extent = "153 36";
         MinExtent = "8 2";
         canSave = "1";
         Visible = "1";
         Command = "startGame();";
         hovertime = "1000";
         text = "Single Player";
         groupNum = "-1";
         buttonType = "PushButton";
         useMouseEvents = "1";
         bitmap = "~/gui/button02";
      };
      new GuiBitmapButtonTextCtrl(OptionsButton) {
         canSaveDynamicFields = "0";
         isContainer = "0";
         Profile = "GuiButtonProfile";
         HorizSizing = "center";
         VertSizing = "bottom";
         Position = "122 134";
         Extent = "154 35";
         MinExtent = "8 2";
         canSave = "1";
         Visible = "1";
         Command = "Canvas.PushDialog(ArcadeOptionsDlg);";
         hovertime = "1000";
         text = "Options";
         groupNum = "-1";
         buttonType = "PushButton";
         useMouseEvents = "1";
         bitmap = "~/gui/button02";
      };
      new GuiBitmapButtonTextCtrl(ScoreButton) {
         canSaveDynamicFields = "0";
         isContainer = "0";
         Profile = "GuiButtonProfile";
         HorizSizing = "center";
         VertSizing = "bottom";
         Position = "122 188";
         Extent = "153 35";
         MinExtent = "8 2";
         canSave = "1";
         Visible = "1";
         Command = "Canvas.pushDialog(scoreScreen);";
         hovertime = "1000";
         text = "Scores";
         groupNum = "-1";
         buttonType = "PushButton";
         useMouseEvents = "1";
         bitmap = "~/gui/button02";
      };
      new GuiBitmapButtonTextCtrl(ProfileButton) {
         canSaveDynamicFields = "0";
         isContainer = "0";
         Profile = "GuiButtonProfile";
         HorizSizing = "center";
         VertSizing = "bottom";
         Position = "122 242";
         Extent = "153 35";
         MinExtent = "8 2";
         canSave = "1";
         Visible = "1";
         Command = "Canvas.pushDialog(SelectProfileDlg);";
         hovertime = "1000";
         text = "Switch Profile";
         groupNum = "-1";
         buttonType = "PushButton";
         useMouseEvents = "1";
         bitmap = "~/gui/button02";
      };
      new GuiBitmapButtonTextCtrl(QuitButton) {
         canSaveDynamicFields = "0";
         isContainer = "0";
         Profile = "GuiButtonProfile";
         HorizSizing = "center";
         VertSizing = "bottom";
         Position = "122 296";
         Extent = "153 35";
         MinExtent = "8 2";
         canSave = "1";
         Visible = "1";
         Command = "quit();";
         Accelerator = "escape";
         tooltipprofile = "GuiDefaultProfile";
         hovertime = "1000";
         text = "Quit";
         groupNum = "-1";
         buttonType = "PushButton";
         useMouseEvents = "1";
         bitmap = "~/gui/button02";
      };
      new GuiBitmapButtonTextCtrl(MultiplayerButton) {
         canSaveDynamicFields = "0";
         isContainer = "0";
         Profile = "GuiButtonProfile";
         HorizSizing = "center";
         VertSizing = "bottom";
         Position = "122 79";
         Extent = "153 36";
         MinExtent = "8 2";
         canSave = "1";
         Visible = "1";
         Command = "Canvas.setContent(multiplayerMenuScreen);";
         hovertime = "1000";
         text = "Multiplayer";
         groupNum = "-1";
         buttonType = "PushButton";
         useMouseEvents = "1";
         bitmap = "./button02";
      };
   };
};
//--- OBJECT WRITE END ---

#14 Thanks james, I'm going to give this a try. Looks like a solid idea, and thank you for taking the time to post. My buttons are slightly "off center" but I'm thinking I can put them far enough down inside the container that they will always be below the title since it is set to center/center as well. Thanks a bunch, will let you know what happens.

#15 Absolute genius James. My first torque problem actually solved, perhaps there is hope, lol. Quick question with this method though and then I will leave you alone. How do I actually get the buttons to "center" within the container? With my original method I could apply horizontal center and change resolution on the dropdown and it would center it perfectly in the screen. Centering option within the container doesn't appear to do this. For now I'm just finding the center of the ruler at the top and trying to center it with the green marks portraying on the ruler, which is fine, but just time consuming and not perfect. But thank you again so much, so very very much.

#16 You should mess around with the options under the "layout" menu item - very useful stuff.

I think what you want in your case is to select all your controls that you want "lined up" with each other, and to do "center horizontally".

Alternatively - directly modifying the position and extents field for your controls is very handy sometimes.

#17 Oh, actually that will only line your child controls up with each other - I see you mean centered in the "wrapper" control. Actually I didn't realize the changing resolution trick doesn't work when your controls are layed out like this...