Game Development Community

dev|Pro Game Development Curriculum

Pause Game Function and in-game menu

by Orion the Hunter · 03/01/2012 (5:40 am) · 19 comments

The timer goes off. Oh no! you forgot that you have to take the pizza out of the oven! But you can't leave your precious game: you're in the middle of a boss battle-The final! If you stop now, you have to go all the way back to the beginning of the level. But on the other hand, that pizza looks pretty delicious... If only you could have your pizza and destroy the boss... Well with this resource, you can!


Hello! I am going to teach you how to simply make a pause game menu that will be accessed with "escape."

First, without any further ado, let's make a new test project so we don't have to worry about interfering codes.

So, Click "File > New Project..." on the top. Name your game (Ha ha!) and choose the "Platformer" template. Magnifique!

Next, we need to make the pause GUI. This part is rather easy if you follow my directions. So what you need to do is go to the GUI editor. The shortcut is (function)F10. So once you see the checkerboard pattern, press "Command N" to make a new GUI. It will ask you for the name you want, so write "PauseGameGui." Click create, making sure that the GUI Class is GuiControl.
Now we are at the part were you need to read carefully.
1. Click Toggle Palette next to "Snap to grid" on the top right.
2. Drag GuiWindowControl from the box that popped up and place it in the middle of the checkerboard.
3. Having done that, Refer to the text for best results.
If I didn't include a feild, that means that it isn't important.
---------------
-Text: Paused
-MaxLength: 1024
-ResizeWidth: Checked
-ResizeHeight: Checked
-CanMove: Checked
-CanClose: Checked
-CanMinimize: Checked
-CanMaximize: Checked
-MinSize: 5050
---------------
-ParentGroup: PauseGameGui
---------------
---------------
-IsContainer: Checked
---------------
This next section is the most important!
-Profile: GuiWindowProfile
-HorizSizing: Center
VertSizing: Center
-Position: 160 288
-Extent: 688 144
-MinExtent: 8 2
-CanSave: Checked
-Visible: Checked
---------------

Now you have a nice long box, right? The most important parts were the size and positioning. So now we need to make the buttons that will preform functions. I only am including an exit game, close menu and options dialog, but the rest is up to you, if you have a save function or something.
Back at the "Toggle Palette" button, click it if it's not still open and drag "GuiButtonControl" to the window you just made. The window should light up blue around the edges, so let go of the button. Set this button's position to "16 104"
Now, go to the bottom right were there is a field (text box) named "Text." edit it by clicking it and name the button to "Options."
Good! Now hit enter/return and the name should be updated.
Now we need to make it so the button opens up the "Options" menu. Edit "Command" which is above "Alt Command" and below "Variable."
Write in the box this exact script:
view plaincopy to clipboardprint?
Canvas.pushDialog(OptionsMenuGui);
Next, let's put in the "Exit Game" button. Let's make things simple and copy and paste the "Options Button." Position it to "536 104"
Rename it to "Exit Game." Set the command to
view plaincopy to clipboardprint?
endGame();
Now we need to make a close button, because nobody ever uses the "X" because it's too small. To substitute, just make a little button and name it "Close." but it on the top left. Extent "64 32" position, "16 24" Now the command must be
view plaincopy to clipboardprint?
pauseModeDeactive();
Under "Accelerator" write "escape (or a button of your choice to be the pause button"
Now we are done with that gui so press "Command S" and save it as "PauseGameGui". The extension *.gui should be added automatically so don't bother writing it. Now in the drop down menu on the top left, select "MainScreenGui"
Make a new button, and drag it off the screen to the left. (You can always gain access to the button again by looking at the GUI element tree on the top right)

Command:
view plaincopy to clipboardprint?
pauseModeActive();
Make the accelerator be the same button as the "close" button's accelerator.

Command S, Save and Replace...

Now close the gui editor. It's time to do some actual scripting. Go to this directory: "(Game Name)/game/gameScripts/MenuSytem/MainMenu.cs"
NOTE: If this directory and this file do not exist, please make sure to [u]create[/u] them. Afterwards, place this code in (Game Name)/game/gameScripts/game.cs:
view plaincopy to clipboardprint?
exec("./MenuSystem/MainMenu.cs");


So now, we need to make the actual code. Go to your gameScripts folder (in "game") and duplicate any of the *.cs files. Rename the copied file to "PauseScript.cs". Open PauseScript.cs and copy and paste the following code:

view plaincopy to clipboardprint?
///Function for pausing the game

function pauseModeActive()
{
$mainSceneGraph = sceneWindow2D.getSceneGraph();
$mainSceneGraph.setScenePause(true);
Canvas.pushDialog(SelectLevelGui);
Canvas.CursorOn();
Canvas.ShowCursor();
}
///Function for unpausing the game

function pauseModeDeactive()
{
$mainSceneGraph = sceneWindow2D.getSceneGraph();
$mainSceneGraph.setScenePause(false);
Canvas.popDialog(SelectLevelGui);
Canvas.CursorOff();
Canvas.HideCursor();
}

