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 :
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.
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.
Next we need to add a constructor to our class :
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 :
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 :
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 :
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.