How to develop web games with EaselJS

The arrival of HTML5 has opened up a world of exciting possibilities for us as developers.

The idea that you can quickly develop very high quality 2D and 3D games that run directly in the browser using simple JavaScript commands and without having to make use of any proprietary components to make it work could probably inspired you to finally get around to attempting that game idea you’ve been nurturing for years. Then when you actually go to do it and you see just how many new things you will have to learn to turn that idea into reality, you may find yourself feeling a little overwhelmed and perhaps even intimidated.

But fear not! Many fantastic developers have created frameworks and engines for us to make the whole process much simpler.

One of those fantastic developers is Grant Skinner, a Canadian who somehow managed to find the time (in between trying to keep warm and running from polar bears, I imagine) to create the EaselJS framework, which is what this article will be about.

Why EaselJS?

There are many different frameworks you can choose from to create your game. EaselJS just happens to be one of the simplest for beginners to get started with really quickly.

Learning by doing

The easiest way to learn something new is by doing something practical, so for this article we will actually develop a simple game. The basic concept of the game: you are a teacher and all your students hate you (of course!) and your goal is to safely make it out of the exit door before the students can pelt you to death with their endless supply of fruit. If you win, then you’ll achieve what every teacher hopes to do each day: make it out of the classroom alive.

If you lose, then it’s off to the big teachers’ lounge in the sky. These kids hate you so much, they even poisoned the fruit, and it only has to touch you to kill you (they are wearing gloves because they are smart).

Laying the groundwork

Before you can start making the actual game, you will normally have to create all the resources that will be used in the game. This means you need to make:

• Background(s) for the world you are creating
• Sprites (for characters and objects)
• Sound effects
• Music
• So in the case of our school game we need:
• Classroom background
• Desk sprite (as obstacle)
• Teacher sprite (player character)
• Student sprites (non-player characters)
• Fruit sprites (missiles)
• Splat! sound effect (for when you get hit)
• Optional background music (for annoying people who are not playing)

While I would recommend doing this project as an isometric view with nicely detailed sprites and backgrounds, I am going to do it as a top-down view, which is very easy to create (because I can just use primitive shapes like circles and squares).

So what I very quickly came up with was (images not drawn to scale):

• Floor
• Desk
• Teacher
• Student
• Apple
• Goal

Obviously it is not a beautiful game, but it is enough to achieve the goal of demonstrating the basics of how to set up a simple 2D game with EaselJS.

Game basics

The basic concepts involved in designing this game are:

• Level design
• KeyDown detection
• Collision detection
• Artificial intelligence
• Randomization

Starting with level design, this game is extremely simple. We just need to draw our floor as the background, in this case it will be 500 x 300 pixels.

And then we want to randomly place some desks in the room as obstacles and shields you can hide behind as you make your dash for the door. Effectively it is a very simple maze to navigate through.

Of course the exit needs to be at the top of the screen. You can place it in the middle or on one of the corners. If you make the position of the exit random it may make the game more interesting or challenging.

Your students will patrol randomly around the room, looking for opportunities to pelt you. For simplicity, maybe just put a small number of students (because this is a small room).

Of course without you there is no game, so, time to put you in the game!

That is the complete level design. All the other stuff we handle in the coding process, but it was good to have some kind of visualization of how the game is supposed to look and work.

Getting to grips with EaselJS development

You start by including the EaselJS  library in your project, which is as simple as:

<script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>

Now in the body tag of your HTML document, you want to add a call to the init() function, like this:

<body onload="init();">

Then you need to create a canvas object for drawing onto between your body tags, like this:

<canvas id="myCanvas" width="500" height="300"></canvas>

The size of the canvas in this case matches the size of the background, but there could be times when you will want the canvas to be larger than the background.

A game level in EaselJS is called a “scene” and a scene is played out — you guessed it! — upon a “stage”. And all the different actors and props will have to take their place on the stage to act out the scene. But because the computer is really dumb and doesn’t have any idea what those things are, we need to define them. We do this in the init() function that gets loaded when the page loads.

<script>
  function init() {
    stage=new createjs.Stage("myCanvas");
    backgroundImg=createjs.Bitmap("background.svg")
    desk=new Image();
    desk.src="desk.svg";
    teacher=new Image();
    teacher.src="teacher.svg";
    student=new Image();
    student.src="student.svg";
    apple=new Image();
    apple.src="apple.svg";
    exit=new Image();
    exit.src="exit.svg";
  }
</script>

Really simple, right? None of this actually draws the images, it just loads in the data required for drawing the images. Initialization means getting things ready before actually doing any real work.

Now we should implement all the items. Here is the code we add to do that (put it just before the closing brace of the init function)…

drawEverything();

So we need to create that new function:

function drawEverything(){
  addBackground();
  addExit();
  addTeacher();
  for(i=0;i<4;i++){
    addDesk(i);
    addStudent(i);
  }
}

All of that would be cool if we actually had any of those functions, so time to write the functions!

  function addBackground(){
  bg=new createjs.Bitmap(bg);
  stage.addChild(bg);
}

The addChild method adds some object as a child of another object. In this case, the stage is the parent of the background. We just repeat a similar process for the other items.

function addDesk(num){
  var randX=Math.floor(Math.random()*450);
  var randY=Math.floor(Math.random()*250);
  desks[i]=new createjs.Bitmap(desk);
  desks[i].x=randX;
  desks[i].y=randY;
  stage.addChild(desks[i]);
}
function addStudent(num){
  var randX=Math.floor(Math.random()*450);
  var randY=Math.floor(Math.random()*250);
  students[i]=new createjs.Bitmap(student);
  students[i].x=randX;
  students[i].y=randY;
  stage.addChild(students[i]);
}
function addExit(){
  exit=new createjs.Bitmap(exit);
  var randX=Math.floor(Math.random()*450);
  exit.x=randX;
  exit.y=1;
  stage.addChild(exit);
}
function addTeacher(){
  teacher=new createjs.Bitmap(teacher);
  teacher.x=50;
  teacher.y=250;
  stage.addChild(teacher);
}

Then go back to the init() function and add this line just before the closing brace:

stage.update();

Now if you run this, you should find that it works as expected. All your images are in the right place and so on. It’s not perfect but it is taking shape. If you find that it’s not working, then try it in a different browser (not all browser and operating system combinations give perfect results yet).

One possible solution is to use real bitmaps instead of SVG files, but this will increase file sizes (floor.svg is 2.5kb but if you convert to floor.png it will be 6.8kb). When using bitmaps you need to provide height and width attributes for each image.

What I have shown you here is a really basic introduction to setting up a game in EaselJS.  From this point, you will need to add the following functions:

• Function to detect collision between objects
• Function to move the NPCs
• Function to respond to key presses
• Function to make NPCs respond to player movement
• Main game loop to keep everything ticking over until the game ends

If you would like to see some in-depth tutorials on these topics, there are many existing individual tutorials online to be found that will point you in the right direction.