Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Animation Question


Ninjadoodle
 Share

Recommended Posts

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!

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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

});

 

Link to comment
Share on other sites

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;

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...