Tutorial 11 : Creating the GUI (Part 2)

In this tutorial we will be adding a generic button class to our project, and then we will be using this class to add buttons to our toolbar. We will keep this button class a general as possible so it can be re-used throughout the project.

The first thing we are going to do is add a new class in the GUI folder called “Button.cs” and make it inherit the Sprite class. Before we add anything to this class though, we are going to create a new enum just above it :

/// <summary>
/// Describes the state of the button.
/// </summary>
public enum ButtonStatus
{
 Normal,
 MouseOver,
 Pressed,
}

/// <summary>
/// Stores the appearance and functionality of a button.
/// </summary>
public class Button : Sprite
{

}

Note : The reason the enum is called ButtonStatus is to avoid confusion with the XNA enum called ButtonState.

This enum gives us a way to define what the button should like in certain conditions. There are 3 different states the button can be in :

Normal : This is the default state of the button – the button is in this state when the mouse is not hovering over the button and the button has not been pressed.

MouseOver : The button is in the state when the player has the mouse hovering over the button and is not holding down the left mouse button.

Pressed : The button is in the state when the player has the left button held down while hovering over the button.

Right, let’s makes a start on the actual button class! The first thing we are going to add is some fields :

// Store the MouseState of the last frame.
private MouseState previousState;

// The the different state textures.
private Texture2D hoverTexture;
private Texture2D pressedTexture;

// A rectangle that covers the button.
private Rectangle bounds;

// Store the current state of the button.
private ButtonStatus state = ButtonStatus.Normal;

These fields should explain themselves, so I'm just going to move onto the constructor :

/// <summary>
/// Constructs a new button.
/// </summary>
/// <param name="texture">The normal texture for the button.</param>
/// <param name="hoverTexture">The texture drawn when the mouse is over the button.</param>
/// <param name="pressedTexture">The texture drawn when the button has been pressed.</param>
/// <param name="position">The position where the button will be drawn.</param>
public Button(Texture2D texture, Texture2D hoverTexture, Texture2D pressedTexture, Vector2 position)
 : base(texture, position)
{
 this.hoverTexture = hoverTexture;
 this.pressedTexture = pressedTexture;

 this.bounds = new Rectangle((int)position.X, (int)position.Y,
     texture.Width, texture.Height);
}

This constructor takes in three different textures, each one controls the appearance of the different button states. We also initialize the bounds rectangle to fit around the button based on the buttons position and the sizes of the texture.

Next we are going to add in a method to update the state of the button :

/// <summary>
/// Updates the buttons state.
/// </summary>
/// <param name="gameTime">The current game time.</param>
public override void Update(GameTime gameTime)
{

}

The first thing we do in this method is get the current position of the mouse and check whether it is over the button :

// Determine if the mouse if over the button.
MouseState mouseState = Mouse.GetState();

int mouseX = mouseState.X;
int mouseY = mouseState.Y;

bool isMouseOver = bounds.Contains(mouseX, mouseY);

We then use this information to either change the button state to MouseOver or to change it back to Normal :

// Update the button state.
if (isMouseOver && state != ButtonStatus.Pressed)
{
 state = ButtonStatus.MouseOver;
}
else if (isMouseOver == false && state != ButtonStatus.Pressed)
{
 state = ButtonStatus.Normal;
}

Lastly we check whether the player pressed the mouse while it was over the button, and then if he let it up again while the mouse was still over the button :

// Check if the player holds down the button.
if (mouseState.LeftButton == ButtonState.Pressed &&
 previousState.LeftButton == ButtonState.Released)
{
 if (isMouseOver == true)
 {
     // Update the button state.
     state = ButtonStatus.Pressed;
 }
}

// Check if the player releases the button.
if (mouseState.LeftButton == ButtonState.Released &&
 previousState.LeftButton == ButtonState.Pressed)
{
 if (isMouseOver == true)
 {
     // update the button state.
     state = ButtonStatus.MouseOver;
 }

 else if (state == ButtonStatus.Pressed)
 {
     state = ButtonStatus.Normal;
 }
}

previousState = mouseState;

The next method we are going to add is one that is responsible for drawing the button :

/// <summary>
/// Draws the button.
/// </summary>
/// <param name="spriteBatch">A SpriteBatch that has been started</param>
public override void Draw(SpriteBatch spriteBatch)
{
 switch (state)
 {
     case ButtonStatus.Normal:
         spriteBatch.Draw(texture, bounds, Color.White);
         break;
     case ButtonStatus.MouseOver:
         spriteBatch.Draw(hoverTexture, bounds, Color.White);
         break;
     case ButtonStatus.Pressed:
         spriteBatch.Draw(pressedTexture, bounds, Color.White);
         break;
     default:
         spriteBatch.Draw(texture, bounds, Color.White);
         break;
 }
}

We draw a different texture depending on what state the button is in.

And that’s the button class finished for now, we will come back to it later to add in events.

Before we add a button to our toolbar we will need to add some new images to our project. Download the images I uploaded at the start of the tutorial and then add them into a new folder called GUI in the Content Project. I know these aren't the greatest images in the world but they’re the best my art skills can create!

