The Legend of the Tomato Quest Tutorial - User Interface

The User Interface
To begin with the user interface we will need a new source file to help spread out our code.

Create a new source file called UserInterface.cs and include the following code inside it:

Nothing spectacular here, its just the foundation from which we'll craft the user interface from.

Now before we proceed, there are some new media files we need to add. Save the following Images to your Resources\Images folder in your project.

<-

<-

<-



These will be used for our user interface, health and mana bars.

Adding the new media files
Once you've put those images above in the Resources\Images folder of your project. We need to actually add them into our code.

Add the following lines to the LoadImages method inside the Resources class within the GameResource.cs source file.

Adding these lines will make the new images available to us within our game.

But there is also one final modification to Resources we need to make. We need to make a new font for a User Interface.

Add the following line of code to the LoadFonts method inside the Resources class within the GameResources.cs source file.

Now we have a new font called Arial and SmallCourier, which will be used in our user interface. We've also set the font style of SmallCourier to Bold.

Drawing the Health Bar
Add the following method to the UserInterface class inside UserInterface.cs

This new method takes a Character, and the first thing it does it draw the Health Vial in the top left corner of the screen twice, once for health, once for mana. The health vial is the border for our health and mana bars to go into.

The next section of code calculates how much health and maga the character has our of his total possible health and mana, giving us a percentage for each, so we can draw that percentage as health and mana bars.

Finally we use a for loop that starts from 0 and goes until the percentage found by the previous block of code, and draws the Health bar, so that it goes only as far as it should. E.g. if the character has 70% of his health remaining, the health bar should only go 70% along the Health Bar, same goes for Mana

We've also got some text being drawn over the top of the Health and Mana bars to improve the Usability.

Drawing the Overlay
We need draw on overlay before we show the stats from the previous tutorial.

Add the following method to the UserInterface class inside UserInterface.cs source file.

This method is simple, all it does it draw the overlay, when the method itself is called.

Drawing the Stat Page
The biggest part of this particular tutorial is to draw the stats page.

But before we start we need to add a Boolean at the top of our UserInterface class to let the program know, when to show the Stat Page and when to hide.

Add the following field into the UserInterace class.

Now with that done, we can move onto drawing our stat page.

Add the following methods to the UserInterface class, inside the UserInterface.cs source file.

This methods are fairly long, but not too complicated.

The first method ToggleStatPage, is basically just switching whether the stat page should be shown or hidden. Whenever we call this method, the state of the page is changed. So if it was hidden, and we called ToggleStatPage, the stat page will be shown. This is really convenient.

Next, to the larger method DrawStatsPage, this method takes a Character, since we'll be using his attributes and stats, but also we'll be adding stats through this interface.

Firstly we have an if statement that checks if the _statPage boolean is set to true, and if so, it proceeds with the routine, if not, the routine goes to end, and exits. This is why we need the ToggleStatPage method.

After that, the first thing we do is DrawOverlay, which draws the background Overlay for our stat page. Next we write some text at the top of the page saying "Stats", which will be used as the heading.

The next section of code deals with the drawing of the Level and Experience stats. Nothing complicated.

Next we have the basic attributes, Strength, Agility, Vitality, Intelligence and Luck which are being written.

The next block of code, checks if the player has more then 0 stat points, and if so, draws some boxes with + signs in the middle of those boxes, and places them next to the basic attributes, Strength, Vitality and Agility. Then we have an if statement, that checks if the player has clicked his left mouse button, and then it checks if the mouse coordinates are within one of the boxes that we drew before.

If the mouse coordinates are inside one of the boxes, and the user did click his left mouse button, depending on which box he clicked, it will add a stat point for the stat, the box he clicked is next to.

As you may remember, the AddStat method goes and adds a stat, and subtracts a stat point from the Character.

This is all used so that each time the player grows a level, he can go into this Stat Page, and add some stats to make his Character more powerful.

The last section of the code, simply draws the other stats, like Attack and Defense.

Running the User Interface
Lastly, we need a routine that will run our User Interface during the main loop.

Add the following method to the UserInterface class inside UserInterface.cs source file.

This method is fairly straight forward, it checks to see if the space bar has been hit, and if so, Toggles the stat page on and off.

And the rest is drawing the Health Bar and Stats Page.

Final Touches
Now all we need to do is add the Interface to the Game.

Add the following field to the Game class in Game.cs

This will load the user interface when we create the game.

Next add the following lines of code to the Run method in the Game class of the Game.cs source file

Now our Characters Stats will update every frames, and we have a message that tells the player to hit the s key to access the stat page.

Here's a Screen shot of what the health bar, and help message should look like.



And Here's a Screen shot of the new Stat Page



Project so far
The source files for this section of the Tutorial can be found [[Media:RPGTutorial5.zip|Here]]

I strongly suggest you follow the tutorial while looking at the source code, it will help you better understand the structure of the game and where to put all the new methods and classes.