Welcome to part 2 of the tower defense series – Today we’re going to be adding code to place towers. Whoa, slow down there you say – “place towers? That’s crazy talk”. I assure you it isn’t and once you are able to place towers in the next section we will combine our lessons together to have a single level of play!

If you haven’t read How to build a tower defense flash game – Part 1 – Waypoints and Enemies, you may want to review it before you continue on

Before I get ahead of myself, we still need to finish this task in the series! You can Click Here for all the material I present for part 2 of this tower defense series.

Getting Started Placing Towers

Ok, so one thing you may have learned from the last article was that making games isn’t like real life – it just need to act like real life. We didn’t need a complicated A*, DFS/BFS or Best-first searches to move our enemies around. In fact we didn’t need a tile based map at all. That doesn’t mean we still won’t need one in the future, but for now we follow the K.I.S.S system (keep it simple, stupid).

So lets take a look at what we are trying to recreate. Try to place the tower and see how it works – Please forgive me for my poor “gun tower” skills!

Click on the little gun in the middle of the screen to select the tower and then place it on the green square in the middle of the map.

When the user clicks the “gun tower” at the bottom of the screen a white square attaches itself to the mouse and marks the locations that can be built on. This “marker” symbol is white when the user can build a tower in the area and red when the user can’t. The tower also has its own respective range which is also visible after the user selects the tower. This “range” symbol works much like the marker symbol in that it has it’s own red/white components. Now to the exciting part – If the user clicks the mouse on the “grass” we place one “gun tower”. If the user clicks anywhere else, we assume that the user didn’t want to click that tower in the first place and remove the tower placing option.

We’ve created a a total of eleven symbols to help our cause

* DeselectionArea (Graphic – On Frame 1 of “DeselectionAreaContainer”)

* DeselectionAreaContainer (Instance name: “deselect”)

The Deselection area is just a movieclip with an instance name on the stage that we can “hitTest” against to find if the user clicked an invalid area on or off the map. This is used both when placing a tower and again when the user selects the towers that has already been placed.

Grass (Instance name: “grass”)

This is the map we are using – Since it was green I called it grass, that’s pretty much as simple as it gets. It works like the deselect area, but used to correctly identify area where a tower can be placed.

GunTower (MovieClip that acts like a button)

This movie clip acts like a button when pressed – It could have easily been one but there was really no need for roll over states. It contains very basic actionscript code that I will list out below:

This symbol when clicked will modify the object params of our other symbol, “marker”, that lives just off the stage to the left. If makes that symbol “active” and tell it that we are dealing with a tower of type “gun”. That will come into place when the tower is being placed.

GunTowerPlacement (Instance name: “tower_gun”)

The function “TowerInfo” is defined in action script code on the main time line. It handles the showing of towers that have already been reselected off of the map. It just redisplays the towers individual range and is listed for your convenience below:

The “GunTowerPlacement” symbol is the movie clip that ultimately get placed on the stage after the user clicks on the “grass”. This movie clip will contain more code relating to the targeting of the enemies and

TowerPlacementMarker (Instance name: “marker”)

The “TowerPlacementMarker” is the symbol that contains 2 additional Graphic elements on two of it’s frames. When this is made active by clicking on the “GunTower” the marker tracks to the mouse.

The code above is extra to handle the movement of the marker to mimic “tiles”, but that is just there to later prevent overlapping towers. We could just have it track directly to the “_xmouse” and “_ymouse”, but it wouldn’t look at nice when laying out the towers.

We then make hitTest on the “grass” movie clip to show either a white box or a red one. The white means that the current coordinate is “ok” for placing a new tower and a red one means it is not.

Those two clips are located in the symbols listed below:

• TowerPlacementNotOk (Graphic – On Frame 2 of “TowerPlacementMarker”)
• TowerPlacementOk (Graphic – On Frame 1 of “TowerPlacementMarker”)

The last think associated with the “TowerPlacementMarker” is when it is pressed. This is the interesting part if you ask me. There are two conditions.

• Has the user clicked on the “grass” movie clip – OR
• Has the user clicked on the “deselect” movie clip

If the user clicks on either “deselect” or “grass” movie clips we will remove the marker (the white/red box) and the range (the white/red circle) instances and move them to off stage left.

If the user clicks on the “grass” movie clip it means that we are clicking on a valid build location. We then increments the towerCount by one and then check the “tower” parameter of the “TowerPlacementMarker” object. This “tower” parameter will ultimately be the tower type that we want to place on the screen. In the example we used “gun”. So we attempt to duplicate a tower off the stage with the name “tower_” + “gun” and the one instance name that matches that is “GunTowerPlacement”.

We then set the proper _x and _y and set active equal to 1. The tower is now online and operational!

* TowerPlacementRange (Instance name: “ranger”)

The “TowerPlacementRange” is set purely for a visual component of the tower when lacing it on the screen. The width and height are set when “TowerPlacementMarker” is made active. The two components contained in this symbol listed below in their respective frames.

* TowerRanceNotOk (Graphic – On Frame 2 of “TowerPlacementRange”)

* TowerRangeOk (Graphic – On Frame 1 of “TowerPlacementRange”)

Ok, so what do we know how to do now?

# We have a basic button that creates a pseudo mask of the tower we want to place

# We can distinguish between buildable and non-buildable areas of a map

# We can place an object on the map and make it active

# We can click on that place object and get the object current tower range

Wasn’t that simple? I hope you found this second part of the series as helpful as the first part. If you have any additional questions, please feel to ask away and I’ll see if I can help!

In the next tutorial we will be combining both the first and second articles and adding rotation and realism. You can Click Here to go back to the introduction

How to build a tower defense flash game – Part 3 – Rotation and Realism