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 :

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 thisstring to change the font that will be imported.

-->

<FontName>Arial</FontName>

<!--

Size is a floatvalue, measured in points. Modify thisvalue 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 :

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.