Captain's Dev Journal 02: Console style menu screen

Post your own tutorials, guides and demos.

Post » Sat Mar 22, 2008 1:47 am

[EDIT: New source file (v0005), added comments to source]

While I wait for Construct's animation system to be upgraded to the point I can resume working on my test level, I figure I'll step ahead and go through the process of creating a menu screen.



Most of the times I see MMF and Construct apps, the title screen requires a click of the mouse. While this is fine, it doesn't lend itself well to more traditional games that required arrow and button key navigation. So let's make one.

The thing we have to get through our heads is that when we make a selection system, we're often times not working with the objects themselves. We work with variables, and the variables control everything. To set ourselves up for this, we need a local object to carry the variable that will control the menu. In this case, I chose the sprite that contains the game's logo. We'll set up a private variable in it called "Selector" with a default value of 1.

Now we have to determine which functions our variables can't or shouldn't control. The only thing I can really think of is the little chime sound that comes when you press up or down. So, we'll load that function onto the controls themselves.

To make our controls, we have to give them limits. We don't want our variable to go outside of the number of items in our menu. In my menu, there are five choices. This into account, and with our sound events, the events needed are as follows:

///
Mouse&Keyboard: On "Move Down" pressed.
Logo: Value 'Selector' is less than 5.
> Logo: Add 1 to 'Selector'.
> DirectSound: Autoplay wav file.;

Mouse&Keyboard: On "Move Up" pressed.
Logo: Value 'Selector' is greater than 1.
> Logo: Subtract 1 from 'Selector'.
> DirectSound: Autoplay wav file.;
///

Next we need some way of indicating which item is currently selected. Though I'm sure you can be more creative, I'm going to use Construct's useful FILTER feature to tint my menu selection red.

Much like in my last journal, I'm going to opt for a brute force method. The smartest way of going about handling multiple objects at a time is with either containers or families, but seeing as how I don't really trust those features yet (forgive me, Ashley!) and especially since families cause problems with Vista as of this writing, they hold no benefits opposed to just adding a few more lines of code than normal.

I should note, of course, that using families would make adding items to the menu easier in the future. Oh well.

///
Logo: Value of 'Selector' is equal to 1.
Trigger once while true.
>MenuItem1: Set filter to Red.
>MenuItem2: Set filter to White (none).
>MenuItem3: Set filter to White (none).
>MenuItem4: Set filter to White (none).
>MenuItem5: Set filter to White (none).;

Logo: Value of 'Selector' is equal to 2.
Trigger once while true.
>MenuItem1: Set filter to White (none).
>MenuItem2: Set filter to Red.
>MenuItem3: Set filter to White (none).
>MenuItem4: Set filter to White (none).
>MenuItem5: Set filter to White (none).;

[ect, ect until finished]
///

Finally, we need one event per menu item having to do with whatever key(s) will activate the choice. If there is any title screen music playing, we should also stop it at this point.

///
Mouse&Keyboard: On key "Enter" pressed.
Logo: Value 'Selector' is equal to 1.
>DirectSound: Pause music.
>DirectSound: Play wav file.
>System: Go to layout #.;

[ect, ect per choice]
///

As always I encourage you to reply with your own strategies on this topic. Especially reply if I made a glaring mistake in my own implementation.

Here are some source files for you to peruse.

The sound pack is optional. It is there to provide a complete experience if desired.

CAP FILE:
http://www.strouperman.com/Special/SFG/ ... _v0005.cap

SOUND AND MUSIC PACK:
http://www.strouperman.com/Special/SFG/SoundPack.zip
B
3
S
2
G
4
Posts: 310
Reputation: 2,120

Post » Sat Mar 22, 2008 9:42 am

Very useful step-by step tutorials!
Keep up the great work!!
B
2
S
1
G
5
Posts: 70
Reputation: 1,540

Post » Sat Mar 22, 2008 4:52 pm

Hey look, if somebody votes "no" in the above poll, at least give a reason. Is this guide incorrect? Is it too aimed at beginners? Or conversely, too hard to understand? Anything to help me better this is appreciated.
B
3
S
2
G
4
Posts: 310
Reputation: 2,120

Post » Sat Mar 22, 2008 5:13 pm

If I were to vote it'd be "no" but that's only because I just made a menu like this for my project about a week ago. Only instead of highlighting the menu options with color I used a pointer sprite:



Basically the same though :)

But I won't vote "no" because that would be rude. I'm sure this will be useful to some people.
Moderator
B
5
S
2
G
6
Posts: 4,348
Reputation: 10,971

Post » Sat Mar 22, 2008 5:16 pm

Ok i voted "no" becouse "Was this helpful to you?" sorry but it wasnt for me, yet its a good tutorial to make a menu in style like this.
B
4
S
2
G
4
Posts: 719
Reputation: 2,938

Post » Sat Mar 22, 2008 5:27 pm

Perhaps I should change the poll question in the future, then. After all, this edition wasn't certainly meant to wow any pros. As deadeye pointed out, perhaps some beginner would use this as a launch pad unto greater things.

At first, the "No" vote scared me that I might have given incorrect information in my post.
B
3
S
2
G
4
Posts: 310
Reputation: 2,120

Post » Sat Mar 22, 2008 5:31 pm

Sorry i scared you, but i just answered the question. Tutorial is realy good and everything explained perfectly but i already know this things so i voted "no".
Btw. I thought that Vote was to determin how much people know about Construct and how to use it.
B
4
S
2
G
4
Posts: 719
Reputation: 2,938

Post » Sat Mar 22, 2008 5:34 pm

I see the confusion now. No, my connotation was a bit different for that. In future editions, perhaps it will be "Rate this chapter's difficulty" or something like that. Now that I think about it, if there was a problem in the article someone would comment, and I would edit accordingly.
B
3
S
2
G
4
Posts: 310
Reputation: 2,120

Post » Sat Mar 22, 2008 5:36 pm

While it might not be terribly helpful to all users, don't be discouraged from posting tutorials like this. We need more stuff like this on the forums.

After Monday I'll be releasing my current project (my TIGSource competition entry) along with the .cap to anyone who's interested in it. I'll also make a thread going over a few of the tricks I used to make the game (like jump-through platforms and platform AI). It's almost complete, I pretty much just need to do the music and the level editing.
Moderator
B
5
S
2
G
6
Posts: 4,348
Reputation: 10,971

Post » Sat Mar 22, 2008 5:36 pm

Nice! Can't wait to read it.
B
3
S
2
G
4
Posts: 310
Reputation: 2,120

Next

Return to Your tutorials & example files

Who is online

Users browsing this forum: No registered users and 0 guests