SimpleText UI Example

This UI will allow you to create a text based menu system, you can see an example below:

Setup SimpleText UI

The code is available on GitHub, use the link below to download it from GitHub:

https://github.com/A1rPun/MonoGame.SimpleTextUI

The only file you need is the SimpleTextUI.cs, with your project open, click on project and select a new class. Copy the contents of the SimpleTextUI.cs over the newly created class. If you have several lines underlined in red, you will need to make sure the using section for the new class includes using System;

Adding to your Game1.cs

You will need to add a reference to the new class in the using section of Game1.cs. So add the following:

using A1r.SimpleTextUI;

Now, we need to declare the following variables, add them after SpriteBatch spriteBatch;:

        SimpleTextUI menu;
        SimpleTextUI options;
        SimpleTextUI current;

        SpriteFont big;
        SpriteFont small;

        Timer keytimer;

In the Initialize method we should make the screen fullscreen, we will then toggle this in the options menu. So add the following:

graphics.IsFullScreen = true;
graphics.ApplyChanges();

Now in the LoadContent method we will setup the menus, firstly we need to load in the fonts:

big = Content.Load<SpriteFont>("Big");
small = Content.Load <SpriteFont>("Small");

Now below this we need to define the main menu screen and the options screen:

            // Set menus and screens
            menu = new SimpleTextUI(this, big, new[] { "Play", "Options", "Credits", "Exit" })
            {
                TextColor = Color.Purple,
                SelectedElement = new TextElement(">", Color.Green),
                Align = Alignment.Left
            };

            options = new SimpleTextUI(this, big, new TextElement[]
            {
                new SelectElement("Video", new[]{"FullScreen","Windowed"}),
                new NumericElement("Music",1,3,0f,10f,1f),
                new TextElement("Back")
            });

Finally we need to set the starting screen to the menu, and we will also need a timer to block input for a period of time after an input is accepted:

current = menu;

keytimer = new Timer();

In order to draw the menu we need to add the following into the Draw method of Game1.cs:

current.Draw(gameTime);

Making it work

We need to add some logic code into the update method to actually make the menu system work. This is an example, it firstly gets the keyboard state and the bool change will be used to start the timer when a change is made. This will prevent a key registering more than once. The if statement will ensure that if the timer is running no input will be processed. Finally if a change has been made we start the timer. Copy this code into the Update method of Game1.cs:

            KeyboardState keys = Keyboard.GetState();
            bool change = true;

            if (!keytimer.Enabled)
            {
                if (keys.IsKeyDown(Keys.Up))
                {
                    current.Move(Direction.Up);
                }

                else if (keys.IsKeyDown(Keys.Down))
                {
                    current.Move(Direction.Down);
                }
                else
                    change = false;

                if(change)
                {
                    keytimer = new Timer();
                    keytimer.Interval = 200;
                    keytimer.Elapsed += new ElapsedEventHandler(OnTimedEvent);
                    keytimer.Enabled = true;
                }
            }