Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 3 days ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 7 days ago

Article writer and online marketer, freelancer at Fiverr. Previously worked at Konsear.com. Contact me - mubashirmazhr[at]gmail.com

Papermashup

Getting started with easelJS

EaselJS is a JavaScript library that makes working with the HTML5 Canvas element easy. Useful for creating games and generative art

MubashirMubashir

Currently, there are many frameworks for developing Javascript games like CraftyJS, ImpactJS, LimeJS and others. EaselJS gained popularity for being utilized in one of the first HTML5 game, Pirates Love Daisies.

EaselJS is pretty neat because of it is extensively documented with an extensive list of examples, interesting projects and so on. In addition, EaselJS is intended for 2D game development and provides all the useful features one would need to create a 2D web-based game. Easel is part of the larger framework CreateJS. Click here to find out more about this great framework.

EaselJS Concept

EaselJS works with the concept of a stage. Stage can also be referred to as a scene. Scene is a set of elements containing images, geometric shapes like square and circle shown on an HTML canvas.

The Heart of EaselJS

EaselJS can call our code in two ways, either by events or by an interval.

Events: EaselJS events are basically one of the properties that bring us closer to create fully dynamic web pages.

Examples of an event are:

Interval: EaselJS gives us the ability to execute tasks using intervals. This means we can tell the framework what function or set of functions to call or execute after a specified time.

For example, we may like to create an “update method” which will refresh the browser screen 15 times each second. This may not be accurate and can vary depending on what it takes to run the code.

Gaming Perspective of EaselJS

In gaming standpoint, EaselJS is fully capable of performing tasks such as:

Okay, now we know the basics, we should now move on to the coding side of this framework. So let’s get started and make something new and awesome.

First, make a new html page and name it anything. In my case it is EaselJS-Project.html

The HTML


<html>
<head>
<script src=" https://code.createjs.com/easeljs-0.8.2.min.js "></script>
<script>
function init() {
var canvas = document.getElementById('canvas')
var stage = new createjs.Stage(canvas);
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="700" height="350">Alternate Text!</canvas>
</body>
</html>

Working with Text

With the Text objects, you can draw, texts. It allows you to change the color, size, font, wrapping, alignment and others.


var text = new createjs.Text('Hello, World!', '40px Arial', '#64f');
text.textAlign = ‘left’;
text.x = canvas.width/2;
text.y = canvas.height/2;
stage.addChild(text);
stage.update();

Working with Shapes

A Shape object stores a group of vector graphics that are created directly on the canvas element. Each shape has a Graphics instance which is the interface to the canvas drawing system. Check out the following example.



var shape = new createjs.Shape();
shape.graphics.beginFill('#345256');
shape.graphics.drawRect(0, 0, canvas.width, canvas.height);
shape.graphics.beginFill('#33ccff');
shape.graphics.beginStroke('white');
shape.graphics.drawCircle(canvas.width/2, canvas.height/2, 50);
stage.addChild(shape);
stage.update();

Check out EaselJS official documentation to learn more about it.

Article writer and online marketer, freelancer at Fiverr. Previously worked at Konsear.com. Contact me - mubashirmazhr[at]gmail.com

Comments 2
  • Sebastian De Rossi
    Posted on

    Sebastian De Rossi Sebastian De Rossi

    Reply Author

    Hi Mubashir,
    Nice article!
    Might be worth mentioning that EaselJS is part of the a larger framework called CreateJS. CreateJS allows developers and designer to build rich interactive experiences such as games, ads, data visualization, and micro-sites. EaselJS focuses isn’t just for working with games, it focuses on 2D graphics that targets Canvas APIs, which gives high performance graphics inside of web browsers.
    Also linking to CreateJS main site (www.createjs.com) would please people can find examples and documentation for each library.

    Thanks :)


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Hi Sebastian,

      Thanks for the info! And awesome to see you picked up the article, I’ll amend the article to include links to createJS.

      Keep up the good work with the project.

      Ashley