Last modified on 27 May 2013, at 18:58

Blender 3D: Noob to Pro/Advanced Tutorials/Advanced Game Engine/Game Creating Techniques(GUI)/Creating Pop-Up Menus

In this tutorial, we will be making a Title Screen and a Main Menu Screen to come from that Title Screen. While most people hardly pay attention to these areas on a real video game, they do make the game seem much better to play, and gives the player a certain choice of what they can do before they play the game. Before beginning this, make sure you familiarize yourself with several logic sensors and actuators, such as "Scene" and "Property", as they will heavily be relied upon. It is also best if you have several Pictures ready to use for your game or are ready for additional functions with certain programs (a Word Processor Program and Image Editing Program [that has a transparency setting] can help move along your game.)

Making An Easy Title MenuEdit

The Title Screen will be very simple -- it will be the "Press Enter to Continue" kind. This will lead to a more interactive kind of Main Menu, in which you can use either key commands or the mouse pointer. This tutorial will not be the most visually pleasing, but then again, you can always add whatever graphics you would like. Again, it would be wise to have handy a word-processing program and a program like Microsoft Paint. "Print Screen" will be a useful function to use while following this tutorial -- the corresponding button is generally located to the right of the F12 key in the row of function keys on your keyboard.

If you have never used different scenes before, you're about to get a crash course. Also, Blender hotkeys and actions will not be explained with (A-key) or (numpad-6); it is assumed you have already learned at least how to perform basic Blender functions.

Making the MenuEdit

First, start up Blender and delete everything in the scene. Then, move to top orthographic view (press numpad 7, or if you have not a numpad, go to the hidden top menu and in the System & OpenGL section select "emulate numpad").

Clear Blender.jpg

The first thing you should do is add a new scene. In the Information view panel at the top, click the SCE: drop-down menu and click on ADD NEW. Label this new scene something like "Main Menu". Now go back to your original scene and name it something like "Title Menu". These names will be important when it comes to changing the scenes around. So, on your "Title Menu" Scene, begin by adding a Camera. Move this Camera in the Z direction about a point, just to get it above the grid. Now, set the camera view to Orthographic. Now switch to Camera View. Add a plane that is scaled to cover the entire surface of the Camera's view-bounds. Move that plane just a little bit in the -Z direction. Then, add another plane, but scale this plane to be a thin rectangle about 2/3rds down the Y-length of the Camera, centered in X-direction.

Main menu starting.JPG

