Easel /ˈiːz(ə)l/
A wooden frame for holding an artist's work while it is being painted or drawn.
Oxford Dictionary
EaselJS
A Javascript Library for Working with the HTML5 Canvas Element.
EaselJS.com
Canvas is powerful, but it could be not easy to work with.
DisplayObject is an abstract class that should not be constructed directly. Instead construct subclasses such as Sprite, Bitmap, and Shape. DisplayObject is the base class for all display classes in the CanvasDisplay library.
It defines the core properties and methods that are shared between all display objects.Doc: DisplayObject
A stage is the root level Container for a display list. Each time its tick method is called, it will render its display list to its target canvas.
Doc: Stage
A Container is a nestable display lists that allows you to work with compound display elements.
Containers have some overhead, so you generally shouldn't create a Container to hold a single child.Doc: Container
A Bitmap represents an Image, Canvas, or Video in the display list.
Doc: Bitmap
Displays frames or sequences of frames from a sprite sheet image. A sprite sheet is a series of images (usually animation frames) combined into a single image on a regular grid.
Doc: BitmapSequence
A Shape allows you to display vector art in the display list. It composites a Graphics instance which exposes all of the vector drawing methods.
The Graphics instance can be shared between multiple Shape instances to display the same vector graphics with different positions or transforms.Doc: Shape
Allows you to display one or more lines of dynamic text (not user editable) in the display list.
Doc: Text
The Graphics class exposes an easy to use API for generating vector drawing instructions and drawing them to a specified context.
All drawing methods in Graphics return the Graphics instance, so they can be chained together.Doc: Graphics
A sprite sheet is a series of images (usually animation frames) combined into a single image on a regular grid.
Sprite sheets might also include a frameData property, which provides named frames and animations which can be played and sequenced together.Doc: SpriteSheet
Provides a centralized tick or heartbeat broadcast at a set interval. Listeners can subscribe to the tick event to be notified when a set time interval has elapsed.
Doc: Ticker
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>EaselJS Demo</title>
<script type="text/javascript" src="easel.js"></script>
<style type="text/css" media="screen">
#my_canvas{
background-color: gray;
}
</style>
<script type="text/javascript">
function init(){
...
}
</script>
</head>
<body onload="javascript:init();">
<canvas width="300" height="300" id="my_canvas"></canvas>
</body>
</html>
<script type="text/javascript">
function init(){
var canvas = document.getElementById("my_canvas");
var stage = new Stage(canvas);
var hello_text = new Text();
hello_text.text = "Hello, EaselJS!";
hello_text.color = "#fff";
hello_text.font = "36px bold Arial";
hello_text.x = 60;
hello_text.y = 150;
stage.addChild(hello_text);
stage.update();
}
</script>
<script type="text/javascript">
var stage;
var box;
var box_width = 50;
function init(){
var canvas = document.getElementById("my_canvas");
stage = new Stage(canvas);
var graphics = new Graphics();
graphics.setStrokeStyle(3);
graphics.beginStroke(Graphics.getRGB(255,255,255,0.8));
graphics.drawRect(0, 0, box_width, box_width);
box = new Shape(graphics);
box.regX = box.regY = box_width / 2;
box.x = canvas.width / 2;
box.y = canvas.height / 2;
stage.addChild(box);
stage.update();
Ticker.setFPS(30);
Ticker.addListener(window);
}
function tick(){
box.rotation += 4;
stage.update();
}
</script>
var frameData = {
stand:[0,7],
run:[8,12],
jump:[13,19, false],
crouch:[20,26, false],
crouch_move:[27,37],
attack_0:[38,44, false],
attack_1:[45,52, false],
attack_2:[53,60, false],
attack_air:[61,70, false],
attack_gun:[71,90, false],
attack_crouch:[91,103, false],
attack_special:[104,123, false]
};
<script type="text/javascript">
var stage;
function init()
{
var canvas = document.getElementById("my_canvas");
stage = new Stage(canvas);
var frameData = {
run:[0,4]
};
var img = new Image();
img.src = "hero.png";
var spriteSheet = new SpriteSheet(img,48,68,frameData);
var hero = new BitmapSequence(spriteSheet);
hero.gotoAndPlay("run");
stage.addChild(hero);
stage.update();
Ticker.setFPS(24);
Ticker.addListener(window);
}
function tick()
{
stage.update();
}
</script>
Zoë
A tool for exporting swf animations as EaselJS sprite sheets.
/