IGM Tutorial: The Basics Of Menus

in Tutorials

Want to check out a PDF of this tutorial? Right click save as HERE.

So far we’ve made a very basic platformer, and a very basic shooter. What we’re going to do now is go over how to create Menus. Menus can be very complex. They can be altered with switches and memories as well as alter everything about your game if you want. You can use them to create an RPG styled menu, a new game/load/continue screen, or they can be an integral part in your game play. You could even make a text-based RPG just using a series of menus.

We’re going to need options for our menu so load up our shooting game and take a little bit of time to create another canvas similar to our first. Once you have that done create a third canvas and name it Menu if you like, then head to the “Materials” tab and the “Text” sub-tab.

Create two new texts that say “Stage 1″ and “Stage 2″ respectively. After that, go to the “Switches” sub-tab and create two new switches named “Stage 1″ and “Stage 2″. Now head to the “Menus” tab.

Create a new menu and call it “Stage Select”. Head to the “Menu Parts” sub-tab. Hit create, and make a new Cursor. Call it “Stage Select”. Don’t forget to give it the invisible graphic. Now head to the “Items” sub-sub-tab. Create two new items and again name them “Stage 1″ and “Stage 2″. Give them the invisible graphic too. Under “Status” you’ll notice that there are four choices: “Normal”, “Selecting”, “Disable”, and “Hot Track”. Click on “Selecting”, and just below the “Status” window you’ll see things like “Center Point Adjustment”, “Angle Adjustment”, “Luminance Adjustment”, and “Scale Adjustment”. For “Luminance Adjustment” turn down all the colors except red. Don’t turn down the very top slider though because that is for transparency. This will make it so that when our stages are being selected, the highlighted one will be red and the non-highlighted one will be white.

Now go to the “Item-Specific Functions” sub-sub-tab. Set up your “Text Display (Effective Only When Placing Menu Parts)” for each stage. Then scroll down to “Memories And Switches That Change After Use” and set it up so each stage turns on their respective switch. Now head back to the “Menus” sub-tab and place our two items and our cursor. I set mine up so that Stage 1 was in the middle of the screen and just a bit high, and Stage 2 was just a bit low giving me a vertical menu choice. You can do horizontal though too if you prefer.

Now pull up the detailed menu by hitting the arrow in the lower right corner. Head to the “Setting A Cursor Group (The Cursor & Linked Selectable Items)” tab. Like with our pause cursor from the last tutorial we need to add both of the stage options to this cursor group. Once you’ve done that go down a bit to the controls. I have it set like this:

Up = -1
Down = 1
Left = 0
Right = 0
OK = B
Cancel = None

If you wanted to do a horizontal menu you’d set Left as -1 and Right as 1, and Up/Down would both be 0. Don’t forget to also go to the “Items” tab here and set it up so that Stage 1 and Stage 2 are both using your preferred font like we did with our pause items.

Now our menu has been built. We need to apply it to our Menu canvas though! So head to the “Shooting” tab and the “Canvases” sub-tab. Select our Menu canvas that we made at the beginning of this tutorial and head to the “Per Canvas Settings” sub-sub-tab. You need to set “The Menus To Be Displayed” to our stage select menu, and you have to set tiles for it as well so just go with the land tiles we made. Now head to the ominous “Flow” tab.

A lot of people (myself included) are intimidated by the “Flow” tab at first, but once you learn how it works it’s really an amazing tool for designing how your game works and honestly I love it. Plus it is a lot easier than it looks. So what you should see here right now is a big green bar that says “Start” and has an arrow pointing to our “Level 01″. Our goal right now is to make the flow chart go from “Start” to “Menu” and have “Menu” go to both “Level 01″ and “Level 02″. So grab the little yellow box that the arrow is coming out of, and drag it over to our Menu canvas. Then grab the black box with the sparkle that is attached to Menu and drag it to Level 01, then use the same box on Level 02. After you’ve done this click on the Menu canvas and you’ll see new options appear in the “Branch Destination Canvases” menu. What you want to do here is set it up so that you go from Menu to Level 01 and Level 02 when their respective switches are turned on.

That’s it! You’ve successfully created a menu with two choices. Have fun creating more and more options and menus in your games!

Ready to start your own game in IGM? Purchase IGM at a 10% discount using the coupon code igmakerohyeah. Any questions, comments? Ask them in the comment section below.

0 comments… add one

Leave a Comment