Menus Tutorial

[marvo]

Ok, here it goes. A tutorial on making menus. By the end of the tutorial, you should be able to make a menu and expand it further in your project.
The type of menu ill be showing how to make is a point and click button menu.

SKILL LEVEL: NOOB

This tutorial was made in Blender 2.42a
Make sure you save after every step!
Turn blender materials 'off' for this tutorial.

1. The first thing you have to do is open blender(ofcourse) and delete the standard cube and camera. Then next thing to do, is go into "front view" mode and add a camera. (becuase its faster, save questions for later...)



Ok, before I move on, id like to explain how the menu works. At the main menu, when i click a button, I have it so that the sub menu that opens up is in a different scene. So the logic for that would be: (roughly)

[Mouse left click]-------->[AND]-------->[setscene]

So each submenu is a different scene. I might have Main, High scores, About, etc. Each is its own scene.

For this tutorial, well have: Main, Credits, Stuff, (well get back to that later )

2. Then next thing that needs to be done is to split the view. To do this click the bottom of the top header with the middle mouse button and select 'split area'. Now set the new area to the 'text editor'. Now click the little button with the two vertically pointing arrows on it and slect "ADD NEW". Insert this code:

import Rasterizer
 
Rasterizer.showMouse(1)

Name it cursor.

Now select the camera and go into the logic panel (little purple pacman button). Add an 'Always' sensor, and connect it to a 'Python' controller'.
Now type the name of the script in the Python controller(cursor)
Like so:



Now when you start the game engine, the pointer will appear.

3. Now its time to start what I like to call the "meat" of the menus.( the buttons and stoof ).

Add a plane just a little bit in front of your camera. Make sure its centered. It doesnt have to be perfect, nope. Well fine tune it in camera view mode in a second. So after adding a plane, you should have this:



the pink rectangle is the selected plane (if you havent figured that out yet )

Now go into camera view mode. You see the two dotted rectangles? sure you do. Select the plane thats just infront of the camera and resize it so its just a little bigger than the outer dotted rectangle. This rectangle will be the background for the Main menu. You can put whatever texture you want on there. Im going to go ahead and put this one on:



Its nothing special, but it does the job for the tutorial.
Before we move on, rename this scene "Main" (minus quotes)

4. TIME FOR BUTTONS!! REJOICE!... ok maybe youre not as enthusiastic as I am, but thats ok...

This is what you should have so far:



First thing you should do at this point is make a texture for a "Credits" button. You could just use mine if you want:



Now, add a plane just in front of the background plane (toward the camera). This plane is going to be the button so center it and make its smaller. Texture it with your credits texture.

We want it(for this tutorial) so that when the pointer is hovering above the button, it enlarges slightly. So we need to make an ipo animation set to flipper. The animation is two frames. On frame one, press i to bring up the ipo options. (make sure the button is selected). select scale. now move the frame to 2 and enlarge the button a little bit. press i , then scale again. Now to set up the logic:



This means that when the mouse is 'over' the button, then the ipo animation will play.

the next step is to duplicate that button two times. These two buttons will be the 'Stuff' and 'Exit' buttons. Just place them under the credits button, or wherever, it doesnt matter.

Time to make textures for the two new buttons:





4. Time to make the submenus! heres what you should have so far:





Now we have to make another scene for the 'credits' submenu. Click the button witht he vertical arrows next to the scene name and select "ADD NEW" then full copy. Rename the scene 'credits'. Then go back to Main menu scene.

Select the credits button.
We want the button to trigger when the pointer is 'over' it and the left mouse button is clicked. And when that happens youre sent to the credits submenu scene. So the logic is setup as follows:



So if you run the engine, and click on the credits button, you should be taken to the credits scene. BUT WAIT! it looks the same! we have to do something about that.

The only button you need in that scene is a "back" button. to take you have to the main menu once youre satisfied with what you have seen.
use this one:



So now youre in the credits scene. Delete the stuff and exit button. Apply that texture to the credits button. Now in the logic, change the set scene actuator scene to "Main" no quotes. or whatever you named the main scene. So now when you click that button, it should take you to the main menu again. Still need to change the background to something credits...y?



ok, heres what the credits scene should look like:



We still have that stuff button on the main menu... its pretty simple now since you know how the credits button works. While in the 'credits' scene, add a new scene -> full copy. Name it "stuff" no quotes. In that scene, simply change the background to:



Go back into the Main scene and select the "stuff" button. copy all of the logic from the credits button to the stuff button. only for the set scene actuator, put "stuff" (no quotes!), instead of 'credits'. This way when you click the stuff button, youll be taken to the stuff screen.

ALMOST DONE!

just gotta take care of that pesky little exit button. Copy all of the logic from one of the buttons on the main menu to it. instead of having a scene actuator, replace it with a 'game' actuator. and select 'quit this game'.




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~

