I’m a big fan of Tower Defense games and I’ve always wanted to build my own. The problem is I’m better at graphics than programming. Script TD was born as a way to abstract the programming and create a Tower Defense engine that allows anyone to create a TD game with some simple scripting.

The Script TD project contains a Visual Studio project and a number of directories containing the engine, the XML that constructs the game, and the graphics. After extracting the project you can follow along with me as I walk you through each of the files and directories and explain how they work.

By changing the graphics and the attributes/behaviors of the maps, towers, and creeps, you too can make your own Tower Defense game and even sell it in the Windows Phone Marketplace. If you’re also a developer you can extend Script TD to include new features and additions.

So let’s get started.

folder \Coding4FunTDContent

This is the primary parent directory for game content. If you're a designer, this is likely the only directory you'll be working in.

folder\Audio

The Audio directory includes two folders, one for Music and one called SFX for sound effects. The music folder is where you would put theme music you want to play at the title screen. SFX directory includes game sounds like spawn sounds, projectile shots and hits.

folder\Data

The Data directory is the folder for Enemies, Maps, Towers, and Game UI. The root of Data includes Maps.xml.

File \Data\Maps.xml

Maps Definition 
This XML contains the maps that make up your game. In our ScriptTD sample project it defines 5 maps; 1.xml through 5.xml. We also define which prerequisite each map requires, if any.

<Maps> 
  <Map Data="1.xml" />
  <Map Data="2.xml" />
  <Map Data="3.xml" />
  <Map Data="4.xml" />
  <Map Data="5.xml" />
<Prerequisite>mis04</Prerequisite> </Map> </Maps>

folder\Data\Enemies\

This directory contains all the enemies you'll have in your TD game.

File\Data\Enemies\FlyerFast.xml

Typical Creep XML
FlyerFast.xml is a typical XML for a "creep" or tower defense game enemy. If you want to create a new creep class, you simply create a new XML file like this one. It includes the following attributes:

<Creep 
Id="flyerfast"
CanFly="true"
Speed="2"
Health="150"
Worth="1"
Texture="flyer-fast.png"
DeathSoundId="29_Fast_Flyer_Death"
SpawnSoundId="28_Fast_Flyer_Spawn"
/>

- Id – The name we'll use to reference this class creep in other areas of the game.
- CanFly – This is a true or false attribute for whether this is a ground based creep or if it can fly over towers.
- Speed – This is the base speed for how fast this class creep moves.
- Health – The number of hit points required to kill this creep.
- Worth – This is how much money you get for killing this creep.
- Texture – The image for this creep. Simply reference the name of the image located in the Textures\Creeps\ directory.
- DeathSoundID – The name of the sound file in the \Audio directory to play when this enemy is killed.
- SpawnSoundID – This is the sound this class of creep makes on spawn. Reference the name of the sound file in the \Audio directory that you want to play.  

folder\Data\GUI\

This is the directory for XML files that define the UI of the game. For typical non-developers, the only things you would change in these files are the position of buttons and the name of the image used to represent the buttons.

For more information about the GUI XML specification, read the GUI XML Reference.

File\Data\GUI\Defeat.xml

Loser
(Click to enlarge)

Defeat
The defeat screen is what you see when you get beat on a map. The Visual node defines the image to use in the background and the text presented immediately upon defeat. The color of this text can be defined in the color attribute. There is also a Tap to Continue text button that continues past the defeat screen. It too can be customized with the text attributes.

<Window>
  <Visual>
    <Image src="Textures\Backgrounds\3-loading.jpg" useparentsize="true" />
    <Text 
text="You Have Been Defeated"
align="Center"
location="0,25%"
size="800,0"
allowparentresize="true"
color="255,255,255,255"
font="Fonts\Common.spritefont" /> </Visual> <Button name="continue" size="800,480" location="0,0" text="Tap to Continue"> <Visual> <Text
align="Center"
color="255,255,255,255"
Font="Fonts\Common.spritefont"
Text="{TEXT}"
valign="Middle" /> </Visual> </Button> </Window>

File\Data\GUI\HighScoreMap.xml

High Score
(Click to enlarge)

The High Score Screen
This is the list of high scores and what image is shown in the background. The Image scr attribute is defining the background used on this screen. Text attributes can be defined for your High Score screen style. The 5 best high scores are shown.

