CODEWITHSUNDEEP
createjs
Stephen Kennedy
Stephen Kennedy

Reputation: 549

Create js sprite freezing on first frame

Pulling my hair out with this one, hope its not something silly. Below is a snippet of code from a program. When leftwalker.x == 150 he should gotoAndPlay the standstill animation but it only plays the first frame, the previous animation runs fine. Any ideas? 

var data = 
         {
         images: ["images/ste_basic_wand.png"],
         frames: {width:64, height:64},
         animations: 
            {
                // start, end, next, speed
                walkright: [143,151,"walkright",1.18],
                walkleft: [118,125,"walkleft",1.18],
                stand:[39,45,"stand",0.08],
                standstill:[26,27, "standstill", 1.2]
            }

         };
         var spriteSheet = new createjs.SpriteSheet(data);

         leftwalker = new createjs.Sprite(spriteSheet);
         leftwalker.name = "lefty";
         leftwalker.framerate = 30;
         leftwalker.x = 100;
         leftwalker.y = 100;
         leftwalker.currentFrame = 0;
         leftwalker.scaleY = leftwalker.scaleX = 2;

         leftwalker.gotoAndPlay("walkright");

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

    function tick(event) {
        if(container.x < 150)
        {   
        container.x += 5;
        }
        if(leftwalker.x < 150)
        {
            leftwalker.x += 2;
        }
        if(leftwalker.x == 150)
        {
            leftwalker.gotoAndPlay("standstill");
        }
        //  if (circle.x > stage.canvas.width) { circle.x = 0; }
        stage.update(event); // important!!
    }

Upvotes: 0

Views: 159

Answers (2)

Lanny
Lanny

Reputation: 11294

The reason this happens is because you are calling gotoAndPlay("standstill") during the tick. Once you reach 150, your sprite stops moving, so it is perpetually at x=150. This means each tick will tell it to gotoAndPlay the same frame, resulting it in being "stuck".

Upvotes: 1

Stephen Kennedy
Stephen Kennedy

Reputation: 549

Figured out a way around it, still not sure why but easaljs didn't like the code

if(leftwalker.x == 150)
        {
            leftwalker.gotoAndPlay("standstill");
        }

When I change it so the char isn't stuck on point 150 (move him to 151) the animation begins. I also slowed the animation on the standing still down to make it seem more real but this isn't related to the fix I didn't post this code. 

if(leftwalker.x == 150)
        {
            leftwalker.gotoAndPlay("standstill");
            if(leftwalker.x < 180)
            {
                leftwalker.x += 1;
            }
        }

Upvotes: 0

Related Questions