CreateJS - how to load spritesheet with createJS and run animation

[ramonas95472076]

Hi,

I am new to createJS and I am trying to load a spritesheet and run frames that contain an animation; but I keep getting this error in the console: "Uncaught TypeError: Cannot read property 'getImages' of undefined at Game.handleFileLoad". I am confused as to what is going on because there is no 'getImages' and so I think I am just not understanding how to load a spritesheet. Please help!

HERE IS THE CODE IN QUESTION:

loadGraphics() {
   var queue = new createjs.LoadQueue(true);
  queue.on("fileload", handleFileLoad, this);
  queue.loadFile("images/index_atlas_.png");
  queue.load();

}

handleFileLoad(event) {
   var item = event.item;
   var type = item.type;
   var image = queue.getResult(event.item);
  document.body.appendChild(image);

   var data = {
  images: [image],
  frames: {width:256, height:256},
  animations: {
  run:[0,4]
   }
   };

   var spriteSheet = new createjs.SpriteSheet(data);
   var animation = new createjs.Sprite(spriteSheet, "run");

AND HERE IS ALL OF MY CODE (IF THAT HELPS):

   class GameObject extends createjs.Container{

   constructor(graphic){
   super();
   if(graphic != undefined){
   this.graphic = graphic;
   this.addChild(this.graphic);
   var b = this.graphic.nominalBounds;
   this.setBounds(b.x, b.y, b.width, b.height);
   }

   }

}


   class Hero extends GameObject{

   constructor(){
   super(new lib.HeroGraphic());
   }

   }


   class Platform extends GameObject{

   constructor(){
   super(new lib.PlatformGraphic());
   }

   }


class World extends createjs.Container{

   constructor(){
   super();
   this.platforms = [];
   this.generatePlatforms();
   this.addHero();
   }


  addHero(){
   var hero = new Hero();
   this.addChild(hero);
  hero.x = 100;
  hero.y = 100;
   this.hero = hero;
   }

  generatePlatforms(){
   var platform = new Platform();
   this.addChild(platform);
  platform.x = 100;
  platform.y = 300;
   this.platforms.push(platform);

  platform = new Platform();
   this.addChild(platform);
  platform.x = 550;
  platform.y = 300;
   this.platforms.push(platform);
   }
   }


   class Game
   {
   constructor(lib){
   this.lib = lib;
   this.canvas = document.getElementById("canvas");
   this.stage = new createjs.Stage(this.canvas);
   this.stage.width = this.canvas.width;
   this.stage.height = this.canvas.height;
  createjs.Touch.enable(this.stage);
  createjs.Ticker.framerate = 60;
  createjs.Ticker.on("tick", this.stage);
   this.loadGraphics();
   this.restartGame();
   }

  loadGraphics() {
   var queue = new createjs.LoadQueue(true);
  queue.on("fileload", handleFileLoad, this);
  queue.loadFile("images/index_atlas_.png");
  queue.load();
   }

  handleFileLoad(event) {
   var item = event.item;
   var type = item.type;
   var image = queue.getResult(event.item);
  document.body.appendChild(image);

   var data = {
  images: [image],
  frames: {width:256, height:256},
  animations: {
  run:[0,4]
   }
   };

   var spriteSheet = new createjs.SpriteSheet(data);
   var animation = new createjs.Sprite(spriteSheet, "run");
   }


  restartGame(){

   this.world = new World();
   this.stage.addChild(this.world);
   }


   }

   var game = new Game(lib, exportRoot);

[ClayUUID]

Why are you manually doing all these things that Animate is designed to do for you? First you're creating a second stage object instead of using the one Animate automatically instantiates, now you're trying to do your own spritesheet management instead of letting Animate handle it.

Did you write all this code yourself, or did you copy it from a standalone CreateJS game tutorial somewhere and now you're trying to shoehorn it into Animate? Why use Animate at all?

[ramonas95472076]

Hi,

I did try and use the code produced by animate, but was having difficulty getting it to work....maybe my question should have been regarding my difficulty in getting the Animate code to work with my code. Anyway, I thought since I was having difficulty using the Animate code I should just try and understand the process deeper and try and manually load the spritesheet.

[ramonas95472076]

This article helped me to understand spritesheets more How to create sprite animations for EaselJS / CreateJS

[JoãoCésar]

Hi.

I think the best approach, as Clay already mentioned, is to create your game objects normally (backgrounds, UI, chars etc.) and let Animate handle the spritesheet creation.

Or do you wish to use CreateJS without Animate CC?

Regards,

JC

[ramonas95472076]

I mean I would like to use Animate more but I find the code Animate produces hard to understand and thus difficult to blend in with my code. And so I think I will use Animate on a limited level and lean more purely on CreateJS. I just don't find enough good tutorials on Animate online. But stay tuned for more questions from me. Thanks All for your help.

[JoãoCésar · Accepted solution]

OK.

No problem.

Don't forget to take a look at the code of this official demo:

https://createjs.com/demos/easeljs/spritesheet

Also, try to contact the team behind CreateJS through their Twitter accounts:

CreateJS (@CreateJS) | Twitter

gskinner (@gskinner_team) | Twitter

Have a great learning!

Regards,

JC

[ramonas95472076]

Awesome!! Thanks!!

[JoãoCésar]

You're welcome!

[ClayUUID]

ramonas95472076  wrote

I mean I would like to use Animate more but I find the code Animate produces hard to understand and thus difficult to blend in with my code.

This is somewhat like complaining that one can't understand the bytecode of a SWF. The code Animate generates isn't intended to be understood, it's only intended to implement what was specified in the IDE. Animate provides a stage, animation tools, etc, and a decently well-specified API. If you work with this environment, instead of against it (as you've been doing), life will be a lot easier. Let Animate do its job.