Picture Display Pop-Up with BindKey
by Infinitum3D · 01/05/2007 (2:02 pm) · 8 comments
12 21 2006 Torque 101: Map Toggle
There are two types of game developers; Those that draw a map then build a world to match it, and those that build their world THEN draw a map of it. I belong to the first group. I have a map for my world, a 800x600 worldMap.png in my client\ui folder. I'm trying to add a "Display Map" feature using the M key to toggle the map of the world on/off. This isn't going to draw a map or modify the map or anything like that. It will simply toggle a picture of the map on/off . We have to create a GUI and bind the M key to it.
I used Tim Newell's Inventory Popup Tutorial as a base. (Always give credit where due. Thanks Tim!)
Place your WorldMap.png file in the client/ui folder.
1. Back up everything! It took me two days to work out problems with this tutorial, so I may have made a mistake or left something out. BACK UP FIRST!!! You will modify (or create) six different files. I always backup my entire Starter.FPS folder as Copy Of Starter.FPS Just right click on Starter.FPS and click 'copy', then click 'paste'. Windows will paste a copy right there.
2. OK, here we go. Go into \client\scripts\default.bind.cs and at the bottom add this code:
//------------------------------------------------------------------------
//Show WorldMap.jpg using "m" to toggle
//-----------------------------------------------------------------------
$worldmapState = false;
function toggleWorldmap()
{
if ($worldmapState == false)
{
commandToServer('DisplayWorldmap');
$worldmapState = true;
}
else
{
Canvas.setContent( PlayGui );
$worldmapState = false;
}
}
moveMap.bindCmd(keyboard, "m", "toggleWorldMap();", "");
//------------------------------------------------------------------------
3a. Go into client\init.cs and add this to the SHELL GUI exec section:
//load the world map gui
exec("./ui/WorldMapGui.gui");
3b. and under //Client scripts
exec("./scripts/WorldMapGui.cs");
4. Delete config.cs and config.cs.dso in the client folder. Torque will recreate these for you.
Actually, delete out ALL the .dso files to force a recompile.
5. Create a WorldmapGui.cs file in the client/scripts folder:
//-----------------------------------------------------------------------------
// Torque Game Engine
// Copyright (C) GarageGames.com, Inc.
//-----------------------------------------------------------------------------
//-------------------------------------------------
// WorldMapGui.cs
//-------------------------------------------------
new ActionMap(WorldMap);
WorldMap.bindCmd(keyboard, "m", "toggleWorldMap();", "");
function WorldMapGui::onWake()
{
$enableDirectInput = "1";
activateDirectInput();
WorldMap.push();
}
function WorldMapGui::onSleep()
{
echo("onSleep");
// WorldMap.pop();
}
function clientCmdPopWorldMap()
{
Canvas.setContent( WorldMapGui );
}
//----------------------------------------------------------------------------
6. Go into server/scripts/commands.cs and add this to the bottom.
//-----------------------------------------------------------------------------
function serverCmdDisplayWorldMap(%client)
{
//Send the info to the client to display it
commandToClient(%client, 'PopWorldMap');
}
//----------------------------------------------------------------------------
7. In client/ui open defaultGameProfiles.cs
add this to the bottom:
//-----------------------------------------------------------------------------
// WorldMap profile
new GuiControlProfile ("WorldMapProfile")
{
opaque = false;
fillColor = "128 128 128";
fontColor = "0 0 0";
border = true;
borderColor = "0 0 0";
fontType = "Arial";
fontSize = 18;
};
//----------------------------------------------------------------------------
8. Create a new GUI called WorldMapGui, set the bitmap as our worldmap.png.
-Load a mission in Torque.
-Go into GUI editor (F10)
-Click File>New GUI
-Name it WorldMapGui
-Click New Control and select GuiBitmapCtrl
-In the lower tree-view, in the Misc section, click the ... next to bitmap, and change it to your WorldMap.png
-Name the control WorldMap
-Click Apply
-Click File> SaveGUI
Save it in the client/ui folder.
9. Test it out!
Start Torque.
Load a mission.
Once the mission load, press the m key and your world map should display. Press m again, and the map should toggle off.
I hope this works for you.
Tony
There are two types of game developers; Those that draw a map then build a world to match it, and those that build their world THEN draw a map of it. I belong to the first group. I have a map for my world, a 800x600 worldMap.png in my client\ui folder. I'm trying to add a "Display Map" feature using the M key to toggle the map of the world on/off. This isn't going to draw a map or modify the map or anything like that. It will simply toggle a picture of the map on/off . We have to create a GUI and bind the M key to it.
I used Tim Newell's Inventory Popup Tutorial as a base. (Always give credit where due. Thanks Tim!)
Place your WorldMap.png file in the client/ui folder.
1. Back up everything! It took me two days to work out problems with this tutorial, so I may have made a mistake or left something out. BACK UP FIRST!!! You will modify (or create) six different files. I always backup my entire Starter.FPS folder as Copy Of Starter.FPS Just right click on Starter.FPS and click 'copy', then click 'paste'. Windows will paste a copy right there.
2. OK, here we go. Go into \client\scripts\default.bind.cs and at the bottom add this code:
//------------------------------------------------------------------------
//Show WorldMap.jpg using "m" to toggle
//-----------------------------------------------------------------------
$worldmapState = false;
function toggleWorldmap()
{
if ($worldmapState == false)
{
commandToServer('DisplayWorldmap');
$worldmapState = true;
}
else
{
Canvas.setContent( PlayGui );
$worldmapState = false;
}
}
moveMap.bindCmd(keyboard, "m", "toggleWorldMap();", "");
//------------------------------------------------------------------------
3a. Go into client\init.cs and add this to the SHELL GUI exec section:
//load the world map gui
exec("./ui/WorldMapGui.gui");
3b. and under //Client scripts
exec("./scripts/WorldMapGui.cs");
4. Delete config.cs and config.cs.dso in the client folder. Torque will recreate these for you.
Actually, delete out ALL the .dso files to force a recompile.
5. Create a WorldmapGui.cs file in the client/scripts folder:
//-----------------------------------------------------------------------------
// Torque Game Engine
// Copyright (C) GarageGames.com, Inc.
//-----------------------------------------------------------------------------
//-------------------------------------------------
// WorldMapGui.cs
//-------------------------------------------------
new ActionMap(WorldMap);
WorldMap.bindCmd(keyboard, "m", "toggleWorldMap();", "");
function WorldMapGui::onWake()
{
$enableDirectInput = "1";
activateDirectInput();
WorldMap.push();
}
function WorldMapGui::onSleep()
{
echo("onSleep");
// WorldMap.pop();
}
function clientCmdPopWorldMap()
{
Canvas.setContent( WorldMapGui );
}
//----------------------------------------------------------------------------
6. Go into server/scripts/commands.cs and add this to the bottom.
//-----------------------------------------------------------------------------
function serverCmdDisplayWorldMap(%client)
{
//Send the info to the client to display it
commandToClient(%client, 'PopWorldMap');
}
//----------------------------------------------------------------------------
7. In client/ui open defaultGameProfiles.cs
add this to the bottom:
//-----------------------------------------------------------------------------
// WorldMap profile
new GuiControlProfile ("WorldMapProfile")
{
opaque = false;
fillColor = "128 128 128";
fontColor = "0 0 0";
border = true;
borderColor = "0 0 0";
fontType = "Arial";
fontSize = 18;
};
//----------------------------------------------------------------------------
8. Create a new GUI called WorldMapGui, set the bitmap as our worldmap.png.
-Load a mission in Torque.
-Go into GUI editor (F10)
-Click File>New GUI
-Name it WorldMapGui
-Click New Control and select GuiBitmapCtrl
-In the lower tree-view, in the Misc section, click the ... next to bitmap, and change it to your WorldMap.png
-Name the control WorldMap
-Click Apply
-Click File> SaveGUI
Save it in the client/ui folder.
9. Test it out!
Start Torque.
Load a mission.
Once the mission load, press the m key and your world map should display. Press m again, and the map should toggle off.
I hope this works for you.
Tony
About the author
#2
01/16/2007 (5:27 pm)
Please dont rate resources without first trying them, The rating should be an indication of the overall worth and usability of a resource, not just a chance to click a random button.
#3
01/22/2007 (9:43 am)
Client-server to display a bitmap? Perhaps you could explain your reasoning behind this... Does the server really need to know that the client is looking at the map? If so, why?
#4
If anyone has a better way of doing this, please post it. I'd love to learn more.
Thanks!
Tony
edit: I was pondering the question "Does the server really need to know that the client is looking at at the map?" As it stands, no, the server doesn't need to know. However, this is loading a GUI and not just a .PNG, so it should be able to hold buttons. The buttons can then affect client/server features. Just my 2 cent opinion.
01/24/2007 (1:28 am)
@Kevin, I have no reason why. I'm a newbie, and this worked for me. I'm sure there is a better way, but I'm not really a programmer. I'm better at art.If anyone has a better way of doing this, please post it. I'd love to learn more.
Thanks!
Tony
edit: I was pondering the question "Does the server really need to know that the client is looking at at the map?" As it stands, no, the server doesn't need to know. However, this is loading a GUI and not just a .PNG, so it should be able to hold buttons. The buttons can then affect client/server features. Just my 2 cent opinion.
#5
the same thing above could have been acomplished fully client side like:
and in default.bind.cs:
and actually even with multiple zones and maps it could still be done client side... However I dont think it would matter which way you did it, unless you were looking at a multiplayer game where the extra client-server calls could impact performance etc.
01/30/2007 (6:52 am)
Kevin is right, there is no need for client to server communication to display a bitmap unless maybe you have multiple areas, each having its own map and the server is telling the client which map to display...the same thing above could have been acomplished fully client side like:
//--- TURN MAP ON-----------------------------
// runs XXX routine when UI screen is opened
//----------------------------------------------
function MapGui::onWake(%this)
{
MapGUI.XXX();
}
//--- TURN MAP OFF-----------------------------
// runs xxx routine when UI screen is closed
//-----------------------------------------------
function MapGui::onSleep(%this)
{
MapGUI.xxx();
}
// --- TOGGLE MAP UI ON & OFF ---
function MapGui::toggle(%this)
{
if(%this.isAwake())
{
Canvas.PopDialog(%this);
}
else
{
Canvas.PushDialog(%this);
}
}and in default.bind.cs:
moveMap.bindCmd(keyboard, "m", "", "MapGui.toggle();");
and actually even with multiple zones and maps it could still be done client side... However I dont think it would matter which way you did it, unless you were looking at a multiplayer game where the extra client-server calls could impact performance etc.
#8
10/01/2011 (11:55 am)
seems to me you would call to the server if you were wanting to display actors position on the map. requires more code though. 
Torque Owner Mark Junior