CODEWITHSUNDEEP
javascriptcreatejseaseljs
Joe
Joe

Reputation: 721

Create js animation of a horizontal spritesheet

I have gone through the docs and sample only to be lost in outdated docs. Apparently there is no samples for the latest version of createjs.

I need to smooth scroll a horizontal spritesheet. So that the middle of images are shown before the new image is entirely in the "window". So the place in the page doesnt move only what is displayed from the single column horizontal spritesheet is different. And we do not switch between images we scroll up and down.

I am at my wits end with this. 

 this.sprite = new createjs.BitmapAnimation(spriteSheet);

that line gives an error

not a constructor

 this.sprite = createjs.BitmapAnimation(spriteSheet);

gives an error

not a function

here is the sprite sheet

https://github.com/nydehi/asp.net-mvc-example-invoicing-app/blob/master/screenshots/1.png

i am doing this now and no error but nothing is displayed.

<script type="text/javascript" src="createjs-2014.12.12.min.js"></script>
<script>
  function init() {
  var data = {
        images: ["1.png"],
        frames: {width:15, height:20},
        animations: {
            stand:0,
            run:[1,5],
            jump:[6,8,"run"]
        }
    };
    var spriteSheet = new createjs.SpriteSheet(data);
    var animation = new createjs.Sprite(spriteSheet, "run");
   var stage = new createjs.Stage("demoCanvas");
 stage.addChild(animation);
        animation.gotoAndPlay("run");   //walking from left to right
stage.update();
  }
</script>

Upvotes: 0

Views: 688

Answers (2)

Lanny
Lanny

Reputation: 11294

The earlier comments about BitmapAnimation being deprecated long ago are right. Your updated code sample looks fine otherwise.

I think you are just missing something to update the stage when contents change. Your sample just has the one update, but because your image is loaded using a string path, it is not ready yet when you call stage.update().

Any time contents change, you need to tell the stage to refresh. Typically, this is manually controlled when contents change, or constantly using the Ticker.

createjs.Ticker.on("tick", function(event) { 
    // Other updates

    // Update the stage
    stage.update(event); 
});

// Or a handy shortcut if you don't need to do anything else on tick:
createjs.Ticker.on("tick", stage);

Upvotes: 1

Soviut
Soviut

Reputation: 91545

You're probably using a more recent version of CreateJS (around version 0.8.2) which no longer has a BitmapAnimation class on it.

Older versions (0.6.0) had it, but it was most likely replaced by the SpriteSheet class.

Check here for the most recent documentation.

Upvotes: 1

Related Questions