Skip to main content
ramonas95472076
Known Participant
October 26, 2018
Answered

CreateJS - how to load spritesheet with createJS and run animation

  • October 26, 2018
  • 2 replies
  • 2582 views

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

This topic has been closed for replies.
Correct answer JoãoCésar17023019

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.


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

2 replies

ramonas95472076
Known Participant
October 29, 2018

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

JoãoCésar17023019
Community Expert
Community Expert
October 29, 2018

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
Known Participant
October 29, 2018

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.

Legend
October 27, 2018

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
Known Participant
October 27, 2018

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.