<Window>
  <Visual>
    <Image src="Textures\Backgrounds\2-level-select.jpg" />
    <Text 
Font="Fonts\Common.spritefont"
Text="{TEXT}"
color="255,255,255,255"
Location="15%, 5%"
allowparentresize="true" /> </Visual> <Templates> <Template Name="scoreItemTemplate"> <Text
Font="Fonts\Common.spritefont"
color="255,255,255,255"
Text="{VALUE}"
allowparentresize="false" /> </Template> </Templates> <Label name="score1" Template="scoreItemTemplate" Location="15%, 20%" /> <Label name="score2" Template="scoreItemTemplate" Location="15%, 30%" /> <Label name="score3" Template="scoreItemTemplate" Location="15%, 40%" /> <Label name="score4" Template="scoreItemTemplate" Location="15%, 50%" /> <Label name="score5" Template="scoreItemTemplate" Location="15%, 60%" /> </Window>

File\Data\GUI\Ingame.xml

Gameplay2
(Click to enlarge)

InGame Layout
This is a significant file in that it defines what your game screen looks like when playing.

<Visual>
    <Image name="mapImg" />
    <Image src="Textures\Backgrounds\playscreen.png" />
    <Text text="Cash:" Color="255,255,255,255" location="10, 0" Font="Fonts\Common.spritefont" />
    <Text text="Lives:" Color="255,255,255,255" location="200, 0" Font="Fonts\Common.spritefont" />
    <Text text="Points:" Color="255,255,255,255" location="400, 0" Font="Fonts\Common.spritefont" />
    <Text text="Wave:" Color="255,255,255,255" location="600, 0" Font="Fonts\Common.spritefont" />
    <Gameplay name="gameplay" />
    <Circle name="rangeCircle" color="0,0,255,128" density="16" />
    <GridOverlay name="grid" Align="Center" VAlign="Middle" Color="0,0,0,255" Spacing="35" Size="665,385" />
  </Visual>

The first node <Visual> defines what your game play screen will look like.
- Image src – This sets the title bar background at the top of the screen. The following text lines will lay play data over this graphic.
- Text – These 4 attributes set the placement and color of the play data attributes: Cash, Lives, Points, and Wave number.
- Circle – This attribute sets the color of the range circle around your towers.
- GridOverlay – This defines the grid overlay users can display, per the grid checkbox in options setting.

  <Label name="cash" Location="100, 0" Template="valueLabel" />
  <Label name="lives" Location="300, 0" Template="valueLabel" />
  <Label name="points" Location="520, 0" Template="valueLabel" />
  <Label name="wave" Location="700, 0" Template="valueLabel" />

The labels will set the placement of the values of the text fields above in the Visual node.

<Button name="options" Location="740, 45" Size="50, 50">
  <Visual>
    <Image src="Textures\Buttons\HUD-button-options.png" useparentsize="true" />
  </Visual>
</Button>

There are several buttons on the sample play screen with attributes that define the picture used, size, and placement. The 5 buttons in the sample are:
- Options - (shown above) The options button takes the user to the Options button. They return by hitting the hardware Back button on the phone.
- ForceWave – This button forces the next wave to start spawning. 
- Enter (& Exit) – The enter and exit buttons aren't actually buttons. Without these 'fake' buttons, the creeps spawn from off the map. The player has no idea where they will start coming from. I could define the entrance on the map's background graphic, but I wanted to hide the creeps as well as define the entrance and exit. Enter the fake enter button. This is a transparent PNG that lies on top of the creeps as they enter. You can choose to use buttons like this when needed, use your background to show a entrance path, or maybe just surprise players with where creeps come in. It's your game.

 

<TowerButton name="gun" towerid="gun" location="535,445" size="35,35">
 <Visual>
  <Image src="Textures\Towers\HUD-tower-gun.png" useparentsize="true" visibility="enabled" />
  <Image src="Textures\Towers\HUD-tower-gun-unavailable.png" useparentsize="true" visibility="disabled" />
 </Visual>
</TowerButton>

