HTML5 Tower Defense Game using EaselJS – Part 2 – Path to Castle

In the last post, we initiated the project, drafted how the game’s overall look & feel, and drew a red circle as proof that EaselJS is working. In this part, we’re going to render the path to the castle.

The Path to the Castle – Concept

First, let’s give ourselves an idea of what the path is going to need to be, so that we’re better prepared to code it.

Conceptually, here’s what its role is in the game:

  • A logical set of way-points for the orcs to follow in order to reach the castle
  • A logical separation between the orcs and the archers
  • A visual path, so that the player knows where it begins and where it ends

Let’s try to keep the code as simple as possible, so that we don’t get tangled in our own logic. In my opinion, the simplest way to represent a path here is as a set of way-points. Here’s an illustration of what I mean:

The big dots represents coordinate points, which we’re going to represent logically as an array of points. The dotted lines mean that the points are connected sequentially in our game logic to form a linear path.

In order to have a nice background, and to not have to worry about rendering a castle later on, let’s use a static image background in which to display the game on. We need to keep in mind the size of the image when creating/using a background image, because shrinking/growing it might distort the image. I’m going to make my image 640 x 480, which will also be the size of my game stage.

Using my master programmer artistic abilities, I present to you with my map:


(if you find it too embarrassing, feel free to make/use your own)

Notice how I tried my best to keep the width of the path constant, so that we have an easier time mapping the way-points with the image later on.

It’s now time to get down to the code.

The Path to the Castle – Coding

First of all, lets move the image file into our project, and render the map to our browser.

Let’s create a new folder inside the root of our project called images, in which we’ll move map.jpg to:

Then, lets modify our existing code a bit to render the map using an Image class and a Bitmap EaselJS object. An Image object is equivalent to an img HTML tag; Javascript uses it to link to images. The Bitmap object is part of the EaselJS namespace; it’s responsible for knowing what to display and where to display it on the stage:

loadGame = function() {
	var canvas = document.getElementById('main');
	stage = new Stage(canvas);

	var mapImg = new Image();
	mapImg.src = "images/map.jpg";

	var mapBitmap = new Bitmap(mapImg);
	mapBitmap.regX = 0;
	mapBitmap.regY = 0;

	stage.addChild(mapBitmap);
	stage.update();
};


After refreshing, you should now see the map render on your browser.

Now, using an image editor, I’ve determined where our path coordinate points are going to be . Essentially, using the pixel coordinates (x,y), I took note of where each node is situated. Here they are, in Javascript list form:

var coordinates = [
	[200, 0],
	[177, 127],
	[289, 152],
	[480, 100],
	[566, 131],
	[575, 250],
	[362, 262],
	[78, 310],
	[80, 394],
	[288, 400]
];


Using this list, and a simple looping function, lets render lines where the path is going to be, so that we can validate that the waypoints are accurate. Here, I’m creating a line for each pair of coordinates. Each line is a separate shape that needs to be added separately to the stage in order to render correctly.

Think of the Graphics object as the computer’s pen. Here’s what I’m doing step by step:

  1. I change the thickness (setStrokeStyle) of the pen to 1
  2. I move the pen to a new location (point 1), without actually drawing (moveTo)
  3. I put my pen down, and give it a red color (beginStroke)
  4. I draw all the way to point 2 (lineTo)
  5. I commit the Shape to the stage (addChild) before drawing a new one

var g = new Graphics();

for(var i = 1; i < coordinates.length; i++)
{
	var s = new Shape(g);
	s.x = 0;
	s.y = 0;

	var point1 = coordinates[i-1];
	var point2 = coordinates[i];

	s.graphics
		.setStrokeStyle(1)
		.moveTo(point1[0], point1[1])
		.beginStroke(Graphics.getRGB(255,0,0))
		.lineTo(point2[0], point2[1]);

	stage.addChild(s);
}

stage.update();


I put this logic right after the code that renders the map, so that the lines appear on top of the map, and not under.

Here’s what should be the results:

Success! Our coordinates are very accurate!

Conclusion

Now we’re ready drawing orcs, and make them follow the path. This is going to be the next part. Until then, feel free to try it out on your own using what you know so far.

Here’s the source code of my project at this point: Source Code


3 Responses to “HTML5 Tower Defense Game using EaselJS – Part 2 – Path to Castle”

  1. Darkstra February 21, 2013 at 4:05 pm # Reply

    Hi, looks to be a promising tutorial! – Currently checking out EaselJS myself to make myself a Tower Defense game. Looking forward to the next parts.

    Do you happen to have any good beginner tutorials that helps building some understanding of easel?

    Keep up the good work ;)

  2. Keith December 30, 2013 at 4:12 am # Reply

    This code appears to be broken for new versions of EasilJS (I’m using v0.7.1). Taking the advice of a commenter on the first tutorial part, I re-wrote the code to make everything work so far, seen below. Please please please continue this tutorial series, it would help many people!

    var coordinates = [
    [200, 0],
    [177, 127],
    [289, 152],
    [480, 100],
    [566, 131],
    [575, 250],
    [362, 262],
    [78, 310],
    [80, 394],
    [288, 400]
    ];

    loadGame = function() {

    //INITIATING THE STAGE
    //=================================
    var canvas = document.getElementById(‘main’);
    stage = new createjs.Stage(canvas);

    //DRAWING THE MAP
    //=================================
    var mapImg = new Image();
    mapImg.src = “/images/map.jpg”;

    var mapBitmap = new createjs.Bitmap(mapImg);
    mapBitmap.regX = 0;
    mapBitmap.regY = 0;

    stage.addChild(mapBitmap);

    //=================================
    //DRAWING THE LINES
    //=================================
    var g = new createjs.Graphics();

    for(var i = 1; i < coordinates.length; i++)
    {
    var s = new createjs.Shape(g);
    s.x = 0;
    s.y = 0;

    var point1 = coordinates[i-1];
    var point2 = coordinates[i];

    s.graphics
    .setStrokeStyle(1)
    .moveTo(point1[0], point1[1])
    .beginStroke(createjs.Graphics.getRGB(255,0,0))
    .lineTo(point2[0], point2[1]);
    stage.addChild(s);
    }
    //=================================

    stage.update();
    };

    loadGame();

Leave a Reply