Well.... that completes it. Youve just created a very very basic menu with buttons! Instead of switching to a new screen when you click a button, you can have it take you to the scene with your game.

The Final Product: http://www.savefile.com/files/3330556


If there is something that you didnt understand, or that i forgot, PLEASE PLEASE do not hesitate to post it here.

I hope this tutorial helps everyone who follows it.



ON TO THE HIGH SCORES TUTORIAL!

[3DGURU]

if you don't mind
i hosted your tut here forever and unlimited bandwidth

HTML
http://www.khayma.com/CGWOODS/TMP/OK.HTM
BLEND
HOST IT AT 1ASPHOST.NET


3DGURU

[BrianH]

Aaaawesome! I spent most of last night working on this, but you mentioned a few things I haven't learned yet (running IPO's, etc). Thanks for the help.

[BrianH]

you need to correct your "cursor" script. it should read "from Rasterizer import showMouse" then "showMouse(1)"

[BrianH]

ah, nevermind, your method will still work, just more typing for anything else.

[marvo]

Thanks 3DGURU!

[Social]

Nice. The newcomers (I don't like to use "noobs", I think it's degrading) will sure appreciate this.

That is, if they ever start using the forum search function.

Good job STELLA.

[kirado]

thanks Stella looks like a great tut.. can't wait to do it when I have the time!

[VenomSeven]

STELLA - you rock. We need more people like you and Social here to write detailed tutorials for the game engine. I think i might write a simple tutorial too. hmm... *thinks of subject*

[BrianH]

Maybe we could see one on designing UI's and implementing them into the game. Would be a simple scene overlay tutorial.

[helpimanoob]

STELLA, the tut worked fine, but i have 1 question, when i run the game on my computer the textures dont show up it's just one big gray square? what am i messing up?

[ST150]

Good work Stella. I'm planning to write another tutorial aimed at advanced users on Menu systems shortly. Everything from designing the graphics to implementing save & load functions. Just need this heatwave we're having over here to end so I have enough motivation to write something

[marvo]

Originally Posted by helpimanoob STELLA, the tut worked fine, but i have 1 question, when i run the game on my computer the textures dont show up it's just one big gray square? what am i messing up?

You have to turn blender materials off.



uncheck that

[p00f]

OMG!!

you rock STELLA!

thanks for this!

[3DGURU]

you can DLD a blend
that contains a very good menu

and experiment with it ..

http://www.cognitiveonline.com/bhpra...LENDS_full.zip

http://www.cognitiveonline.com/bhpra...ENDS_small.zip

[EddieX]

hi, nice tut stella!, i'm used to be using macromedia director for my office presentations, but since now i'm working alone (and i dont have enough bucks to afford macromedia) i'm always thinking about turning blender GE into some kind of directors style methods of presentations, until this time, my problems with GE is:

-i always using drop shadow style buttons (a button with a shadow below it) this thing requires alpha, but in GE i found it hard to make a good anti aliasing alpha (yes i know how to make an alpha channel, i usually using TGA)
i need it more softer edges, how to do it?

-blinking button, in easy way: when i'm doing "mouse over" over a button, the button should light on (more bright or glowing) and when the mouse leave the button, the button should turn back to its original state (like its original darker color) in director they call it "mouse leave"
how i do that? since in GE theres only "mouse over", sombody can make a script for "mouse leave"?

if we can make this kind of "presentation/ portfolios/ company profile using blender GE" it will be a great breakthrough to alternate macromedia flash/director presentations

[Social]

Originally Posted by EddieX -i always using drop shadow style buttons (a button with a shadow below it) this thing requires alpha, but in GE i found it hard to make a good anti aliasing alpha (yes i know how to make an alpha channel, i usually using TGA) i need it more softer edges, how to do it?

Higher resolution texture, look for some GIMP or PS soft shadow tutorials.

Originally Posted by EddieX -blinking button, in easy way: when i'm doing "mouse over" over a button, the button should light on (more bright or glowing) and when the mouse leave the button, the button should turn back to its original state (like its original darker color) in director they call it "mouse leave" how i do that? since in GE theres only "mouse over", sombody can make a script for "mouse leave"?

You don't need a script, because "mouse leave" will happen when "mouse over" is false. In other words when you activate a mouse over action you have your button brighten up, when you "leave mouse" your button will regress to it's previous state automatically, so you don't need to code that action.

[redteam_spartan]

THANK YOU!

Sure beats the heck out of my menu.

Is it possible to have custom cursors?

[blendenzo]

@redteam_spartan: Yes. It requires Python. Use ST150's custom cursor tutorial: http://www.blending-online.co.uk/8501/49979.html It's not exactly straight-forward, but it is possible.

[redteam_spartan]

Thanks blendenzo!

Also how is it possible to activate the menu with one key (lets say ` for example), then reactivate it by pressing the same key (by doing the scene overlay thing.)?