Five towers are available in the ScriptTD demo project. This section defines where you click to drag a new tower to your game field. Some maps may only let you use one, all, or any combination of towers, but in this code sample all 5 are hard coded to a location. Remember if you create a new creep class (in the Data\Enemies\ directory) this is where you'll need to define where the button for that tower should be, what image to use for it, and what image to use if it is unavailable on a map.

File\Data\GUI\LevelSelect.xml

Levels
(Click to Enlarge)

Level Select Screen
This is the UI for the level/map selecting screen. This screen has a number of buttons that denote each map, as well as buttons to cycle the displayed maps.

<Window>
  <Visual>
    <Image src="Textures\Backgrounds\2-level-select.jpg" />
  </Visual>

In the Visual section we define what background to use in the level select screen.

  <Templates>
    <Template Name="levelButtonTemplate">
      <Image Name="thumb" Align="Center" disabledtint="128,128,128,255" VAlign="Top" />
      <Text Text="{TEXT}" Align="Center" VAlign="Bottom" AllowParentResize="false" Font="Fonts\Common.spritefont" />
      <Image Align="Center" VAlign="Middle" src="Textures\Buttons\locked.png" visibility="disabled" />
    </Template>
  </Templates>

This template section is for the buttons players use to select the map they want to play. It defines what you see if a particular map is locked (a tint and locked image).

<Buttonname="level1" Template="levelButtonTemplate" Location="33%, 40%" Size="20%, 30%" />
<Buttonname="level2" Template="levelButtonTemplate" Location="66%, 40%" Size="20%, 30%" />

Here you see two map buttons side by side. Consider this a button template that all of your maps defined in Maps.xml will flow through. If you have more maps in the Maps.xml than you have buttons to display (like 12 maps with the 2 button screen above), the ScriptTD game engine will automatically show buttons to go to the next page of maps. In the ScriptTD code sample, we have one map per screen. We could lay out all five of our maps on a single screen and not have any navigation buttons. It's entirely up to you.

File\Data\GUI\MainMenu.xml

Main Screen
(Click to Enlarge)

Main Menu
This is the main screen that comes up when the game is loaded.

<Window music="track1,track2">
  <Visual>
    <Image src="Textures\Backgrounds\1-main.jpg" />
  </Visual>

Here we set the background music that plays when the main menu starts as well as the background image to display. .

  <Templates>
    <Template Name="menuButton">
      <Text 
Align="Center"
VAlign="Middle"
Text="{TEXT}"
Color="255,255,255,255"
AllowParentResize="true"
Font="Fonts\Common.spritefont" /> </Template> </Templates> <Button Name="resume" Location="55%, 15%" Text="Resume" Template="menuButton"/> <Button Name="play" Location="55%, 30%" Text="New Game" Template="menuButton"/> <Button Name="highscores" Location="55%, 45%" Text="High Scores" Template="menuButton"/> <Button Name="help" Location="55%, 60%" Text="Help" Template="menuButton"/> <Button Name="quit" Location="55%, 75%" Text="Quit" Template="menuButton"/> </Window>

Here we are setting the color of our menu text and placing the buttons. Script TD has 5 buttons on the main screen; Resume (in case you were playing a game and tombstoned), Play, High Scores, Help, and Quit. The Location of these buttons can be changed with each buttons location attribute.

File\Data\GUI\Options.xml

Options
(Click to Enlarge)

Options Screen
This is the options screen seen from the Main Menu or when the gear is clicked while playing a game. The Options screen background can be changed through the Visual>Image element. Buttons include volume controls and show grid.

