Tutorial 14.5 : Drag and Drop Towers

As has been requested I have written another tutorial about the ability to “Drag and Drop” tower onto the level, at the end of the tutorial I will also discuss zooming and tower upgrades.




The first thing we will need to do is add a new event to the Button class; one which will fire when the player presses the button but doesn’t release the mouse. So go to Button.cs and just under the click event add the following event :

// Gets fired when the button is pressed.
public event EventHandler Clicked;
// Gets fired when the button is held down.
public event EventHandler OnPress;

Next go to the Update method and find the code that checks if the player is holding down the left mouse button, it will look something like this : 

// 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;
    }
}

Then just under where we set the state of the button add the following :

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

And that’s it for the button class, it really is that simple to add a new event to the class!

Now before we go to Game1.cs and subscribe to the new event, we must make a few additions to the player class, so go to Player.cs and add the following field and property :

// The index of the new towers texture.
private int newTowerIndex;

public int NewTowerIndex
{
    set { newTowerIndex = value; }
}

This new field will make it easier to choose which tower texture to draw when we are drawing a “preview” of the new tower.

Now we are going to add a new method that will draw a preview of the tower that the player wants to add :

public void DrawPreview(SpriteBatch spriteBatch)
{
    // Draw the tower preview.
    if (string.IsNullOrEmpty(newTowerType) == false)
    {
        int cellX = (int)(mouseState.X / 32); // Convert the position of the mouse

        int cellY = (int)(mouseState.Y / 32); // from array space to level space

        int tileX = cellX * 32; // Convert from array space to level space

        int tileY = cellY * 32; // Convert from array space to level space

     Texture2D previewTexture = towerTextures[newTowerIndex];

     spriteBatch.Draw(previewTexture, new Rectangle(tileX, tileY,

         previewTexture.Width, previewTexture.Height), Color.White);

}
}

First this method checks if the player is trying to create a new tower, and if they are, we draw a preview of tower in the cell that the mouse if hovering over.

Now there is just one more addition to be made to the player class, go to the AddTower method and just after the if statement that checks if there is a space for the tower and if the player can afford it, add the following :

else
{
    newTowerType = string.Empty;
}

What this will do is when the player tries to create a tower, but he can’t afford it or there isn’t space for it, the tower preview will disappear and the player will have to press the button again to make a new tower.

And that’s all that needs to be changed in the player class! So, let’s finally go back to Game1.cs and hook up our new to events!

Go to the LoadContent method and just after where we subscribed to the all of our buttons Clicked event, add the following :

arrowButton.OnPress += new EventHandler(arrowButton_OnPress);
spikeButton.OnPress += new EventHandler(spikeButton_OnPress);
slowButton.OnPress += new EventHandler(slowButton_OnPress);

Then find the following methods :

private void arrowButton_Clicked(object sender, EventArgs e)
{
    player.NewTowerType = "Arrow Tower";
}
private void spikeButton_Clicked(object sender, EventArgs e)
{
    player.NewTowerType = "Spike Tower";
}
private void slowButton_Clicked(object sender, EventArgs e)
{
    player.NewTowerType = "Slow Tower"
}

And replace them with these :

private void arrowButton_Clicked(object sender, EventArgs e)
{
    player.NewTowerType = "Arrow Tower";
    player.NewTowerIndex = 0;
}
private void spikeButton_Clicked(object sender, EventArgs e)
{
    player.NewTowerType = "Spike Tower";
    player.NewTowerIndex = 1;
}
private void slowButton_Clicked(object sender, EventArgs e)
{
    player.NewTowerType = "Slow Tower";
    player.NewTowerIndex = 2;
}

private void arrowButton_OnPress(object sender, EventArgs e)
{
    player.NewTowerType = "Arrow Tower";
    player.NewTowerIndex = 0;
}
private void spikeButton_OnPress(object sender, EventArgs e)
{
    player.NewTowerType = "Spike Tower";
    player.NewTowerIndex = 1;
}
private void slowButton_OnPress(object sender, EventArgs e)
{
    player.NewTowerType = "Slow Tower";
    player.NewTowerIndex = 2;
}

All that is left now is to draw the tower preview! So go to the draw method and just before we call spriteBatch.End() add the following :

player.DrawPreview(spriteBatch);

And that’s all there is to it! We now have the means to both “Drag and Drop” towers or just click and place them. If you only want to be able to Drag and Drop tower you will need to comment out the lines where we subscribe to our buttons Clicked event, and if you don’t want the player to Drag and Drop towers comment out where we subscribe to our buttons OnPress events.

Hopefully all of that made sense and was helpful to you all!

I have also been asked to write a tutorial about upgrading towers, however I think this is pretty simple and it would be good if you could do it on your own! But if you get stuck this is how I would do it:

1. In the Tower class I would add a tier field that describes how upgraded the tower is.
2. Then in each of the different tower classes I would add an Upgrade method that increases the tier of the tower and also increases the damage etc.
3. In the Game1 class I would add a field for a new button and also another field that describes if it is hidden or visible.
4. When a tower is selected I would make the button visible, and when no tower is selected I would make the button hidden.
5. When the button is clicked I would call the selected towers Upgrade method if the player could afford the upgrade.

Also someone asked about zooming the camera in and out, for this I would look at one of the SpriteBatch.Begin() overloads that takes a matrix as a parameter. You could pass a scaling matrix (Matrix.CreateScale) to the Begin method to create a scaling effect, although this may cause some images to look stretched!

I hope this tutorial was useful to you all, thanks for reading!

Here is the source code for this tutorial.