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.

  • 1
    \$\begingroup\$ If you want a GUI library with buttons, checkboxes, and the like check out nuclexframework.codeplex.com or xnagui.codeplex.com. \$\endgroup\$ – ClassicThunder Apr 26 '12 at 17:12
  • \$\begingroup\$ Are these free to use? \$\endgroup\$ – Slateboard May 11 '12 at 19:49
  • \$\begingroup\$ As a disclaimer xnagui.codeplex.com is mine and it uses the MIT license so go ahead and do what ever with it except claim it as your own IP. Nuclex uses Common Public License Version 1.0 which seems to allow you to use it in commercial software. \$\endgroup\$ – ClassicThunder May 12 '12 at 4:58

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);


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


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


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(activeItem <0)
        activeItem = menuEntries.Count - 1; //if he was at the top and pressed "UP", loop the pointer to the end 

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


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.

| improve this answer | |

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

| improve this answer | |
  • \$\begingroup\$ I also once found a small library which let you use winform elements in your xna code, but I can't find the source of this so I didn't put it in the answer. Searching around may yield you some results. \$\endgroup\$ – OriginalDaemon Apr 26 '12 at 15:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.