<Window>
  <Visual>
    <Image src="Textures\Backgrounds\2-level-select.jpg" useparentsize="true" />
    <Text location="18%, 35%" text="SFX:" font="Fonts\Common.spritefont" color="255,255,255,255" />
    <Text location="18%, 45%" text="Music:" font="Fonts\Common.spritefont" color="255,255,255,255" />
  </Visual>
  <Checkbox name="showgrid" location="18%, 15%" size="35,35">
    <Visual>
      <Image Visibility="Checked" src="Textures\Buttons\enabled.png" size="35,35" />
      <Image Visibility="Unchecked" src="Textures\Buttons\disabled.png" size="35,35" />
      <Text font="Fonts\Common.spritefont" Text="Show Grid" location="60, 0" color="255,255,255,255" />
    </Visual>
  </Checkbox>
  <Button name="sfxdown" location="30%, 35%" size="35,10%">
    <Visual>
      <Image src="Textures\Buttons\back-previous.png" VAlign="Middle" size="35,35" />
    </Visual>
  </Button>
  <Label name="sfxval" location="35%, 35%" size="10%,10%">
    <Visual>
      <Text font="Fonts\Common.spritefont" VAlign="Middle" Align="Center" Text="{VALUE}" color="255,255,255,255" />
    </Visual>
  </Label>
  <Button name="sfxup" location="45%, 35%" size="35,10%">
    <Visual>
      <Image src="Textures\Buttons\next.png" VAlign="Middle" size="35,35" />
    </Visual>
  </Button>
  <Button name="musicdown" location="30%, 45%" size="35,10%">
    <Visual>
      <Image src="Textures\Buttons\back-previous.png" VAlign="Middle" size="35,35" />
    </Visual>
  </Button>
  <Label name="musicval" location="35%, 45%" size="10%,10%">
    <Visual>
      <Text font="Fonts\Common.spritefont" VAlign="Middle" Align="Center" Text="{VALUE}" color="255,255,255,255" />
    </Visual>
  </Label>
  <Button name="musicup" location="45%, 45%" size="35,10%">
    <Visual>
      <Image src="Textures\Buttons\next.png" VAlign="Middle" size="35,35" />
    </Visual>
  </Button>
</Window>

File\Data\GUI\TowerMenu.xml

TowerMenuXML

Tower Menu
This is the UI for the menu seen around a Tower when selecting it in a game. It currently has two options; Sell and Upgrade. This is an element that is common to all towers. The attack radius of the tower is shown, this radius is defined in the tower’s XML, in this case in Gun.XML.

<Window size="125,45">
  <Button name="sell" size="35,35" location="5,5">
    <Visual>
      <Image src="Textures\Buttons\HUD-button-sell.png" useparentsize="true" />
    </Visual>
  </Button>
  <Button name="upgrade" size="35,35" location="85,5">
    <Visual>
      <Image src="Textures\Buttons\HUD-button-upgrade.png" disabledtint="128,128,128,255" useparentsize="true" />
    </Visual>
  </Button>
</Window>

File\Data\GUI\Victory.xml

Victory
(Click to Enlarge)

Victory Screen
Victory is the screen shown when a player wins the level.

<Window>
  <Visual>
    <Image src="Textures\Backgrounds\4-highscores.jpg" useparentsize="true" />
    <Text text="You Are Victorious" align="Center" location="0,25%" size="800,0" 
allowparentresize="true" color="255,255,255,255" font="Fonts\Common.spritefont" /> </Visual> <Button name="continue" size="800,480" location="0,0" text="Tap to Continue"> <Visual> <Text align="Center" color="255,255,255,255" Font="Fonts\Common.spritefont" Text="{TEXT}" valign="Middle" /> </Visual> </Button> </Window>

The Visual element sets the background image and the victory message. The Button element triggers the tap to continue function.

folder\Data\Maps\

The Maps directory stores the files for each level in your Script TD game.

File\Data\Maps\1.xml

GamePlay
(Click to Enlarge)

Typical Map XML
1.xml is a typical Script TD level. If you're making a Script TD game, this is where you will spend most of your time. In this file you will define the level, place entrances and exits, set the background image and define the waves of creeps for the entire level.

Map

<Map 
   MapStartSoundID="19_New_Map_Loads" 
   WaveStartSoundID="07_Wave_Begin" 
   DefeatSoundID="09_Defeat_Loses_Level"
   VictorySoundID="08_Victory" 
   FocusColor="128,128,128,255" NumLives="10" 
   BackgroundTexture="Map5.jpg" StartingCash="100" 
   FriendlyName="Mission 5" 
   MapID="mis05">

- MapStartSoundID – This is the name of the sound file in \Audio\SFX\ that plays when the level loads and starts.
- WaveStartSoundID – The sound that plays when a new wave is released.
- DefeatSoundID – The sound that plays if the player loses this level.
- VictorySoundID – The sound that plays if a player wins the level.
- NumLives – The number of lives left. This counts down for each creep that makes it off the map without being killed.
- BackgroundTexture – Background for the current map, references a file located in \Textures\Background.
- StartingCash – How much money you start with on this level.
- Friendly Name – The display title for this level or map.
- MapID – What Script TD knows this map as.


