Play Canvas with EaselJS

you can get more slides on
www.eddie.com.tw/slides

you can get this slide on www.eddie.com.tw/slides

About This Slide

WHO AM I

I'm 高見龍

a.k.a Eddie or Aquarianboy

Contacts

You can find me in those places (so many places, I know..Orz)
or just google me with keyword "高見龍"

Before We Start this topic..

Why today's topic is NOT about FLASH/AS3?

I love FLASH for sure!

But sometimes we still can try something else..

HTML5 ?!
The FLASH Killer?

I DON'T THINK SO!

and
I DON'T CARE!

What's EaselJS?

What's EaselJS?

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

Why We Need It?

Canvas is powerful, but it could be not easy to work with.

Why and Why Not

Why and Why Not

Why?

Why Not?

Skills Requirements?

Skills Requirements?

Basic


Would be a plus

ちょっと待って!
Since we're talking about HTML5..

What about the Browser Compatibility?

I mean IE, of course!

I DON'T REALLY CARE!

I think(and hope) it won't be a problem someday.

I Love FLASH, again!

無駄な話を言うな！
Let's Begin!

Install EaselJS

Actually, You don't really need to install anything..

Some Important Classes

DisplayObject

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

Stage

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

Container

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

Bitmap

A Bitmap represents an Image, Canvas, or Video in the display list.

Doc: Bitmap

BitmapSequence

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

Shape

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

Text

Allows you to display one or more lines of dynamic text (not user editable) in the display list.

Doc: Text

Inheritance Hierarchy of DisplayObject


Graphics

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

SpriteSheet

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

Ticker

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

Coding Time!

Demo - Empty Skeleton

    <!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>

Demo - Hello World!

    <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>

Demo - Hello, World

may NOT work in IE

link: http://blog.eddie.com.tw/slides/easeljs/examples/demo001.html

Demo - Rotate the world!

    <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>

Demo - Rock it, Baby

may NOT work in IE

link: http://blog.eddie.com.tw/slides/easeljs/examples/demo002.html

SpriteSheet

What's SpriteSheet

Make your thing move!

    <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>

Demo - Run! Mr. Laio!

may NOT work in IE, and the character - Mr.Laio is supported by Maso.

link: http://blog.eddie.com.tw/slides/easeljs/examples/demo003.html

Not that difficult, right?

OK, It's cool, but those frame definitions seem a little bit verbose..

Zoë

What's Zoë

Zoë

A tool for exporting swf animations as EaselJS sprite sheets.

link: http://easeljs.com/zoe.html

Install Zoë

Zoë is build with Adobe AIR, so the AIR runtime would be required..

Using Zoë

your movieclip in FLASH might look like this..


Zoë will produce a png file and a js file for you, which contain the frame data.

Conclusions

Conclusions

References

That's it!
Any Question?

# ← →

/