(Image Shown with Materials for visual purposes, DON'T ADD MATERIALS)

Now this next step isn't necessary, but if you want a good-looking game you will probably need this step.

Let's add some UV textures. Open a good photo/image-editing program like Photoshop, GIMP, or Microsoft Photo Editor; something that preferably supports Transparency. Type some text appropriate for your game such as, "Press any key to continue." What I do is add lots of extra space and add additional text that I will use in the main menu too, such as "New Game", "Continue", "Story Mode", etc. so it is all in one image for multiple UV textures. If your editor supports it, set the background color to transparent. If not, set it to black so it will register as 0 on the alpha channel in Blender. Save the image (GIF or PNG are reasonable choices for use with transparency). Now, in Blender, split the 3D screen into 2 screens, and change one screen over to UV face select. Select your small rectangle, and switch to Edit Mode and Unwrap the face in the 3D window, then open your saved image in the UV face window. Scale your face in the UV window so it holds only the "Press Any Key to Continue" graphic. If you wish, also add a starting Image on the larger rectangle.

Setting Up The ActionsEdit

Now this step is necessary. Select the large background rectangle, in the Buttons Window at the bottom switch it to the Logic Tab. This will be very simple. Add one Sensor, one Actuator, and one Controller. Make the sensor a Keyboard Sensor, depress the "True Pulse" button, and in the key area depress the "All Keys" button. Make the Controller an "AND" controller. Make the Actuator a Scene Actuator. Select the Drop-Down box and make it "Set Scene" wit "SCE:Main Menu". Before you test the game, make sure to save and add a Camera to the "Main Menu" Scene. Otherwise the game WILL crash.

If you want the option of returning to this scene, instead of one Actuator make two. Make both of them Scene, but make one "Suspend Scene" with "SCE:Title Menu" and make the other Actuator "Add Overlay Scene" with "SCE:Main Menu". Also, that means in the Main Menu Scene later you'll have to add some key to hit or some action to "Remove Scene" "SCE:Main Menu" and "Resume Scene" "SCE:Title Menu".

Author's Starting Menu ExampleEdit

The following contains actual in-progress work by the original Author of this page. The work and ideas are heavily copyrighted and it is highly encouraged (begged) that you do not rip this content off--the author has submitted this work generously to help less advanced users more efficiently.

The following is my work on a game I am making, and I hope it helps you too.

In Arms Starting Menu.JPG

This will get you to the next menu, which will be on the next section.

A Main MenuEdit

This menu will be more difficult,using a mouse-python function to use and make the mouse appear when you play your game and a maze of sensors and actuators entangled.

Here is the first thing you need: a python script to make the Mouse show ---

*This code is attributed to the author of the chapter "Blender Game Engine/A Simple Mouse Pointer" and this is not my own code.

import Rasterizer as r

r.showMouse(1)

Put this in the text editor, and save the text as something simple like "Mouse". Now, on your Main Menu scene, select the camera and add 1 sensor, 2 controllers, 1 actuator, and 1 property. Name the property "Switch" "Int" Type, and set it to 0. Set up your logic as follows:

Showpointer.jpg

A change will need to be made in order to make yours work. The python controller should be Script:Mouse, not Script:showpointer. If you can't see the connections:

  • Connect the Sensor to the 2 controllers
  • Connect the AND controller to the actuator
  • Leave the Python controller open-ended

If you play the game, you will see the mouse then! Now, back to the Menu, there are multiple kinds of Menus you can make when it comes to Menus popping up. The one I believe works best is a 3-layered button. To explain what this means, I'll run you through the steps of making one. Let's start with the layers themselves. (For this to work best, make the background of any images you use have transparency, so you can make invisible-yet-clickable faces.) Create a rectangle facing the camera where you want your first menu option to be. Copy the object until you have 3 rectangles, and make each one very slightly in front of the last. Now, Select the back rectangle, and on this one apply the UV face of the option's words. The second rectangle is the UV face for a graphic outline around the words if the option is selected in the game. It's not necessary but then again, it helps the player with selecting options and it looks nice. The top rectangle will be the selectable one--make the UV face applied only over a completely transparent area. Now, for the logic.

Text-Rectangle:
-No Logic Needed

Outline-Rectangle:
-Give it a Property named "Selected", Int Type, starting at 0.
-Make a Property Sensor, True Pulse, "Selected" Property is Equal to 1, Connected to an AND controller, Connected to a Visibility Actuator at "Visible"
-Make a Property Sensor, True Pulse, "Selected" Property is Equal to 0, Connected to an AND controller, Connected to a Visibility Actuator at "Invisible"
-Make a Property Actuator, "Selected" Property is Assigned Amount 1 -Make a Property Actuator, "Selected" Property is Assigned Amount 0 -Create AND Controller and connect both Mouse Sensors. Make this AND Controller connect to the Outline-Rectangle's Property Actuator "Selected" Assign=1.

Transparent-Rectangle:
-2 Mouse sensors: "Mouse Over" and "Left Button". Set them to "True Pulse".


(Click Image to Enlarge)
Blender Button arraignment.jpg

Now here is the trickier part to explain. To make things a little more simple, name that last Outline-Rectangle's AND controller connected to the 2 mouse sensors. Select all 3 layers, and duplicate them 3 times. Make each one (in camera view) below the last, making sure to keep them parallel on the Z axis. Now, to make only one selected at a time, take the named controller of the first, and connect it to the Outline-Rectangle's Property Actuator "Selected" Assign=0 of second and third button. Do the same from the second button to the first and third one, and same with the third to the first and second. It should look like the picture:

Click Image to Enlarge
Blender Multi Button.jpg

This logic arraignment should yield (when the game is played) options in which if you click one it will light up, and if you click another, that one will go down and the other will light up.

Now this looks nice aesthetically, but the use of it is now all you have to do is make some Scene Actuators. Add 2 more actuators to each of the Transparent Planes. Use the same method as you did with the Properties, but instead of "Property Assign 1/0" make 1 AND controller, 1 Scene Overlay and 1 Scene Remove for each transparent button. Now make 3 additional Scenes, and either make an entirely new menu for each, or to be easier just make colored rectangles on the scene, different colors for each scene -- either way, make sure that, if the scenes overlay, the additional scene won't cover up the buttons of the Main Menu Scene. So, now connect the 2 Mouse Sensors to the corresponding AND Controller, and connect that to the Corresponding "Overlay Scene" Actuator and 2 Opposing "Remove Scene" Actuators. Do this with the other 2 Transparent Rectangles. Make sure your new scenes also have cameras and that they are scaled properly.

Click Image to Enlarge
Blender Linking Menus.jpg

You can use this technique to make Menus and Sub-Menus Galore! It's fairly simple to make multiple sublevels of this and get back to the original scene with this method.

I hope this helped you make your menus work well.