Friday, 17 December 2010

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 :

tool bar

I know it’s not very inspiring to look at, but that’s programmer art for you Winking smile. 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.
Size is a float value, measured in points. Modify this value to change
the size of the font.
Style controls the style of the font. Valid entries are "Regular", "Bold", "Italic",
and "Bold, Italic", and are case sensitive.

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


  1. This comment has been removed by the author.

  2. In my project, the topbar is less then Width.
    But, the lenght, map, etc.. is equal oO'.

    1. A little late, but better than never...

      Replace the spriteBatch.Draw call in Toolbar.Draw with:
      spriteBatch.Draw(texture, new Rectangle((int)position.Y,(int)position.X,spriteBatch.GraphicsDevice.Viewport.TitleSafeArea.Width,32),Color.White);

      Should do the trick :)

    2. What I did was just click the image then save the image that is by itself on the next page, it is long enough to fill up the space with no blue space left over.

  3. I have an error for my loadContent method The type or namespace name 'Toolbar' could not be found (are you missing a using directive or an assembly reference?)

    I added a new GUI folder in content and put the class in that folder.

    1. At the top of your class for the UI you will have to alter the namespace, as putting the class into a folder adds an extra location to the name space so it would be TDWindows.UI so if you remove the .UI off it will work fine.

  4. how do I make the Round Number show aswell?
    Lovely tutorial btw!

  5. this is what I have right now to do that:

    string text = string.Format("Gold: {0}, Lives: {1}, Wave Number: {2}, \nWave Timer: {4} Seconds, Time to Next Wave: {3}.", player.Money, player.Lives, waveManager.RoundNumber, waveManager.TimeToNextWave, waveManager.TimerLength);

    you just have to make some properties in wavemanager to allow access to what isn't already available that you want,

    and in the draw call of ToolBar.cs you allow it to take in a reference to the wavemanager as well as player.