CODEWITHSUNDEEP
javascriptcreatejseaseljs
kubuni
kubuni

Reputation: 107

EaselJs animation issue

This is my first time learning EaselJs. I am having issues making my sprite animate with the five animations I listed in the data structure. Would anyone have an idea what I'm doing wrong?

link : my code

      function CreateTile(x,y, stage){
    var rect = new createjs.Shape();
    rect.graphics.beginFill("green").drawRect(0,0,50,50);
    rect.x = x;
    rect.y = y;

    var rect2 = new createjs.Shape();
    rect2.graphics.beginFill("lightgreen").drawRect(0,0,46,46);
    rect2.x = x + 2;
    rect2.y = y + 2;

    stage.addChild(rect);
    stage.addChild(rect2);
  }

  function GenerateField(height, width, stage)
  {
     var h_lim = height / 50;
     var w_lim = width / 50;

     for(var h = 0; h < h_lim; h++){
       for(var w = 0; w < w_lim; w++){
         CreateTile(w * 50,h * 50,stage);
       }
     }
     stage.update();
  }
  function init() {
    var stage = new createjs.Stage("demoCanvas");
    GenerateField(800,600, stage);
    var img = new Image();
    img.crossOrigin="Anonymous";
    img.src = "https://s13.postimg.org/n1dqnac93/spritesheet.png";
        var data = {
      images : [img],
      frames: {width:64, height:64},
        animations: {
            stand:0,
            forwardwalk:[0,1,2, "forwardwalk"],
            leftwalk:[7,8, "leftwalk"],
            rightwalk:[3,4, "rightwalk"],
            backwalk:[9,10,11, "backwalk"]
        }
    };

    var spritesheet = new createjs.SpriteSheet(data);
    var person   = new createjs.Sprite(spritesheet);
    person.x = 400;
    person.y = 400;
    person.gotoAndPlay("forwardwalk");
    stage.addChild(person);

    window.addEventListener('keydown', function(e){
        var code = e.keyCode;
        switch(code){
          case 37:
          person.x -= 64;
          stage.update();
          break; //Left key
          case 38:
          person.y -= 64;
          stage.update();
          break; //Up key
          case 39: 
          person.x += 64;
          stage.update();
          break; //Right key
          case 40:
          person.y += 64;
          stage.update();
          break; //Down key
          default:
          break; // ignore
        }
    }, false);

    createjs.Ticker.useRAF = true;
    createjs.Ticker.setFPS(5);
    createjs.Ticker.on("tick", stage);
  }

Upvotes: 0

Views: 183

Answers (1)

Lanny
Lanny

Reputation: 11294

This issue you have is that you have improperly defined your spritesheet. Spritesheets support a few formats:

  1. Simple: Just a single name + frame (how you defined "stand"
  2. Consecutive frames: name + start/end frame, as well as a "next" and "speed". This is how most of your "left" and "right" walk animations are defined.
  3. Complex: If you have frames out of order, this is the best approach, since you specify the exact frame list, and then the other parameters specifically.

You can read all the format info here.

I believe you have confused the consecutive approach with the complex, and put 3 frames into the "forwardwalk" and "backwardwalk" animations. The animation find "2" as the next animation, and "forwardwalk" as the speed.

Instead of [0,1,2,"forwardwalk"], use [0,2,"forwardwalk"]. Same for "backwardwalk".

That should do it! Your sample works fine with that change.

Upvotes: 0

Related Questions