• How to make a menu system

  • Tutorials on how to use and create games in XNA.
Tutorials on how to use and create games in XNA.
 #62560  by reececlarke
 Sun Feb 05, 2012 2:19 pm
this is my 2nd xna tut and i am going to show you how to make a menu system i made my self and used it in my pong game.

the menu system is not the best and could be improved but it works for what i use it for

so to start off with we need to add the variables we will be working with these are
Code: Select all
int gamemode, menusec;
SpriteFont title, optionone, optiontwo;
Keyboardstate newkey, oldkey;

after you have added that under the public class Game1 : Microsoft.Xna.Framework.Game
{ we can start to use them

the gamemode will tell us if we are in the menu or in the game we can e.g 0 == game 1 == menu 3 == submenu in the menu and so on.

menusec is what option in the menu is selected e.g 0 == new game 1 == exit game 2 == settings 4 == anything else you want.

and the sprite fonts are the fonts we will be using in the game to tell the user what they are picking


so to start off right click the content and make 3 fonts and edit them to how ever you like.

then under protected override void LoadContent()
{
Code: Select all
title = Content.Load<SpriteFont>("title");
optionone = Content.Load<SpriteFont>("optionone");
optiontwo = Content.Load<SpriteFount>("optiontwo");


newkey = Keyboard.GetGtate();
oldkey = Keyboard.GetState();
gamemode = 0;
// if you want it to start in the menu change it to 1



here we are loading the fonts into the game so we can use them later on.


right here is where we get the main bit of it.


under protected override void Update(GameTime gameTime)
{
type
Code: Select all
if(newkey.IsKeyDown(Keys.Down) && oldkey.IsKeyUp(Keys.Down) && gamemode == 1)
{
menusec += 1;



//// this bit of code see's if the down key has been pressed and that last time the key was up this stops it spazzing out when you press a key down meaning you own got down the menu one and not right to the bottom of it next when you pressed it adds one to the menusec number and as the option = 1 is below the option = 0 it selects the 2nd one meaning later on in the draw method we will make it go yellow.
};
// now time to make it go up
if(newkey.IsKeyDown(Keys.Up) && oldkey.IsKeyUp(Keys.Up) && gamemode == 1)
{
menusec -= 1;
// this does almost the same as the one before but this time it - 1 from menusec each time you press it and as 0 is higher then 1 it will go up one
};

// here we will make it so that if the highest option is selected it will not go off the menu it will just go to the bottom or top of it.


if(menusec < 0)
{
menusec = 1;

};

if (menusec > 1)
{

menusec = 0;
};

this makes it so that if you press up on the max option it will go to the bottom option and if you press down on the bottom option it will go to the top option. with more on you menu you will need to change it to suite your needs.


// we will also need to make it so that they can change gamemodes
if(newkey.IsKeyDown(Keys.Escape) && oldkey.IsKeyUp(Keys.Escape))
{
if(gamemode == 1)
{
gamemode = 0;
};

if(gamemode == 0)
{
gamemode = 1;
};
// this says if the gamemode is one then turn the menu off if they gamemode is 0 then turn the menu on
};

// now what we need to do is do something when some one presses enter in the menu

if(newkey.IsKeyDown(Keys.Enter) && oldkey.IsKeyUp(Keys.Enter))
{
if(menusec == 0)
{
// if someone selects the first option what ever is in here will happen

};
if menusec == 1)
{

// if any one selects the 2nd option what ever is in here will run


};

// you can add as much of them as you like if you have the space on screen and have done all of the other stuff needed.

};



// and last but not least we add the
oldkey = newkey;
// we do this last so that it updates last meaning that if you where to press it with the over the if(key ... it would spazz out but if its under it will not.






now what we need to do is go down to the bit where it says

protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.Black);

in this part we will make a if statement for each menu or game screen in the game so if gamestate = 0 then this would be ingame but if it was = 1 we would be out of game and vice versa .

Code: Select all

SpriteBatch.Begin();


if(gamestate == 0)
{

// this is where your ingame stuff would be i am not going to cover how to make a game but this is where anything you have made for your game would go.


};

if(gamestate == 1)
{
// this is the main menu so lets get started
SpriteBatch.DrawString(title,("Main Menu"),(graphics.PreferredBackBufferWidth / 2 -90,0), Color.White);
// this bit of code uses the title font we made and makes the title in the middle of the screen as we used the graphics.PreferredBackBufferWidth and divided it in half meaning that we got the middle of the screen and then we took 90 away from that so that it did not go off the edge of the screen if we used a big font size you may want to edit the 90 to your likeing or add onto it if you like. also the Color.White made the text white edit the colour if you like.

// here is where we do the options 


if(menusec == 0)
{
SpriteBatch.Drawstring(optionone,("Option One"),(graphics.PreferredBackBufferWidth/2, 100),Color.Yellow);

};
if(menusec > 0)
{
SpriteBatch.Drawstring(optionone,("Option One"),(graphics.PreferredBackBufferWidth/2, 100),Color.White);
};
// this makes our first option turn yellow if it is picked any other time it will just be white.

if(menusec ==1)
{
SpriteBatch.Drawstring(optiontwo,("Option Two"),(graphics.PreferredBackBufferWidth/2, 150),Color.Yellow);

};
if( menusec > 1)
{
SpriteBatch.Drawstring(optiontwo,("Option Two"),(graphics.PreferredBackBufferWidth/2, 150),Color.White);
};
if(menusec < 1)
{

SpriteBatch.Drawstring(optiontwo,("Option Two"),(graphics.PreferredBackBufferWidth/2, 150),Color.White);
};

// for this one we also have to say if the option is less then it be white as they could be a option selected that has a value less then this last time it was 0 and they would not be any value less than it.




};
SpriteBatch.End();


i think this is all that you need to do i hope so lol so yeah i hope this helps you as i said its not the best as i did make this my self and i know in some ways the code could be cutdown but this works the best for me.

likes always help so if this helped you please give me a like =] thanks =P
 #69356  by Livengood
 Sat Jun 30, 2012 8:35 am
Great tut on game state could do more in depth xD, but its more of a beginners control of the menu system that no one like to get down :). Ill have to share my game that i have like 60% done