Great! now we need to make sure the game reads the pause script so it can use the functions. So in game/main.cs do this:
right below where it says
view plaincopy to clipboardprint?
exec("./gameScripts/game.cs");
write
view plaincopy to clipboardprint?
exec("./gameScripts/PauseScript.cs");
and also,
view plaincopy to clipboardprint?
exec("~/gui/PauseGameGui");

You're done! Launch the game, load a level and press escape. Note! If when you press the escape button the level ends, try removing this line from the second-to-last function in MainMenu.cs in "game/gameScripts/MenuSystem":
view plaincopy to clipboardprint?
GlobalActionMap.unbind(keyboard, "escape");

Thank you for reading this and please post a comment if this function is not working for you.

UPDATE: 1.1

Gave instructions to add an important directory.

-----------------

UPDATE 1.2

Fixed a problem with the quotes being replaced with
Quote: �. Please report this problem if it persists.

----------------

~AJPCEO


#1
03/01/2012 (9:33 pm)
I can't see your pic (I'm on iPad)
#2
03/02/2012 (8:49 am)
Hmm. Well, I don't think pictures like this work on the iPad. Sorry. :-/
Anyway, you wouldn't be able to use the tutorial anyway, since as far as I know, there is no TGB app.
#3
03/02/2012 (11:33 am)
AJ@ I think its the markup syntax in your initial post ... it shows up as text and not photos, because its missing the markup lite code.
#4
03/02/2012 (12:27 pm)
Your pic didn't work on the my mac book till I open it separately in another page.
#5
03/02/2012 (3:28 pm)
Yeah, I think this just has to do with the markups lite stuff. Sorry for any inconvenience.
#6
03/10/2012 (12:06 am)
I still can't see them (on iMac/MacBook/PC)
#7
03/10/2012 (11:32 am)
So you can't see it on all of those? Strange, because I can see them, and I'm using an iMac too.
#8
03/10/2012 (11:44 am)
Updated 03/10/2012: Added text version of image for people who were having trouble.
#9
03/10/2012 (3:34 pm)
copied the url the host might not allow hot linking try photo bucket
#10
03/12/2012 (8:19 am)
No, they provide forum links like that and everything. Let me try a different host, anyway.
#11
03/12/2012 (8:25 am)
Updated 3/12/2012

Deleted image because it was just causing trouble. Refer to the text version instead, please.
#12
03/13/2012 (7:48 am)
Quote: Thank you for reading this and please post a comment if this function is not working for you.

Does anyone have any questions or comments relating to the actual code?
#13
06/26/2012 (11:28 pm)
The only issue I've had with using the GUI for the pause menu is that the GUI items doesn't scale as you increase the resolution, which is actually fine the majority of the time. If I want the items to scale with the resolution I have to do a scene overlay, but that comes with it's own quirks but worked for me anyhow.

// You'd only call this one in the beginning
   %mainScreen = Canvas.getContent();  
   %sceneWindow = new t2dSceneWindow(newScreenScene)  
    {  
        // Position and size  
        Position = "0 0";  
        Extent   = %mainScreen.getExtent();  
          
        // Ensure it always covers the entire window  
        HorizSizing = "100";  
        VertSizing  = "100";  
    };  
   new t2dSceneGraph(myNewScreen);

   myNewScreen.loadLevel("game/data/levels/newScreen.t2d");
   newScreenScene.setSceneGraph(mynewScreen);
   %mainScreen.add(%sceneWindow); 

   newScreenScene.visible = 0;

Along with pausing the scene, if you code things properly while the main action will be paused you can still maneuver things in the new scene fine, then just make it visible when needed, invisible when not needed.

Totally over simplifying it down, but.. yeah it works!
#14
07/09/2012 (8:33 am)
Thanks Ryan!

I did some testing and all GUIs have this effect. Therefor unless you made a scene overlay for every gui, it would look out of place. Thanks! As for the oversimplification, are you referring to my code?
#15
07/14/2012 (7:23 pm)
Anon Jackrabbit,

I just tried running through this tutorial building off of TGB 1.7.6 and PSK 1.2 and I wasn't able to get anything working. I think something might have changes since you wrote up this guide as there is no game/gameScripts/MenuSystem folder nor is there a MainMenu.cs anywhere to be found. As it stands following the above tutorial does nothing as pressing escape in-game does nothing and the main menu appears to be broken as a result.

Do you know why this might be happening? If you need me to provide any more details please let me know. Thanks!
#16
07/17/2012 (7:01 am)
Hello,

I fixed this. For some reason, a few of the PSK builds do not come with built in MenuSystem directories. I fixed it by making it compatible with such builds.
#17
07/26/2012 (2:20 am)
Nice tutorial, but I am having a problem with the text. I am seeing these � artifacts pop up everywhere which is fine until the appear in the middle of the code I am supposed to copy/paste.

Happens on both Chrome and IE.

Example:

exec(�./MenuSystem/MainMenu.cs�);

I assume this should be:

exec("./MenuSystem/MainMenu.cs");

Right?
#18
08/27/2012 (12:46 pm)
Sorry 'bout that,

GarageGames.com is currently having that problem where it replaces quotes with a bunch of gibberish. I'll fix it in this post, but for the rest, it's going to have to be taken up with GG.
#19
08/27/2012 (12:53 pm)
Okay: added an update fixing this. Sorry for the inconvenience, Randy!