Animation Question

[Ninjadoodle]

Hi @enpu

I'm working on a level where I have a button and 4 tiles. When holding the button down, the 1st tile rotates clockwise (4 animation frames) and keep looping until the mouse is released.

Next time the button is pressed, tile number 2 rotates and so on.

I'm having a bit of trouble getting the animations to work correctly.

Basically I call play() and stop(), but the animation sometimes doesn't start right away and sometimes it seems to jump to a frame out of sequence.

Should there be a delay when resuming an animation before the next frame plays?

Thanks in advance!

[enpu]

@Ninjadoodle

There should be no delay when starting animation with play() function. It should set straight to the frame index 0 (first frame in animation), or to the frame specified as a parameter.

Could i see some of your code?

If you want to pause and resume animation, you can try using the playing property.

anim.playing = false; // Pause animation
anim.playing = true; // Resume animation

That should continue the animation exactly where it was paused.

[Ninjadoodle]

Hi @enpu

This is the code for the level I'm working on ... 

game.module(
    'game.stage15'
)
.body(function() {
    
    
    
game.createClass('S15ButtonA', {
    
    init: function() {
        
        this.sprite = new game.Sprite('buttonA.png');
        
        this.sprite.position.set(424, 1662);
        this.sprite.anchorCenter();
        this.sprite.interactive = true;
        this.sprite.addTo(game.scene.bg);
        
        this.sprite.mousedown = function() {
            
            if (!game.scene.solved) {
                
                game.audio.playSound('click.wav');
                
                this.scale.set(0.8);
                game.scene.touching = true;
                
                game.scene.num ++;
                
                if (game.scene.num < 5) {
                    
                    game.scene.tiles[game.scene.num].sprite.play();
                    game.scene.counter.sprite.stop(game.scene.num);
                }
            }
        };
    }
});



game.createClass('S15Counter', {
    
    init: function() {
        
        this.sprite = new game.Animation([
            'counter0001.png',
            'counter0002.png',
            'counter0003.png',
            'counter0004.png',
            'counter0005.png'
		]);
		this.sprite.anchorCenter();
		this.sprite.position.set(856, 1662);
        this.sprite.addTo(game.scene.mg);
    }
});



game.createClass('S15PuzzleTile', {
    
    init: function(x, y, frame) {
        
        this.sprite = new game.Animation([
		    'tile1.png',
		    'tile2.png',
		    'tile3.png',
		    'tile4.png'
		]);
		this.sprite.speed = 1;
		this.sprite.stop(frame);
		this.sprite.anchorCenter();
		this.sprite.position.set(x, y);
        this.sprite.interactive = true;
        this.sprite.addTo(game.scene.mg);
    }
});



game.createScene('Stage15', {
    
    num: 0,
    touching: false,
    
    init: function() {
        
        this.stageSetup = new game.StageSetup();
        this.stageSetup.setupStage();
        this.stageSetup.containers();
        
        this.tiles = [];
        
        this.tiles[1] = new game.S15PuzzleTile(448, 768, 0);
        this.tiles[2] = new game.S15PuzzleTile(832, 768, 1);
        this.tiles[3] = new game.S15PuzzleTile(832, 1152, 2);
        this.tiles[4] = new game.S15PuzzleTile(448, 1152, 3);
        
        this.buttonA = new game.S15ButtonA();
        this.counter = new game.S15Counter();
    },
    
    mouseup: function() {
        
        if (this.touching) {
            
            this.buttonA.sprite.scale.set(1);
            this.tiles[this.num].sprite.stop();
            
            if (this.num === 4) {
                
                if (game.scene.tiles[1].sprite.currentFrame === 0 &&
                    game.scene.tiles[2].sprite.currentFrame === 1 &&
                    game.scene.tiles[3].sprite.currentFrame === 2 &&
                    game.scene.tiles[4].sprite.currentFrame === 3) {
                    
                    game.scene.solved = true;
                    game.system.setScene('Stage16');
                    
                } else {
                    
                    game.system.setScene('Stage15');
                }
            }
            
            this.touching = false;
        }
    },
    
    update: function() {
        
        this.stageSetup.updateStage();
    }
});

});

 

[enpu]

I see that you are using stop function with frame parameter, so you stop the animation and then set it to specific frame. But then you are using play function without parameter, which would start playing the animation always from the first frame.

If you want to start animation from the current frame where it is set, you can try this:

anim.play(anim.currentFrame);

property currentFrame is the current frame index.

Or in your case just setting the playing property to true should work also:

anim.playing = true;

 

[Ninjadoodle]

@enpu - Ahh, thanks heaps!! I see my mistake now, and that fixes my problem