HTML5 Tower Defense Game using EaselJS – Part 1 – Planning & Setup

You’ve been entrusted by a great and mighty game designer with the task of bringing his original game idea to life.
Because of the slow death of Flash technology, and its replacement with canvas HTML5 technology, you have chosen to learn and use it.
You also chose EaselJS
as Javascript library to make your transition into the canvas world easier.

Game Concept

Orcs are coming to destroy your castle. You must train and position archers to slow their advance until the cavalry come.

Game Elements

  • Orcs come in waves.  At the end of the wave, if the castle is still standing, the player wins.
  • Orcs come in different varieties: slow, fast, strong, weak, gold loot.
  • Archers come in different varieties: strong, long range, slowing effect, cost.
  • Orcs follow a predetermined path leading to the castle.
  • Archers stay from one round to the next, but can be sold back for half its cost.
  • Archers can be positioned anywhere on the map not within X feet from the path.

Now that the requirements are put down on paper, let’s make a quick sketch of how this game is going to look like.
This will give us some insight on which visual elements will need to be defined, and their relationship to one another.

After some quick white-boarding, the game’s concept is much clearer in everybody’s mind. This is often a good way of brainstorming an interface and game flow, especially for visually dominant people like me. If you don’t already have a white-board in your office, I strongly recommend you purchase one.

Please note that for the sake of simplicity, I’m not putting a lot of emphasis on the game assets, such as the images. In other words, I know I’m a crappy artist, give me a break here…

Setting up your project

I’ve chosen to use WebStorm, an IDE specializing in Javascript. You can, of course, use whichever environment you’re comfortable with.

Important!!

In order to correctly run this application, it’s going to need to be accessed through a web server (even your localhost will do). The reason for this being that the application will fetch image files in a different way than a normal HTML website. What I did was download an use WAMP, an easy to install Windows linux server. I then moved my project folder inside C:/wamp/www/, and access it through the address http://localhost/tower_defense/.

I like keeping my file hierarchies simple and standard. Generally, I’ll keep all my source files inside a folder called src, and I’ll have a folder called vendor in the root of my project where I’ll put all third-party libraries inside. You can download the EaselJS library from either their Github repository or directly from their website. You can then place the contents of the library inside a folder called easeljs inside vendor.

This being a Javascript project, we’ll only need one HTML page to display the canvas. Per convention, we should call that one index.html.

Here’s a quick look at the file structure so far:

The index page will need to reference both the EaselJS library as well as our own game code. EaselJS ships with a minified file  containing the entire library. One of the reasons they do this to make it easy for programmers to include it in their project. The minified file is contained inside the lib folder, and is called something similar to easeljs-0.4.2.min.js (yours might be a different version).

Lets also create a blank Javascript file inside src called main.js which will later be responsible for initiating the game, and putting all the game components together.

Lets modify the index.html file to include both easeljs and our main JS file:

<html>
<head>
    <title>HTML5 Tower Defense</title>

    <script src="vendor/easeljs/lib/easeljs-0.4.2.min.js"></script>
    <script src="src/main.js"></script>
</head>
<body>
</body>
</html>

So far so good. To complete the setup, lets initiate a canvas, and draw a shape into it using an EaselJS function to make sure our pieces are working well together.

We’re going to add a canvas to the index file, call it main by setting it an ID. We’re all going to run a function called loadGame on body load. Here’s what it will look like:

<body onload="loadGame()">
    <canvas id="main" width="800" height="600"></canvas>
</body>

In our main.js, we’ll create a loadGame function that will simply initiate the canvas scene and draw a circle inside of it.
Don’t worry if you don’t understand what’s going on in this function yet; the tutorial will go more in depth in the later posts.
This is mainly used as a test to make sure the setup is correct.

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

    var g = new Graphics();
    g.setStrokeStyle(1);
    g.beginStroke(Graphics.getRGB(0,0,0));
    g.beginFill(Graphics.getRGB(255,0,0));
    g.drawCircle(0,0,3);
    var s = new Shape(g);
    s.x = 100;
    s.y = 100;
    stage.addChild(s);
    stage.update();
};

If when you visit the web adresse (http://localhost/tower_defense/ in my case), you see a small red circle, your setup is complete. If not, open up the Javascript console (Ctrl-Shift-J in Chrome), and verify that the page isn’t throwing any errors.

That was the first part of the tutorial. Let me know in the comments if you have any comments, suggestions, or need help.

Here’s a link to part 2.


8 Responses to “HTML5 Tower Defense Game using EaselJS – Part 1 – Planning & Setup”

  1. Sam June 22, 2012 at 7:38 pm # Reply

    Thanks for the tutorial! :) I am trying to learn how to make games from scratch in html5 and am not that successful yet. Could you please finish the tutorials for how to make an html5 tower defense? Again, Thanks a lot! :):)

  2. Adam July 8, 2012 at 3:56 pm # Reply

    Hi Michael, we waiting the next part! Great work!

  3. craig August 13, 2012 at 10:40 pm # Reply

    Uhm…Where’s part 2 ?

  4. Long TRAN Huy September 24, 2012 at 10:23 am # Reply

    Hi,
    I have error,
    Uncaught ReferenceError: Stage is not defined main.js:3
    loadGame main.js:3
    onload /tower_defense/:8

    Please help!!!

  5. Long TRAN Huy September 24, 2012 at 10:39 am # Reply

    Sorry,
    I resolve it.
    I try to setting on easeljs-0.5.0.min.js and taken error.

    Cheers

  6. Beurt December 16, 2012 at 8:13 am # Reply

    It is too sad that we don’t have the next parts! Your post was so interestin!

  7. Thomas January 18, 2013 at 4:32 am # Reply

    Hi Michel,

    I was really enthusiastic first but then I saw you haven’t written any further parts of the tutorial yet.

    I think it is gonna be great if you would continue with it. I hope you can find some time and write further parts.

    I’m looking forward in any case!

    Best regards,
    Thomas

  8. Zumega January 30, 2013 at 2:30 pm # Reply

    Nice tutorial so far. Something I have have found for others just staring out using EaselJS 0.5.? items like Stage and Graphics need to have the createjs name space.

    createjs.Stage and createjs.Graphics

Leave a Reply