HBGames
Okay kids, today we'll be learning how to implement some basic programming techniques to build a menu system completely out of events. The first thing I'd like to mention is that these are BASICS. I will not be posting an entire menu system, but with the techniques I show you here will make it easy to create your own event menu, and probably other things as well.
At the end of the day, it should look something like this:
Cool, no? Well, i think it is. At any rate, this is what you have to look forward to, unless you want to make your own graphics.
Here are the graphics you'll need, and the graphics which I'll be using in the tutorial:
Step 1: Setting Up The Common Events
Step 2: Displaying the Menu
Step 3: Adding Button Input
Step 4: Moving the Selection Icon
Step 5: Dealing with the Menu Selection
Step 6: Disposing of the menu
Step 7: Above and Beyond
Okay kids. If you did something wrong, and can't figure out what, (or if you're just too lazy to follow the tutorial, and just wanna see wtf i did), here's a working demo of it:
http://rapidshare.com/files/122113189/Project2_B.rar
Go ahead and poke around with it if you'd like.
If anything wasn't explained properly, or if I left anything out, let me know!!
At the end of the day, it should look something like this:
http://img211.imageshack.us/img211/7946/001overviewuw8.png[/img]
Cool, no? Well, i think it is. At any rate, this is what you have to look forward to, unless you want to make your own graphics.
Here are the graphics you'll need, and the graphics which I'll be using in the tutorial:
http://img379.imageshack.us/img379/7248/menup1rb7.png[/img]
--------------------------------
http://img379.imageshack.us/img379/5964 ... eakgk2.png[/img]
--------------------------------
http://img211.imageshack.us/img211/4568 ... ectfy6.png[/img]
--------------------------------
http://img178.imageshack.us/img178/869/hanghg5.png[/img]
--------------------------------
http://img379.imageshack.us/img379/5964 ... eakgk2.png[/img]
--------------------------------
http://img211.imageshack.us/img211/4568 ... ectfy6.png[/img]
--------------------------------
http://img178.imageshack.us/img178/869/hanghg5.png[/img]
Step 1: Setting Up The Common Events
The very first thing we have to do is make FIVE common events:
http://img211.imageshack.us/img211/7002 ... pcekj3.png[/img]
You can call them whatever you want, but I suggest you stick to something at least somewhat similar to mine if you'd like to avoid confusion. There will be a lot of confusion.
The first common event will load, and display the menu. The second will be used to move the selection when the arrow keys are pressed. The third will be used to move the selection graphic to the selection variable. The fourth will be used to determine which option is selected when the enter key is pressed. The fifth, and final, common event will be used to dispose of the menu (make it go away).
So once you have your common events named, you'll just want to go back to the first one, where we'll be actually displaying the graphics.
note: if you haven't loaded the provided graphics into your database, NOW is the time to do it!
http://img211.imageshack.us/img211/7002 ... pcekj3.png[/img]
You can call them whatever you want, but I suggest you stick to something at least somewhat similar to mine if you'd like to avoid confusion. There will be a lot of confusion.
The first common event will load, and display the menu. The second will be used to move the selection when the arrow keys are pressed. The third will be used to move the selection graphic to the selection variable. The fourth will be used to determine which option is selected when the enter key is pressed. The fifth, and final, common event will be used to dispose of the menu (make it go away).
So once you have your common events named, you'll just want to go back to the first one, where we'll be actually displaying the graphics.
note: if you haven't loaded the provided graphics into your database, NOW is the time to do it!
Step 2: Displaying the Menu
http://img379.imageshack.us/img379/3239/002step1mf7.png[/img]
Now you've got the images into your database, and your common events named, right? Right. The first thing we want to do here is draw the 'P1_menu' graphic. We need to set it's origin to 'top left', and set it to a somewhat high layer, say, layer 10. We want to draw it offscreen, so we can sliiiide it onto the screen, so set it's X coordinate to -100.
Now we want a 5 frame wait. this is optional, I just like adding 'wait's every so often. Then we want to perform the 'move picture 10', and slide it to the coordinates 0x, 0y. I set the frame to 30, but you can change that to make it faster/slower if you'd like. Add another 5 frame wait, if you'd like a slight lag before the options are selectable.
The next thing to do is draw the 'menu_select' image on the next layer (layer 11). In order for this to properly work on the provided menu graphic, we need to set it's coordinates to (origin: upper left, again) 101,91, so it's aligned with the first selectable option.
Next we need to make a variable called 'menu_curs_position'. This single variable is the backbone of your menu. Treat it well.
Set the 'menu_curs_position' variable to = 1.
Now we need to create a loop. Loops are the only thing standing between having button input, and not having button input. Get used to these. We need this loop because it will repeatedly check, every five frames, if a key is being pressed. Without this loop, your player has one chance to press the key as soon as the event is called, and that's it. This guy just keeps asking over and over.
Inside this loop we need to call two of our other common events: 'menu_commands', and 'menu_curs_position_p1'. IN THAT ORDER. If you call them in opposite order, things will be screwy. After these two 'call common event's, we create a 5 frame wait. In my experience, sometimes loops like this won't work unless there is a wait. Maybe you need this, maybe you don't. I suggest you add it, anyway.
Now we need to make a switch called 'close menu'. This switch does exactly what it says. Make it, but don't turn it on/off yet! Just create a branch to check if it's on. If it IS on, we need to turn it back off, then 'break' the loop. If you forget to add the event to turn the switch back off, your menu will just keep closing every time you open it up!
Now you've got the images into your database, and your common events named, right? Right. The first thing we want to do here is draw the 'P1_menu' graphic. We need to set it's origin to 'top left', and set it to a somewhat high layer, say, layer 10. We want to draw it offscreen, so we can sliiiide it onto the screen, so set it's X coordinate to -100.
Now we want a 5 frame wait. this is optional, I just like adding 'wait's every so often. Then we want to perform the 'move picture 10', and slide it to the coordinates 0x, 0y. I set the frame to 30, but you can change that to make it faster/slower if you'd like. Add another 5 frame wait, if you'd like a slight lag before the options are selectable.
The next thing to do is draw the 'menu_select' image on the next layer (layer 11). In order for this to properly work on the provided menu graphic, we need to set it's coordinates to (origin: upper left, again) 101,91, so it's aligned with the first selectable option.
Next we need to make a variable called 'menu_curs_position'. This single variable is the backbone of your menu. Treat it well.
Set the 'menu_curs_position' variable to = 1.
Now we need to create a loop. Loops are the only thing standing between having button input, and not having button input. Get used to these. We need this loop because it will repeatedly check, every five frames, if a key is being pressed. Without this loop, your player has one chance to press the key as soon as the event is called, and that's it. This guy just keeps asking over and over.
Inside this loop we need to call two of our other common events: 'menu_commands', and 'menu_curs_position_p1'. IN THAT ORDER. If you call them in opposite order, things will be screwy. After these two 'call common event's, we create a 5 frame wait. In my experience, sometimes loops like this won't work unless there is a wait. Maybe you need this, maybe you don't. I suggest you add it, anyway.
Now we need to make a switch called 'close menu'. This switch does exactly what it says. Make it, but don't turn it on/off yet! Just create a branch to check if it's on. If it IS on, we need to turn it back off, then 'break' the loop. If you forget to add the event to turn the switch back off, your menu will just keep closing every time you open it up!
Step 3: Adding Button Input
http://img178.imageshack.us/img178/6812/003firstoz3.png[/img]
Now we need the much needed arrow-key input!
Head on over to the 'menu commands' common event. The first thing we're going to do here is add a branch to check if the 'down key' is being pressed. When it is being pressed, we need to add +1 to that 'menu_curs_position' variable. Now create another branch to check if the 'up' key is being pressed, and make it subtract -1 from the 'menu_curs_position' variable.
I know what you're thinking, "hey, but that's not moving the selection graphic!". You're right. We'll get to that soon, though! Remember, this variable is your work horse, and it is going to do a lot of stuff!
NOW. The way I wanted this particular menu, in this particular project to close was with the right/left buttons. What I did was add two branches, separately checking if the right/left keys were being pressed, and then called the 'menu dispose' common event. I suggest you do the same, unless you want to wing it from here on out!
Next, we need to check if the 'c' (actually the ENTER key) is being pressed. If it is, we'll call the 'menu selection' common event. That way the menu selection can handle it's business!
The next clusterfuck of branches is for the loading of a 'cheat menu'. Oh yes. The first thing I added into my project was a cheat menu.
This next part, the one with three branches, and loads the 'cheat menu' common event isn't necessary. I won't be explaining it. It's included in the demo, tho. You can skip it.
http://img379.imageshack.us/img379/3824 ... ondxh3.png[/img]
Now, the last part of the 'menu commands' common event! We need to just check if the 'menu_curs_position' variable is too high/low. What this means, is that there are only 6 options, and if the variable goes to 7, we have a problem. So we will add, after the commands, a branch to check if the variable is =7. If it IS, we need to set it to 1. We also need one to check if it's =0. If it is, we'll set it to 6. This adds a 'looping' menu selection effect (pressing up on the top option takes you to the bottom one).
Don't worry if that last part didn't make sense. Just add these. It'll come together in the next step, I promise.
Now we need the much needed arrow-key input!
Head on over to the 'menu commands' common event. The first thing we're going to do here is add a branch to check if the 'down key' is being pressed. When it is being pressed, we need to add +1 to that 'menu_curs_position' variable. Now create another branch to check if the 'up' key is being pressed, and make it subtract -1 from the 'menu_curs_position' variable.
I know what you're thinking, "hey, but that's not moving the selection graphic!". You're right. We'll get to that soon, though! Remember, this variable is your work horse, and it is going to do a lot of stuff!
NOW. The way I wanted this particular menu, in this particular project to close was with the right/left buttons. What I did was add two branches, separately checking if the right/left keys were being pressed, and then called the 'menu dispose' common event. I suggest you do the same, unless you want to wing it from here on out!
Next, we need to check if the 'c' (actually the ENTER key) is being pressed. If it is, we'll call the 'menu selection' common event. That way the menu selection can handle it's business!
The next clusterfuck of branches is for the loading of a 'cheat menu'. Oh yes. The first thing I added into my project was a cheat menu.
This next part, the one with three branches, and loads the 'cheat menu' common event isn't necessary. I won't be explaining it. It's included in the demo, tho. You can skip it.
http://img379.imageshack.us/img379/3824 ... ondxh3.png[/img]
Now, the last part of the 'menu commands' common event! We need to just check if the 'menu_curs_position' variable is too high/low. What this means, is that there are only 6 options, and if the variable goes to 7, we have a problem. So we will add, after the commands, a branch to check if the variable is =7. If it IS, we need to set it to 1. We also need one to check if it's =0. If it is, we'll set it to 6. This adds a 'looping' menu selection effect (pressing up on the top option takes you to the bottom one).
Don't worry if that last part didn't make sense. Just add these. It'll come together in the next step, I promise.
Step 4: Moving the Selection Icon
http://img211.imageshack.us/img211/646/004gs8.png[/img]
Now for the coolest part. Making the selection graphic move when you press buttons. Head over to the 'menu_curs_position_p1' common event.
The first thing you'll need to do is set a branch to check if the 'menu_curs_position' variable is =1. If it is, we will 'move' image 11 (i.e., the selection graphic) to the top option, at the coordinates 101,91. I set it's move speed to 5. You can make it faster/slower if you'd like.
Now create another branch, to check if the 'menu_curs_position' is =2. If it is, we need to move it to the coordinates of the second option on the 'p1_menu' graphic, which are 101,118. We're going to be staying on the 101 Y axis this whole time, so right here you can just CTRL+C the event branch.
Then you can CTRL+V it, and just change the branch to check check if the variable is =3, and move it's y coordinate according to the image at the top of this step. Rinse, and repeat, referencing the image of the events, until all 6 are finished.
Now when you press the up/down keys, the graphic MOVES. =D
Now for the coolest part. Making the selection graphic move when you press buttons. Head over to the 'menu_curs_position_p1' common event.
The first thing you'll need to do is set a branch to check if the 'menu_curs_position' variable is =1. If it is, we will 'move' image 11 (i.e., the selection graphic) to the top option, at the coordinates 101,91. I set it's move speed to 5. You can make it faster/slower if you'd like.
Now create another branch, to check if the 'menu_curs_position' is =2. If it is, we need to move it to the coordinates of the second option on the 'p1_menu' graphic, which are 101,118. We're going to be staying on the 101 Y axis this whole time, so right here you can just CTRL+C the event branch.
Then you can CTRL+V it, and just change the branch to check check if the variable is =3, and move it's y coordinate according to the image at the top of this step. Rinse, and repeat, referencing the image of the events, until all 6 are finished.
Now when you press the up/down keys, the graphic MOVES. =D
Step 5: Dealing with the Menu Selection
http://img225.imageshack.us/img225/804/005dp6.png[/img]
As you can see, theres not much to this step. Why? Because it's an incomplete menu skeleton, thats why!
What this step is for; is to check what the variable 'menu_curs_position' is at when the enter key is pressed, thus giving the correct results upon selection! So if 'menu_curs_position' is at =1, then we'd open up the submenu/etc/whatever for that option. Sadly, I'm not getting into that here. So, these are just a few examples, and they don't do anything. Enjoy the functionality, though!
As you can see, theres not much to this step. Why? Because it's an incomplete menu skeleton, thats why!
What this step is for; is to check what the variable 'menu_curs_position' is at when the enter key is pressed, thus giving the correct results upon selection! So if 'menu_curs_position' is at =1, then we'd open up the submenu/etc/whatever for that option. Sadly, I'm not getting into that here. So, these are just a few examples, and they don't do anything. Enjoy the functionality, though!
Step 6: Disposing of the menu
http://img409.imageshack.us/img409/9937/006zo2.png[/img]
This one, like the previous one, is very simple. What it's going to do is get rid of the menu.
So first, we want to just erase picture '11' (the selection graphic). Then we want to sliiiiiide picture 10 (the menu) offscreen (-100x coordinate). Then we erase picture 11. Now we turn on the ol' 'close menu' button that we made back in step 2.
NOW. All you need is an event on the map that the player can push, and have it call the common event 'menu load p1'. Or any other practical way you want to load it. This was built for an unorthodox game, so it was opened via an event on the map. Get creative, kids!
and...
VIOLA. you can open the menu, select things, and then close it. ALL via ONE variable, 2 pictures, and a switch. Aint that somethin?
This one, like the previous one, is very simple. What it's going to do is get rid of the menu.
So first, we want to just erase picture '11' (the selection graphic). Then we want to sliiiiiide picture 10 (the menu) offscreen (-100x coordinate). Then we erase picture 11. Now we turn on the ol' 'close menu' button that we made back in step 2.
NOW. All you need is an event on the map that the player can push, and have it call the common event 'menu load p1'. Or any other practical way you want to load it. This was built for an unorthodox game, so it was opened via an event on the map. Get creative, kids!
and...
VIOLA. you can open the menu, select things, and then close it. ALL via ONE variable, 2 pictures, and a switch. Aint that somethin?
Step 7: Above and Beyond
LOL@CHEESY STEP TITLE
Anywho, there's a bit more to this menu. BUT. I'm not going to explain it, as it's a very very tedious process. What it consists of is a 'password' input system, using all 26 roman letters, 3 special symbols, and a faulty 'ok' button. It's unfinished. However, if you'd like to see it in action, or look at how it ticks, you can just download the demo of this tutorial, and screw around with it.
Sorry if this seems like laziness, but I spent more than an hour on this tutorial as it is, and it would be a waste of time to just re-explain everything i just said. Most of the input feature just uses all the same basic function's i explained how to do in the previous steps. It should still give you more ideas of how to implement the system, tho.
Anywho, there's a bit more to this menu. BUT. I'm not going to explain it, as it's a very very tedious process. What it consists of is a 'password' input system, using all 26 roman letters, 3 special symbols, and a faulty 'ok' button. It's unfinished. However, if you'd like to see it in action, or look at how it ticks, you can just download the demo of this tutorial, and screw around with it.
Sorry if this seems like laziness, but I spent more than an hour on this tutorial as it is, and it would be a waste of time to just re-explain everything i just said. Most of the input feature just uses all the same basic function's i explained how to do in the previous steps. It should still give you more ideas of how to implement the system, tho.
Okay kids. If you did something wrong, and can't figure out what, (or if you're just too lazy to follow the tutorial, and just wanna see wtf i did), here's a working demo of it:
http://rapidshare.com/files/122113189/Project2_B.rar
Go ahead and poke around with it if you'd like.
If anything wasn't explained properly, or if I left anything out, let me know!!