Now we are ready to add a button to our toolbar, go back to “Game1.cs” and add a field for a button :

Button arrowButton;

Next we need to load in our button textures and pass them to our button, add the following to LoadContent :

// The "Normal" texture for the arrow button.
Texture2D arrowNormal = Content.Load<Texture2D>("GUI\\Arrow Tower\\arrow button");
// The "MouseOver" texture for the arrow button.
Texture2D arrowHover = Content.Load<Texture2D>("GUI\\Arrow Tower\\arrow hover");
// The "Pressed" texture for the arrow button.
Texture2D arrowPressed = Content.Load<Texture2D>("GUI\\Arrow Tower\\arrow pressed");

// Initialize the arrow button.
arrowButton = new Button(arrowNormal, arrowHover,
 arrowPressed, new Vector2(0, level.Height * 32));

All that’s left is to update and draw the button; in the Update method update the button :

//Update the arrow button.
arrowButton.Update(gameTime);

And in the Draw method, just after you draw the toolbar, draw the button :

// Draw the tool bar first,
toolBar.Draw(spriteBatch, player);
// and then our buttons.
arrowButton.Draw(spriteBatch);

Hit the F5 key and you will see our new button being drawn in the bottom left corner of our game window, and you should find it is fully interactive with your mouse!

So now that we have the button drawn and animated there’s just one thing missing… the ability to detect when the player has clicked the button, let’s go back to “Button.cs” and solve this now.

Add a new event to the class just under where we define the fields :

// Gets fired when the button is pressed.

public event EventHandler Clicked;

Note : For more information on events see http://msdn.microsoft.com/en-us/library/aa645739(v=vs.71).aspx

All that’s left to do is fire this event when the user clicks so find the Update method and find the code that deals with when the player releases the button. This is where we fire our event :

// Check if the player releases the button.
if (mouseState.LeftButton == ButtonState.Released &&
 previousState.LeftButton == ButtonState.Pressed)
{
 if (isMouseOver == true)
 {
     // update the button state.
     state = ButtonStatus.MouseOver;

     if (Clicked != null)
     {
         // Fire the clicked event.
         Clicked(this, EventArgs.Empty);
     }
 }

 else if (state == ButtonStatus.Pressed)
 {
     state = ButtonStatus.Normal;
 }
}

We first check if the event is null, or in other words if anything attached itself to the event, and, if it has, we fire the event.

And that’s our button class finished for good! All that we have left to do is to attach our button to a method that when called, will allow the player to create a new arrow tower.

To do this we need to go back to “Game1.cs” and find where we initialized the button in the LoadContent method. Just under that we will hook up our event to a new method :

arrowButton.Clicked += new EventHandler(arrowButton_Clicked);

Now we need to add a new method called arrowButton_Clicked that will be called by the event :

private void arrowButton_Clicked(object sender, EventArgs e)

{
 player.NewTowerType = "Arrow Tower";
}

When this method is called it tells the Player class that the player wants to build a new Arrow Tower, the only problem with this code is, the Player class doesn’t have a property called NewTowerType, let’s go to “Player.cs” now and add one :

// The type of tower to add.
private string newTowerType;

public string NewTowerType
{
 set { newTowerType = value; }
}

Now that we know what tower we want to build, we need a way to act on this information and create a new tower for the player, lets add a new method to handle this :

/// <summary>
/// Adds a tower to the player's collection.
/// </summary>
public void AddTower()
{
 Tower towerToAdd = null;

 switch (newTowerType)
 {
     case "Arrow Tower":
     {
         towerToAdd = new ArrowTower(towerTexture,
             bulletTexture, new Vector2(tileX, tileY));
         break;
     }
 }

 // Only add the tower if there is a space and if the player can afford it.
 if (IsCellClear() == true && towerToAdd.Cost <= money)
 {
     towers.Add(towerToAdd);
     money -= towerToAdd.Cost;

     // Reset the newTowerType field.
     newTowerType = string.Empty;
 }
}

What this method does is it checks what type of tower the player wants, and initializes one based on that information. It then checks if there is a space for that tower and also if the player can afford it, and if they can, we add the new tower to the game, charge the player for it, and reset the newTowerType field.

All that’s left to now is to go to the Update method and find the code that used to create tower’s for the player :

if (mouseState.LeftButton == ButtonState.Released

    && oldState.LeftButton == ButtonState.Pressed)
{
 if (IsCellClear())
 {
     Tower tower = new Tower(towerTexture, new Vector2(tileX, tileY));
     towers.Add(tower);
 }
}

And replace it with our new method of creating towers :

if (mouseState.LeftButton == ButtonState.Released

    && oldState.LeftButton == ButtonState.Pressed)
{
 if (string.IsNullOrEmpty(newTowerType) == false)
 {
     AddTower();
 }
}

We’re finished! Hit the F5 key and try clicking on a clear space, you should find that no tower is created, however if you click the tower button first and then click a space you should find that a new tower is created and you should also see that the player’s money goes down.

Here is the source code for this tutorial.

Note : As I see it, there is only one more tutorial left in this series which will contain a small bug fix and a small addition to the GUI. However if you have any suggestions for any more tutorials in the series feel free to tell me then and I will see what I can do.