Special Cells

<SpecialCells> 
    <Cell Y="5" X="0" Type="Entrance" CellID="spawn"/>
    <Cell Y="5" X="18" Type="Exit" CellID="exit"/> 
</SpecialCells>

Special Cells is a container for map features like walls or unbuildable areas on a map. It is where you define the entrance(s) and exit(s) of the creeps. They can be placed anywhere in the 11x19 grid using the X and Y attributes.

There are currently three types of special cells;

- "Entrance" – Each wave has an assigned entrance that uses the name defined in this types CellID attribute. You can make multiple entrances and exits and have waves come and go through any combination.
- "Exit" – A named door that any given wave can be assigned to leave through.
- "Obstacle" - Any cell on a map can be blocked by using the attribute "Obstacle". In designing a map, you might use the Obstacle attribute to create a wall that runs across the middle of your map. The entrance and exit could be on either side of the wall. The creeps would then take the shortest path to the exit. Just make sure in the end the creeps have at least one clear path to go to the exit through. Obstacles can also be used to create Tower Defense maps where the creeps are "on rails" or only follow one specific path from entrance to exit.

While not implemented in the current embodiment, things like sand that slows the creeps could be implemented in Special Cells. It is good practice to have the features defined in Special Cells shown in the background graphic for your map.

Allowed Towers
This element defines which towers are allowed in the map and how far you are allowed to upgrade them. While a tower could have 10 upgrade levels defined in the tower XML, you might only allow the player to upgrade to level 3 in an early map. The Tower has two attributes;

<Tower MaxLevel="3" ID="gun"/>

- "MaxLevel" – This is how many times this tower can be upgraded on this map. The characteristics of tower upgrades are defined in the xml for each tower.
- "ID" – This is the name of the tower, in our project we have 5; Gun, Rocket, Missile, Laser, and Earthquake.  

Waves
Waves are the timed groups of creeps that emerge throughout a level. A map can have any number of waves. The Waves>Wave attributes change the properties of the creeps contained within. As the game continues, players are making money and using it to create mazes of upgraded towers. The two modifers in the Waves>Wave element allow you to control the hit points on waves and the money the players receive.

- "HealthMod" – This changes the amount of heath points of a creep. If a creep has 100 hit points and a HealthMod of 1, the creep has 100 hit points. If your HealthMod is 2, they have 200 hit points. You can use decimals to fine tune gameplay, making a game that is hard enough to be fun yet still be able to win.
- "WorthMod" – Worth mod works the same way as the HealthMod but with the amount of money a player makes by killing the creep.

Creep
This element includes lines of creeps that are contained in the wave. You might have one line with 1 very powerful creep, as in a boss. Or you might have multiple groups of creeps that pour out by the dozens in the case of a final wave in a game. Typically you'll have one line representing 10-20 creeps in a wave. Let's look at one below.

<Creep TimeBetweenMs="1000" Number="15" Exit="exit" Entrance="spawn" CreepID="landFast"/>

In this case we will let out 15 "landFast" creeps that were defined in \Data\Enemies\ directory. They will emerge 1 second apart. They will enter through the entrance created in the <SpecialCells> element above and will exit through the exit you define. This line can easily be tweaked to send any number of any creep type you have created out of any entrance, at any rate, heading toward any exit.

<Wave HealthMod="1" WorthMod="5"> 
  <Creep TimeBetweenMs="1000" Number="15" Exit="exit" Entrance="spawn" CreepID="landBasic"/> 
</Wave>

folder\Data\Towers\

This directory will contain the definitions of the towers available in your Script TD game.

File\Data\Towers\gun.xml

Tower Definition XML
A tower definition will define what type of weapon it is, what sounds it makes, what it looks like, and the effect it has on an enemy. Under the Tower element, the tower characteristics are defined by Level nodes. In this example you can see a Gun Tower with one complete level and a second level started.

