Captain's Dev Journal 02: Console style menu screen

This forum is currently in read-only mode.
From the Asset Store
A well commented template with list menus and shops to use in your top-down RPGs or metroidvania games!
  • [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.

    <img src="http://www.strouperman.com/Special/SFG/titlescreen.jpg">

    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

  • Very useful step-by step tutorials!

    Keep up the great work!!

  • 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.

  • 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:

    <img src="http://i28.tinypic.com/2l8aed5.png">

    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.

  • 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.

  • 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.

  • 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.

  • 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.

  • 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.

  • Nice! Can't wait to read it.

  • Yeah, thanks for posting tutorials and info, we need more docs in general, especially on the Wiki.

    Also, it's probably not worth the effort worrying about what votes you get. For example, we got lots of 1 votes for Construct on various download sites. It happens. Welcome to the internet. If someone can, they will

  • Hello i am a new user, and i would like to tell you that this is a very usefull tutorial for me, and now i know a little thing more, so i hope please, you go on with this tutorials for newbies.

    sorry about my english, i am from Spain and don't speak and writte very well.

    thanks a lot!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Very nice tutorial Capt'n. Nothing I couldn't have done myself being a more experienced "klicker" but certainly very clear-cut and well worded for beginners. Good job indeed! Kind of makes me want to write some simple tutorials for things now lol... not that I have the time!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)