Click thru GUI and custom windows
by Richard Preziosi · in Torque Game Engine · 02/20/2007 (8:56 pm) · 12 replies
I know there might be some posts about this already, but I honestly could not find exactly what I wanted or there was too much other stuff thrown in.
What I am trying to do is create custom bitmapped? windows, using png images for the background of the window as well as other png files for the buttons within the window.
I have noticed that if i make a button bring up a window that I have to exit that window to click on anything else on the screen. I want to be able to click a button to bring up a dialog window and then click that same original button to exit that window. If i need to post pictures of what I am talking about for further clarification i can.
I've been using canvas.setContent for my command on the buttons, if this is the wrong function and there is a prewritten function, someone please let me know. If this is going to take more work and there is a resource that would be great as well. Thanks in advance.
What I am trying to do is create custom bitmapped? windows, using png images for the background of the window as well as other png files for the buttons within the window.
I have noticed that if i make a button bring up a window that I have to exit that window to click on anything else on the screen. I want to be able to click a button to bring up a dialog window and then click that same original button to exit that window. If i need to post pictures of what I am talking about for further clarification i can.
I've been using canvas.setContent for my command on the buttons, if this is the wrong function and there is a prewritten function, someone please let me know. If this is going to take more work and there is a resource that would be great as well. Thanks in advance.
#2
02/22/2007 (4:44 pm)
Nice tip!
#3
...but then there was this one time I had a mouse problem, just kidding, I need to get a compiler setup so that I can try to fix that. thanks again man.
02/22/2007 (8:15 pm)
Michael, you are my best friend, I think you have answered every question I have asked, I could be wrong, so sorry to those if I am, but thank you a lot man....but then there was this one time I had a mouse problem, just kidding, I need to get a compiler setup so that I can try to fix that. thanks again man.
#4
Any help, thanks
02/22/2007 (9:44 pm)
Ok Michael, now how about making the escape key also bring this up. I've gotten this far in my default.bind.csfunction showPopupDialog(%val){
if(%val)
{
if(PopUpDialog.isVisible())
PopUpDialog.setVisible(false);
else
PopUpDialog.setVisible(true);
}
moveMap.bind( keyboard, "escape", "", showPopupDialog);Any help, thanks
#5
moveMap (an ActionMap) is pushed once a player joins or launches a server. Prior to that, moveMap is not pushed on and useable.
While I'm sure there might be a better way, the simplest way to handle this to create a new ActionMap for handling your GUI inputs, example:
Create a new script file called GuiMap.cs in example\starter.fps\client\scripts:
In example\starter.fps\client\init.cs, in the function initClient():
In loadStartup, loadMainMenu, or any other function called before displaying first GUI
[EDIT]
This is all just sample code, first thing that came to mind. Remember that you can always add your own flare or code ideas to the mix, and that my suggestions are no way the end all solutions to problems.
i r genius != i r perfect
[/EDIT]
02/23/2007 (5:45 am)
Key press recognition in TGE is handled a little...funny...when it comes to separating GUI stuff from game play stuff.moveMap (an ActionMap) is pushed once a player joins or launches a server. Prior to that, moveMap is not pushed on and useable.
While I'm sure there might be a better way, the simplest way to handle this to create a new ActionMap for handling your GUI inputs, example:
Create a new script file called GuiMap.cs in example\starter.fps\client\scripts:
if ( isObject( guiMap) )
guiMap.delete();
new ActionMap(guiMap);
function showPopupDialog(%val)
{
if(%val)
{
if(PopUpDialog.isVisible())
PopUpDialog.setVisible(false);
else
PopUpDialog.setVisible(true);
}
}
guiMap.bind(keyboard, "escape", showPopupDialog);In example\starter.fps\client\init.cs, in the function initClient():
exec("./scripts/GuiMap.cs);In loadStartup, loadMainMenu, or any other function called before displaying first GUI
guiMap.push(); [b]// Call this function to have your dedicated GUI ActionMap activated[/b]
[EDIT]
This is all just sample code, first thing that came to mind. Remember that you can always add your own flare or code ideas to the mix, and that my suggestions are no way the end all solutions to problems.
i r genius != i r perfect
[/EDIT]
#6
but another approach to take is to make the pop-up gui "nonmodal".
"modal" in TGE means that it swallows mouse clicks,
"non-modal" means it the mouse clicks pass straight thru to whatever's underneath.
your .gui probably starts with a generic GuiControl covering the whole screen, and the visible pop-up window itself is a child of this control. since the parent control is probably modal, it's swallowing all those mouse clicks, even when they're outside the visible window. To make the parent nonmodal, make a new profile like the following and use that instead of GuiDefaultProfile.
02/23/2007 (8:07 am)
Quote:looks like you've got something working,
I have noticed that if i make a button bring up a window that I have to exit that window to click on anything else on the screen.
but another approach to take is to make the pop-up gui "nonmodal".
"modal" in TGE means that it swallows mouse clicks,
"non-modal" means it the mouse clicks pass straight thru to whatever's underneath.
your .gui probably starts with a generic GuiControl covering the whole screen, and the visible pop-up window itself is a child of this control. since the parent control is probably modal, it's swallowing all those mouse clicks, even when they're outside the visible window. To make the parent nonmodal, make a new profile like the following and use that instead of GuiDefaultProfile.
new GuiControlProfile(GuiNonModalProfile : GuiDefaultProfile)
{
modal = false;
};
#7
02/23/2007 (8:07 am)
Again, thank you.
#8
02/23/2007 (9:24 am)
I can't seem to get it to work Michael, I'm having no errors in my console log, but I can't get escape to show this popup, and i have deleted the default onescape() that torque has, I'm clueless thus far.
#9
I just tested this in my scripts and it worked fine
02/23/2007 (10:32 am)
Hmm, not sure what might be going on....try posting the code you have.I just tested this in my scripts and it worked fine
#10
This is in my main.cs in the function initclient
This is also in my main.cs in the initclient function
this is my guimap.cs
02/23/2007 (4:15 pm)
Here is what I have, i used the tutorial.base so i dont' have the init.cs files, so i have it in my main.cs, i have tried it under a few different functions.This is in my main.cs in the function initclient
guiMap.push();
This is also in my main.cs in the initclient function
// Default gui key bindings
exec(".client/GuiMap.cs");this is my guimap.cs
if ( isObject( guiMap) )
guiMap.delete();
new ActionMap(guiMap);
function showPopupDialog(%val)
{
if(%val)
{
if(PopUpDialog.isVisible())
PopUpDialog.setVisible(false);
else
PopUpDialog.setVisible(true);
}
}
guiMap.bind(keyboard, m, showPopupDialog());
#11
I would put break points on the following:
Using Torsion's debugging (Breakpoints, F10, F11) is a life saver, and I highly recommend you use it.
Also search your console.log for the following: error and/or syntax. If anything pops up, let me know.
If you get completely stuck, feel free to send me the GUIs and scripts to the email listed in my profile.
I normally don't do this, but since I get bored on the weekends, I thought I'd offer.
02/23/2007 (5:10 pm)
Do you have Torsion? The reason I ask is you can use Torsion to put breakpoints in your scripts and debug your code.I would put break points on the following:
*guiMap.push();
*exec("./client/GuiMap.cs"); [b] Make sure to double check the paths to your scripts and GUIs[/b]
*if(%val)
*if(PopUpDialog.isVisible())Using Torsion's debugging (Breakpoints, F10, F11) is a life saver, and I highly recommend you use it.
Also search your console.log for the following: error and/or syntax. If anything pops up, let me know.
If you get completely stuck, feel free to send me the GUIs and scripts to the email listed in my profile.
I normally don't do this, but since I get bored on the weekends, I thought I'd offer.
#12
02/23/2007 (6:35 pm)
I sent an e-mail, but I forgot to post that I sent one, so doing that now. I appreciate the help immensely, I'm honestly confused as I can get. 
Employee Michael Perry
ZombieShortbus
Instead of using setContent to change to a separate GUI (with its own .gui/.cs file), why not merge the GUIs together and call setVisible on the parent group.... Here's an example:
Instead of this scenario:
// MainDialog.gui[/b] new GuiControl(MainDialog) { canSaveDynamicFields = "0"; Profile = "CenterPrintProfile"; HorizSizing = "relative"; VertSizing = "relative"; position = "0 100"; Extent = "800 600"; MinExtent = "8 8"; canSave = "1"; Visible = "0"; hoverTime = "1000"; new GuiButtonCtrl(showPopupButton) { profile = "GuiButtonProfile"; horizSizing = "right"; vertSizing = "bottom"; position = "305 270"; extent = "60 23"; minExtent = "8 8"; visible = "1"; [b] command = "Canvas.setContent(popupDialogGui);";[/b] helpTag = "0"; text = "OK"; groupNum = "-1"; buttonType = "PushButton"; }; };[b]*here's the second gui, the popup you are talking about
// PopUpDialog.gui[/b] new GuiControl(PopUpDialog) { canSaveDynamicFields = "0"; Profile = "CenterPrintProfile"; HorizSizing = "relative"; VertSizing = "relative"; position = "0 100"; Extent = "800 600"; MinExtent = "8 8"; canSave = "1"; Visible = "0"; hoverTime = "1000"; new GuiPopUpMenuCtrl(SubGuiElement) { profile = "GuiPopUpMenuProfile"; horizSizing = "right"; vertSizing = "bottom"; position = "134 86"; extent = "130 23"; minExtent = "8 2"; visible = "1"; helpTag = "0"; maxLength = "255"; maxPopupHeight = "200"; }; };[b]Do This Instead:
new GuiControl(MainDialog) { canSaveDynamicFields = "0"; Profile = "CenterPrintProfile"; HorizSizing = "relative"; VertSizing = "relative"; position = "0 100"; Extent = "800 600"; MinExtent = "8 8"; canSave = "1"; Visible = "0"; hoverTime = "1000"; new GuiButtonCtrl(showPopupButton) { profile = "GuiButtonProfile"; horizSizing = "right"; vertSizing = "bottom"; position = "305 270"; extent = "60 23"; minExtent = "8 8"; visible = "1"; [b] command = "showPopupDialog();";[/b] helpTag = "0"; text = "OK"; groupNum = "-1"; buttonType = "PushButton"; }; new GuiControl(PopUpDialog) { canSaveDynamicFields = "0"; Profile = "CenterPrintProfile"; HorizSizing = "relative"; VertSizing = "relative"; position = "0 100"; Extent = "800 600"; MinExtent = "8 8"; canSave = "1"; [b]Visible = "0"; // NOTE IT IS INVISIBLE AT FIRST[/b] hoverTime = "1000"; new GuiPopUpMenuCtrl(SubGuiElement) { profile = "GuiPopUpMenuProfile"; horizSizing = "right"; vertSizing = "bottom"; position = "134 86"; extent = "130 23"; minExtent = "8 2"; Visible = "1"; helpTag = "0"; maxLength = "255"; maxPopupHeight = "200"; }; }; }; function showPopupDialog() { if(PopUpDialog.isVisible()) PopUpDialog.setVisible(false); else PopUpDialog.setVisible(true); }Now, your original GUI with the button is still clickable, and your Popup gui will still ....well.... pop up =)
Give that shot