Adding Title Pages and Game Over Screens to Game Maker Games

With the Game Maker game(s) we have created so far (Catch a Clown and maybe Maze Game) we have gone straight into the game from a standing start, and come straight out of the game at the end.

How much more professional would it feel if we had a proper start screen and a final closing screen to top and tail our game?

Spend a minute or two thinking how you might go about adding these screens to your game(s). Write down two or three bullet points each about what you want to appear on each screen and what interactions each screen should support. If you think you can see how to add these screens to you game, fire up Game Maker and see if if you’re right…

Here’s the approach I came up with…

The title and game over screens can each be represented by a separate room, possibly containing a background image, with the title/game over words either appearing as part of a background layer, or as an object containing a large sprite. Ideally, there should be a button to start the game on the start page, and buttons on the game over page to either replay the game or quit.

So let’s try it…

To begin with, I want to create my start screen. One quick way of generating a start screen it to use a photograph. To add a start screen to my Catch a Clown game, I searched on flickr, the photo sharing site, for a clown photo, using the advanced search options to find photos that were licensed with a Creative Commons license (so I am free to use them) and allowed “derivative works’ (so that I can change them – by adding words over the top, for example)).

Having selected an image, I downloaded the large sized version of it to my computer, and then loaded it into Game maker as a new background.

If you open the background file in Game Maker, you can open the background image into an image editor and add some text to it (click on the TT button in the palette on the left hand side; set the font size from the text menu; set the font colour from the palette on the right. If you go wrong, ctrl-z should undo the last action!).

Create a new room (rm_titles, maybe, or rm_start?) and add the background to it. Move the room to the top of the room list so that it is the first room in the game and the one that will be displayed when the game is started.

To start the game, we just want the player to press any key on the keyboard (or maybe click the mouse). Create a new controller object (no sprite required) and configure it so that when any keyboard key is pressed, the game moves on to the next room. (You may also want to handle a key click event with a similar action.)

If you run the game, you should now find that you have a title screen at the start of your game.

See if you can work out how to add some title music to your game that plays whilst the Title screen is displayed. How might you modify the start controller so that the game starts if the player presses the ‘s’ key, and displays the game information if they press the ‘h’ or ‘i’ keys? (To help the player out, you would need to change the instruction text on the start screen too, maybe to something like “Press ‘H’ for help, ‘S’ to start”!)

Adding a ‘Game Over’ Screen

Turning now to the maze game, my game currently just fizzles out when I get to the final room. In the Catch a Clown series, we looked at how to display a High Socre table (Who’s Best? Keeping Track of High Scores), which is something that might be good to add to the end of the maze game.

But for now, I just want to add a screen with two buttons on it – one to restart the game, and one to quit. Again, I could add a photo background to the game over room, but I won’t for now, preferring instead just to have a simple coloured background. make sure the room is the last room in the game.

What I do want, though, are a couple of buttons to press (rather than particular key presses) to restart or quick the game.

One easy way of generating the buttons – which are going to be sprite images associated with relatively simple objects that spot when the button instances are clicked on (i.e. “pressed”) – is to use an online button generator, such as buttonator.

May 2011 – Buttonator seems to have moved on… here are a couple of possible alternatives: Glassy Buttons, Cooltext. They seem to work in much the same was as Buttonator did…

Create your button, right-click on it to download it, and save it as a bitmap (.bmp type) image. It then then be loaded into Game maker as a sprite image.

Create two sprites and two objects (one to quit and one to restart, in each case) and add them to the room.

Can you work out what actions to add to the button objects? (How did you configure the clown object so that the programme recognised when a clown instance was clicked on?) Try it and see….

If you have not already done so, add a left button/end game event/action pair to the quit object, and a left button/restart game event/action pair to the restart object.

If you’re feeling really adventurous, you might make two versions of each button – one for when it is unpressed, and one for when it is pressed. (If you do achieve this, feel free to post the method/howto back here as a comment or in a blog post of your own that links back here ;-) Both images should be the same size. If you load both images into the same sprite, you should be able to work out how to show the button being pressed by displaying the second sprite image when the mouse button is pressed (before performing the appropriate action when the mouse button is released, or when the click event is raised…)

So that’s it – you should now be able to add title and end game screens to your game and make them just that little bit more complete….