How do I create selectable menu options in C#/XNA?

Question

Ok, I have my game's menu system set up. There are 3 screens (Controller Detect Screen, Title Screen, and GamePlay Screen). I wish to improve on this by having the ability for the player to select options on the screen, but I do not know how.

I don't know how to make menu choices that can be highlighted or making transitions from screen to screen rather than having it warp the way it presently does.

Answer 1

Take a look at the Game State Management sample that Microsoft provides. Not only does it contain screen transitions, but it shows how to "select" menu items. I included some pseudo code in each section below. Hopefully it will help you grasp what I am talking about.

Screen Transition

In a nutshell, you have a ScreenManager. Its job is to contain a list of the active screens and call the update/draw methods on them. When it is time to do a transition, an alpha blend is used to make the old screen fade out to black, and the new one to fade in. You can do any effect. Instead of fading maybe you make the slide away.

//In the GameScreen
// If the game is transitioning on or off, fade it out to black.
if (TransitionPosition > 0 || pauseAlpha > 0)
{
    float alpha = MathHelper.Lerp(1f - TransitionAlpha, 1f, pauseAlpha / 2);

    ScreenManager.FadeBackBufferToBlack(alpha);
}

//The ScreenManager lays over the alpha
public void FadeBackBufferToBlack(float alpha)
{
    Viewport viewport = GraphicsDevice.Viewport;

    spriteBatch.Begin();

    spriteBatch.Draw(blankTexture,
                        new Rectangle(0, 0, viewport.Width, viewport.Height),
                        Color.Black * alpha);

    spriteBatch.End();
}

Menu Items

This is a bit more simple then you may think. You have a list of menu items (let's pretend it is an array), and a pointer saying which item in the array is active - default it to zero for now. int ativeItem=0. Anytime the user presses up/down on the controller you increment/decrement the pointer. The MenuScreen can use this two determine what menu item to highlight. In the case of the sample linked above, I believe they also have it pulsate.

The MenuScreen is also the component that listens for the "activate" button. I will Assume it is the A button for now. When the A button is pressed, it checks to see which item in the list the activeItem pointer is on. It then does whatever is appropriate.

if(input.IsUpPressed)
{
    activeItem--;
    if(activeItem <0)
        activeItem = menuEntries.Count - 1; //if he was at the top and pressed "UP", loop the pointer to the end 
}

if(input.IsDownPressed)
{
    activeItem++;
    if(activeItem > menuEntries.Count - 1)
        activeItem = 0; //if he was at the bottom and pressed "DOWN", loop the pointer to the start 
}

if(input.IsAPressed)
{
    SelectMenuItem(activeItem);
}

Putting it together

Now, I explained this very quickly in a short post. It would behoove you to look at the example. Start with the Game.cs file to see how they create a ScreenManager.

Once you understand that (it is only a few lines of code) look at the GameScreen class next. It is a base class you each of your screen will need to override. The reason I am having you look at this first is because you will need to know how the ScreenManager is interacting with it.

Now that you get what properties & methods are in GameScreen look at ScreenManager. Take your time. There is a decent amount going on here. When you are finished look at the individual screens the have. There is a MenuScreen (you will like this one) and a GamePlayScreen where they have their logic for the current level in the game.

If you get stuck, just put a breakpoint in the code somewhere, run the game, and step through it line-by-line. If you get really stuck ask away here. There are plenty of us that would love to help.

Answer 2

Since you are a student you will be able to get a free version of ScaleForm which may help you out here. Scale Form FAQ - see question 2