Page 1 of 3 123 LastLast
Results 1 to 20 of 52

Thread: Menus Tutorial

  1. #1
    Member marvo's Avatar
    Join Date
    Aug 2005
    Location
    Pittsburgh PA USA
    Posts
    720

    Menus Tutorial

    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:

    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!
    Last edited by marvo; 27-Jul-06 at 11:25.



  2. #2
    Member Octopus4's Avatar
    Join Date
    Jun 2005
    Location
    Jordan
    Posts
    4,531
    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
    iOS Developer, Game Developer & Blender Artist
    www.deyaeldeen.com



  3. #3
    Member BrianH's Avatar
    Join Date
    Feb 2005
    Location
    DuBois, PA
    Posts
    437
    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.
    \"Iron rusts from disuse, stagnant water loses its purity, and in cold weather becomes frozen; even so does inaction sap the vigors of the mind.\"
    - Leonardo da Vinci



  4. #4
    Member BrianH's Avatar
    Join Date
    Feb 2005
    Location
    DuBois, PA
    Posts
    437
    you need to correct your "cursor" script. it should read "from Rasterizer import showMouse" then "showMouse(1)"
    \"Iron rusts from disuse, stagnant water loses its purity, and in cold weather becomes frozen; even so does inaction sap the vigors of the mind.\"
    - Leonardo da Vinci



  5. #5
    Member BrianH's Avatar
    Join Date
    Feb 2005
    Location
    DuBois, PA
    Posts
    437
    ah, nevermind, your method will still work, just more typing for anything else.
    \"Iron rusts from disuse, stagnant water loses its purity, and in cold weather becomes frozen; even so does inaction sap the vigors of the mind.\"
    - Leonardo da Vinci



  6. #6
    Member marvo's Avatar
    Join Date
    Aug 2005
    Location
    Pittsburgh PA USA
    Posts
    720
    Thanks 3DGURU!



  7. #7
    Member Social's Avatar
    Join Date
    Nov 2005
    Location
    New Jersey, USA
    Posts
    3,596
    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.
    It is in the nature of powerless people to vicariously enjoy the exercise of arbitrary power by others.

    - Dmitry Orlov



  8. #8
    Member
    Join Date
    Jun 2006
    Posts
    1,680
    thanks Stella looks like a great tut.. can't wait to do it when I have the time!



  9. #9
    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*



  10. #10
    Member BrianH's Avatar
    Join Date
    Feb 2005
    Location
    DuBois, PA
    Posts
    437
    Maybe we could see one on designing UI's and implementing them into the game. Would be a simple scene overlay tutorial.
    \"Iron rusts from disuse, stagnant water loses its purity, and in cold weather becomes frozen; even so does inaction sap the vigors of the mind.\"
    - Leonardo da Vinci



  11. #11
    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?



  12. #12
    Member ST150's Avatar
    Join Date
    Jun 2003
    Location
    Leeds, UK
    Posts
    753
    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



  13. #13
    Member marvo's Avatar
    Join Date
    Aug 2005
    Location
    Pittsburgh PA USA
    Posts
    720
    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



  14. #14
    Banned Member p00f's Avatar
    Join Date
    May 2006
    Location
    Hawaii USA
    Posts
    1,301
    OMG!!

    you rock STELLA!

    thanks for this!



  15. #15
    Member Octopus4's Avatar
    Join Date
    Jun 2005
    Location
    Jordan
    Posts
    4,531
    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



  16. #16
    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
    Last edited by EddieX; 30-Aug-06 at 04:36.
    visit our group @ facebook : >>> blender-an yuk! <<<



  17. #17
    Member Social's Avatar
    Join Date
    Nov 2005
    Location
    New Jersey, USA
    Posts
    3,596
    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.
    It is in the nature of powerless people to vicariously enjoy the exercise of arbitrary power by others.

    - Dmitry Orlov



  18. #18
    Member redteam_spartan's Avatar
    Join Date
    Dec 2005
    Location
    Toronto, Canada
    Posts
    259
    THANK YOU!

    Sure beats the heck out of my menu.

    Is it possible to have custom cursors?
    Turbosquid-eCstatic



  19. #19
    Member blendenzo's Avatar
    Join Date
    Apr 2006
    Location
    Michigan, USA
    Posts
    2,702
    @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.
    "From somewhere, a transmission..."
    Game Engine tutorials: TutorialsForBlender3D - blendenzo.com - blending-online
    My Projects: Escape the Room - Brought2Life - UpRight - Solomon's Treasure - Sokoban - Marble Labyrinth



  20. #20
    Member redteam_spartan's Avatar
    Join Date
    Dec 2005
    Location
    Toronto, Canada
    Posts
    259
    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.)?
    Turbosquid-eCstatic



Page 1 of 3 123 LastLast

Similar Threads

  1. ::feeblemind.org::'s list of tutorial (updated 11/06/2006)
    By olivS in forum Basics & Interface
    Replies: 11
    Last Post: 06-Nov-06, 16:27
  2. The Unofficial Texturing Tutorial
    By Landis in forum Works in Progress
    Replies: 30
    Last Post: 23-Jul-05, 21:51
  3. Help with newbie UV mapping tutorial please.
    By zathril in forum Basics & Interface
    Replies: 2
    Last Post: 11-Jul-05, 08:10
  4. Skills based tutorial sequence 2/4/04
    By u_do_u_r in forum Game Engine Support and Discussion
    Replies: 21
    Last Post: 01-Apr-04, 16:32

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •