JavaScript animation – using EaselJS pt 2

0800 156 0777

JavaScript animation – using EaselJS pt 2

In this post I am continuing my foray into Easel.js. Here I am now actually displaying and animating pictures. So this post is about JavaScript animation - using EaselJS pt 2. We will be making this…

EaselJS animation v1

  …and it will be the car that is moving across the screen.

Again you need to make up a simple html5 page and link to the easljs library…

<script src="easel.js"></script>

First you need to create a stage and link it to your canvas element…

var page = document.getElementById("canvas"); 
var stage = new Stage(page);

Here my canvas element has an id of canvas. The stage variable will hold all of my items to view and animate, and it is linked to the canvas element by Stage(page). Now I can start adding images. The images I use , of course, can just be replaced by any image you wish. To use easeljs to show an image…
 
var sun= new Bitmap("sun.png");
 
Just create a new variable and make it a new Bitmap object, with the url of your image inside. Once you have your image you can adjust its x and y properties, and its scale properties…
 
tree1.scaleX = tree1.scaleY = 0.4;
tree1.x = 100;
tree1.y = 100;
 
again, this will be familiar to those of you who know ActionScript 3. To finally see the image we need to use addChild()…
 
stage.addChild(sun);
 
 …this last is vital, as without it we have setup our image, position, size, etc, but we will not see it until we use addChild().
 
We can then repeat this as many times as we like for each image we wish. However, before we run this we need to do a couple more things. First we need to set the frame rate, and also we need to tell easeljs to update the canvas as we are moving objects.
 
This is done like so…
 

Ticker.setFPS(60); Ticker.addListener(window);

The last line tells easeljs to look for a function called tick, and it is within this function that we update our canvas…

function tick() { stage.update(); carMan.x-=1; }

I am not doing anything fancy with the animation, just changing x by 1 pixel, but it looks pretty good. In further posts I will discuss more advanced movement, easing, etc, but for now I think it works pretty well. You do not have to write too much code, and it all fits together very nicely. Here is the full code for the example…

<!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset="utf-8" />
<title>easel_test</title>
<meta name="description" content="" />
<meta name="author" content="alex" />
<script src="easel.js"></script>
<script>

var stage;

var page;

var carMan;

function init()
{
page = document.getElementById("canvas");
stage = new Stage(page);

var sun= new Bitmap("sun.png"); 
sun.scaleX = sun.scaleY = 0.15;
stage.addChild(sun); var 

tree1= new Bitmap("tree1.png"); 
tree1.scaleX = tree1.scaleY = 0.4;

tree1.regY = tree1.image.height;
tree1.y = 300;

stage.addChild(tree1);

var  tree2= new Bitmap("tree2.png");
tree2.scaleX = tree2.scaleY = 0.4;

tree2.regY = tree2.image.height;
tree2.y = 305;
tree2.x = 300;
stage.addChild(tree2);

carMan= new Bitmap("carman.png");
carMan.scaleX = carMan.scaleY = 0.1;
carMan.regY = carMan.image.height;
carMan.y = 308;
carMan.x = 1000;
stage.addChild(carMan);

Ticker.setFPS(60);
Ticker.addListener(window);
//looking for a function called Tick
}

function tick()

{

stage.update();
carMan.x-=1;
}

</script>

<style> 
body 

background-color: rgba(209,146,95,1); 
}

#canvas
{
background-color: rgba(235,217,118,0.3);
border-color:rgba(200,146,95,1);
border-style: solid;
border-width: 1px;
}

</style>
</head>

<body onload="init();">
<div>
<header>
<h1>easel_test</h1>
</header>
<nav>
<p>
<a href="/">Home</a>
</p>
<p>
<a href="/contact">Contact</a>
</p>
</nav>

<canvas id="canvas" width="1024" height="300"></canvas>

<footer>
<p>
..by alexS
</p>
</footer>
</div>
</body>
</html>

Have a play with the code and see what you can come up with!