CODEWITHSUNDEEP
animationeaseljssprite-sheet
Rishav Sharan
Rishav Sharan

Reputation: 2932

The sprite animation in my simple easeljs script is not showing up

I am trying my hand at easeljs and animating a spritesheet. This is the first time I am working with sprites and as such am not knowledgeable about them.

My simple easeljs code to show this specific animation is;

var stage;

function init() {

    // create a new stage and point it at our canvas:
    stage = new createjs.Stage(document.getElementById("demoCanvas"));

     var data = {
         images: ["http://i.imgur.com/g5WtL7v.png"],
         frames: {width:256, height:256},
         animations: {
            run:[0,4]
            }
     };

     var spriteSheet = new createjs.SpriteSheet(data);
     var animation = new createjs.BitmapAnimation(spriteSheet);
     animation.gotoAndPlay("run");

}

But the sprite doesn't shows up on the canvas at all. WHat am I doing wrong?

Additional question; defining frames in easeljs can be done by

frames: [ // x, y, width, height, imageIndex, regX, regY

While I do understand width and height, what are x, y, imageIndex and regX, regY. The documentaion explains how I can use these parameters but for someone who is working with sprites for the 1st time in my life, I just dont know what these terms mean.

EDIT: I have also tried changing the code as such;

 var stage;

function init() {

    // create a new stage and point it at our canvas:
    stage = new createjs.Stage("demoCanvas");

    var data = {
        images: ["http://i.imgur.com/g5WtL7v.png"],
        frames: {width:256, height:256, count:8},
        animations: {
            run:[0,4, true]
        }
    };

    var ss = new createjs.SpriteSheet(data);
    var animation = new createjs.BitmapAnimation(ss);

    animation.x = 100;
    animation.y = 100;

    stage.addChild(animation);

    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", stage);
}

But I am still seeing a blank canvas...

Upvotes: 0

Views: 4328

Answers (2)

Rishav Sharan
Rishav Sharan

Reputation: 2932

ok i got things to work by combining both the codes that I have listed above;

var stage;

function init() {

    // create a new stage and point it at our canvas:
    stage = new createjs.Stage("demoCanvas");

    var data = {
        images: ["http://i.imgur.com/g5WtL7v.png"],
        frames: {width:256, height:256, count:8},
        animations: {
            run:[0,4, true]
        }
    };

    var ss = new createjs.SpriteSheet(data);
    var animation = new createjs.BitmapAnimation(ss);



    animation.x = 100;
    animation.y = 100;

    stage.addChild(animation);
    animation.gotoAndPlay("run");

    createjs.Ticker.setFPS(10);
    createjs.Ticker.addEventListener("tick", stage);
}

Now I have some questions;

  1. If I need animation.gotoAndPlay("run"); to animate the sprite how come the code at https://github.com/CreateJS/EaselJS/blob/master/examples/SpriteSheet_simple.html doesn't needs it?
  2. whats the difference between new createjs.Sprite(ss, "run"); and new createjs.BitmapAnimation(spriteSheet); . I am unable to find any documentation of the former.

Upvotes: 0

Olaf Horstmann
Olaf Horstmann

Reputation: 16892

You are missing a frame-count in the frames-object:

frames: {width:...,height:...,count:4} // or whatever number of frames your sprite holds

And just in case: The width and height is the width and height of 1 frame, not the entire image.

See more information and examples here: http://www.createjs.com/Docs/EaselJS/classes/SpriteSheet.html

Upvotes: 1

Related Questions