Tutorial 10 : Creating the GUI (Part 1)

Sorry for the delay in tutorials, but real life got in the way again. In this tutorial we are going to make a start on our games interface, the interface I'm going to show you how to make is going to be incredibly simple for now.

By the end of this tutorial we will have a toolbar that runs along the bottom of our game window that will show the player some useful information.

So, let’s begin! The first thing that we are going to do is to make our game window a bit longer so we can fit our toolbar along the bottom. Find the Initialize method in “Game1.cs” and make the following change :

// The width of the level in pixels

graphics.PreferredBackBufferWidth = level.Width * 32;

// The height of the toolbar + the height of the level in pixels

graphics.PreferredBackBufferHeight = 32 + level.Height * 32;

As you can see all we are doing here is stretching the window a bit. If you ran the game now in it’s current state you should see a blue gap at the bottom of the window, and if you try and click on it it will throw an error : “Index was outside the bounds of the array.” Let's fix that now, go to “Level.cs” and find the GetIndex method. We need to change the if statement so it looks like this :

// It needed to be Width - 1 and Height - 1.

if (cellX < 0 || cellX > Width - 1 || cellY < 0 || cellY > Height - 1)

    return 0;

If you run the game again now and try clicking in the gap no error should be thrown now! Now that’s out of the way, we can add some new assets to our game. Firstly add this texture to our Content Project :

I know it’s not very inspiring to look at, but that’s programmer art for you . Next we are going to add a Sprite font to our project, to do this right click in the Content Project and click Add –> New Item and select the Sprite Font option, call it “Arial.spritefont” and press ok.

We are now going to alter some of the font’s properties, so go ahead and open up “Ariel.spritefont” and change the font name to Arial ( or whatever font you like to use ), then change the size to 9, then find where it says Style and change it from Regular to Bold.

<!--

Modify this string to change the font that will be imported.

-->

<FontName>Arial</FontName>

<!--

Size is a float value, measured in points. Modify this value to change

the size of the font.

-->

<Size>9</Size>

<!--

Style controls the style of the font. Valid entries are "Regular", "Bold", "Italic",

and "Bold, Italic", and are case sensitive.

-->

<Style>Bold</Style>

And that’s it, we have all of the assets that we will need to draw our toolbar. So let’s actually draw it! Add an new folder to the project called GUI and in it add a new class called “Toolbar.cs”.

Now we need to add a few fields that will store a texture that we will use to draw the tool bar and one to store our font. We also need two store two vectors that describe where to draw the toolbar and where to draw our text.

private Texture2D texture;

// A class to access the font we created

private SpriteFont font;

// The position of the toolbar

private Vector2 position;

// The position of the text

private Vector2 textPosition;

Next we need to add a constructor to our class :

public Toolbar(Texture2D texture, SpriteFont font, Vector2 position)

{

    this.texture = texture;

    this.font = font;

    this.position = position;

    // Offset the text to the bottom right corner

    textPosition = new Vector2(130, position.Y + 10);

}

It is a pretty standard constructor with the only thing worth noticing is the bottom line where initialize the textPosition field. If you are wondering where 130 and 10 came from, these are just numbers I picked after playing around with the position of the text, you can set these to anything you want to change the position of the text.

The last thing we are going to add to this class for now is a draw method :

public void Draw(SpriteBatch spriteBatch, Player player)

{

    spriteBatch.Draw(texture, position, Color.White);

    string text = string.Format("Gold : {0} Lives : {1}", player.Money, player.Lives);

    spriteBatch.DrawString(font, text, textPosition, Color.White);

}

Notice that we pass in a reference to the player class so that we can access how many lives he has left and how much gold he has so we can draw that on our toolbar.

Right, that’s it for our toolbar class finished for now, we will come back to it in later tutorials to add some buttons! For now though go back to “Game1.cs” and add the following field :

Toolbar toolBar;

Now let’s go to the LoadContent method and load in the texture and font we added in earlier and use them to initialize our toolbar :

Texture2D topBar = Content.Load<Texture2D>("tool bar");

SpriteFont font = Content.Load<SpriteFont>("Arial");

toolBar = new Toolbar(topBar, font, new Vector2(0, level.Height * 32));

Finally, all that’s left to do is draw our tool bar so go to the Draw method and add the following just before we end the sprite batch :

toolBar.Draw(spriteBatch, player);

Now when you run the game the blue gap at the bottom of our window should be replaced with our shiny new toolbar! Next time we will be adding some buttons to our toolbar.

Here is the source code for this tutorial