<Tower Id="gun" WeaponType="DumbProjectile">
  <Level
    Cost="7"
    TimeToBuildMs="3000"
    TimeToSellMs="0"
    Damage="15"
    ReloadTimeMs="1000"
    MinRange="0"
    MaxRange="3"
    Texture="tower-gun.png"
    ShotTexture="fx-small-round.png"
    ShotSpeed="3"
    CanShootFlying="false"
    CanShootLand="true"
    BuildSoundId="10_Construction_Tower"
    SellSoundId="11_Sell_Tower"
    UpgradeSoundId="12_Construction_Tower_Upgrade"
    ShotSoundId="01_Single_Machine_Gun_Cannon"
    />
<Level... />

WeaponType - defines what type of weapon this is. A gun and a canon may have different graphics, costs, and damage, but they are basically the same weapon – DumbProjectile. In Script TD there are four weapon types; DumbProjectile, SmartProjectile, Laser, and RadialShockwave.
ID - lets you name this type of tower. This is the name that you'll use in the Creep elements in the map XML to call this creep to release.
<Level - This starts the first Level element. Everything contained in this node will apply to this tower the moment it is placed in use. Additional levels can follow that allow the placed tower to be upgraded. Simply copy your first level and decide how you want it to upgrade. You can have upgrades use different images for projectiles, different sounds, and of course different ranges and damage levels.
HitSoundID - This is the sound made when this tower hits a creep.
ShotSoundID – The sound made when this tower shoots.
UpgradeSoundID – The sound made when this tower is upgraded.
SellSoundID – The sound made if the player sells this tower.
BuildSoundID – The sound made when the player builds this tower.
HitAnimationFPS – The frames per second in the hit animation.
HitTexture – This is the image used on hit.
CanShootLand – Whether this tower can shoot a land creep or not.
CanShootFlying – Whether this can shoot air-based creeps.
ShotSpeed – The speed of the shot from this tower at this level.
ShotTexture – The image to use for the projectile at this level.
Texture – The image to use for this tower at this level.
MaxRange – The maximum range of the tower at this level.
MinRange – The minimum range of the tower at this level. Some towers you might want to be able to hit creeps that are very close, as in the case of artillery.
ReloadTimeMs – The amount of time it takes to reload the tower weapon at this level.
Damage – The amount of damage the tower causes at this level.
TimeToSellMs – How long it takes to sell a tower. 0 will sell the tower immediately, though you may want to take longer to dissuade players from selling towers rapidly.
TimeToBuildMs – The amount of time to build a new tower, or to upgrade if this is an upgraded level. The tower is inactive during this upgrade time.
Cost – This is the overall cost of this tower to initially place, or the cost to upgrade this tower for this level. Typically upgrades get progressively more expensive.

folder\Textures\

This is the directory where you'll put all your images for backgrounds, buttons, creeps and towers used throughout the game.

folder\Textures\Backgrounds

These are the backgrounds for the main menu, level select screen, loading, and the bar at the top of the game play screen. The background images used in our code sample are 800x480 pixels. The Playscreen.png, or the bar that covers the top edge of the game play screen, is 800x41.

folder\Textures\Buttons

These are the buttons used in the game. They include the play and fast forward buttons, next wave, and options. most buttons are 55x55 pixels.

folder\Textures\Creeps

This is where you'll put the images used as creeps in your Script TD game. The creeps in our code sample are the same size as a game play square; 35x35 pixels.

folder\Textures\Help

This is where you place help screen images, you can create as many as needed to teach players how to play your game. The images in our code sample are 528x316.

folder\Textures\HitEffects

The explosions for projectiles go in the HitEffects directory.

folder\Textures\Maps

The Maps directory contains the backgrounds for all of your levels. Maps in this sample are 800x463. The difference between the map size and the background are accounting for the Playscreen.png that sits across the top of the map.

folder\Textures\Towers

The Towers directory contains the images for each Tower, including images for each version of the upgraded tower. In this example you’ll see there are 35x35 pixel images that are used for the towers in gameplay, and then there are 65x65 pixels images of the towers that are used in the tower select section at the bottom of the screen. Each 65x65 pixel tower select icon has an alternate image to use when the tower is unavailable on a map, or when the player doesn’t have funds to buy a given tower.

folder\Textures\Weapons

The Weapons directory contains the images for each shot that comes from a tower.

 

Last edited Jun 29, 2011 at 6:12 PM by larryla, version 28

Comments

No comments yet.