How to Make a Tower Defense Game with Phaser 3

Phaser game engine has many new and useful features for a faster and easier game development process. In this tutorial you will learn how to create a simple tower defense game in Phaser 3 style. First we will create an empty game, then we will continue with adding enemies, turrets and bullets. We will use arcade physics to make bullets hit the enemies. In the end we are going to create fully functional tower defense game.

Learning goals

  • Create Phaser 3 game
  • Use paths and make enemies move along a path
  • Learn about Phaser 3 groups and how to use them for managing enemies, turrets
  • and bullets
  • Play with Phaser.Math for faster game development
  • Understand basic tower defense game logic

Tutorial requirements

  • Basic to Intermediate level of JavaScript
  • Web browser – modern web browser
  • Code editor – any type of code editor, even notepad will do the work (I prefer NetBeans for convenience)
  • Local web server
  • Assets – you can use the assets that come with the source files download for this tutorial.

Source code download
Get the full source code for this tutorial here.

Create tower defense game
Its time to start with our game. First we will create an empty Phaser 3 project with the default scene. We will need to implement these functions for our scene:

preload – load our resources here, in our case one atlas and one image
create – create the game logic here
update – update the game here

Here is how our empty game should look:

In our tower defense game the enemies will move along a path. For this reason we will create a very simple path element. Change the create function to this:

Now when you run the game in the browser you should see something like this:

I am using really simple path for this tutorial, but you can experiment a bit with it and use different curves.
Now its time to create the enemies. For this we will extend the Phaser 3 Image class.
Add this code before the create function:

 

This is our empty Enemy class. Now we need to add some logic to it. I’ve decided to separate the path follower part so you could get the basic idea of how to make an object follow a path. For this reason each enemy will have a follower object with two parameters – t showing the progress on the path from 0 – start to 1 – end and vec (Phaser.Math.Vector2()) to get the x and y coordinates of the given t point. Add this row at the end of the Enemy constructor:

Now add this method to our Enemy:

The method startOnPath places the enemy at the first point of our path.
Now change the update method of the Enemy to this one:

ENEMY_SPEED is defined this way for now:

At certain point you would want each enemy type to have different speed, but for now we will use global variable. Now we will add the enemies group to the game, add the code below at the end of the create function:

and change the scene update function to this:

If you run your game now, you should see something like this:

Great, we have the enemies. Now its time to work on our defense. First I will draw a a grid on our graphics so it will be clear where the turrets can be placed. Here is the drawGrid function:

Call drawGrid at the start of the create function like this:

The Turret class will extend the Image in the same way. The difference will be that the turrets won’t move but they will execute certain action (shoot) each X seconds. Here is the Turret class, you can place it right after the Enemy:

Now we will create the turrets group. Add this code at the end of the create function:

To add a turret to the game we will add a function on pointerdown user input. Add this at the end of the create function:

And here is the placeTurret function:

And here is the canPlaceTurret:

Here we use an array to check if the place where we want to place a turret is free. When we place a turret we set the value to 1. The path elements are predefined with -1.

Add this to the top of the game:

Now if you run the game in the browser you should have something like this:

When you click in game and the place is empty you should be able to place a turret. But our turrets are pretty idle – they do nothing to the enemies. Its time to make them shoot and kill. We will create the bullets the same way like the enemies and the turrets.

And add this row at the end of the create function:

Now we will create a function for the turrets to use, when they need to shoot bullets. The function will get three parameters – x, y and the angle between the turret and the enemy. This function will call bullet.fire with the same parameters.

And we need one more function to make our turrets work. It will pick up and return an appropriate enemy. In our case the first enemy from the array of enemies that is near the turret. You can play a bit and make the function get the nearest enemy. If there is no enemy near the turret it will return false. This function will use Phaser.Math.Distance.Between to calculate the distance between two points.

In getEnemy we iterate on the children of the enemies group and test if the child is active and then if the distance is less than the third parameter.

Now we need to change the Turret to use these two functions for shooting bullets. Change its update method to this:

And now we need to create the fire method. It would receive an enemy through the getEnemy function. Then we will calculate the angle between the turret and the enemy and we will call addBullet with this angle. Then we will rotate our turret towards this enemy. Because the turret image is pointing up we need to adjust the angle a bit. And because the angle of the Image class is in degrees we need to multiply the current value with Phaser.Math.RAD_TO_DEG.

Add this code to the Turret Class:

Now you should see the turrets firing at the enemies. But the bullets and the enemies don’t interact. To make them interact we will use the arcade physics. Change the game config object to this:

In create method change

to

and

to

Now we will make the enemies with 100 hit points and each bullet will make 50 damage.
Add this at the end of the Enemy method startOnPath:

And we need to add this method so our Enemy will receive the damage:

We are almost ready with the interaction between the bullets and the enemies. We will use the overlap method to do so.
Add this code at the end of the create function:

And now we need to create the function damageEnemy:

And now you should be able to see the enemies disappear when hit two times. Make the damage variable something smaller like 20 or the enemy hp a lot more to test the performance. You can play with the values and other properties to get a better understanding of the game mechanics.

Conclusion
After finishing this tutorial you should be able to create a basic tower defense game with Phaser 3. There is a lot more to be done on one tower defense game; for example, you can add a user interface, a variety of towers and enemies, animations and effects. You can try to make the game in several scenes, with main menu scene, game over and victory scenes or dialogs, user scores and more. Phaser 3 with its modular structure and rich functionality is a great way to develop professional HTML5 games in a short time.

Published by

Lyubomira Popova

Lyubomira is a developer and entrepreneur. Founder of Tiger Studio, starting game development company. Lyubomira has more than ten years experience developing commercial software and three years making games with Phaser.

Share this article

3
Leave a Reply

avatar
2 Comment threads
1 Thread replies
3 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Henrique piresPablo Farias Navarroasdfasdf Recent comment authors
newest oldest most voted
asdfasdf
Guest
asdfasdf

virus detected in zip file download, specifically Trojan:Win32/Sprisky.U!cl threat severe

Pablo Farias Navarro
Admin

Can’t replicate this with Avast (updated to the latest virus definitions). The zip file only contains HTML and JS files plus a couple of images.

Henrique pires
Guest
Henrique pires

Thanks for sharing the tutorial!
I also created a score variable and displayed it outside the canvas but don’t know how i can update it because, in the “function update”, i don’t know how to refer to the hp of an enemy.
Can you help me out?