Ninjadoodle Posted May 8, 2018 Report Share Posted May 8, 2018 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 More sharing options...
enpu Posted May 8, 2018 Report Share Posted May 8, 2018 @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 More sharing options...
Ninjadoodle Posted May 8, 2018 Author Report Share Posted May 8, 2018 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 More sharing options...
enpu Posted May 8, 2018 Report Share Posted May 8, 2018 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 1 Link to comment Share on other sites More sharing options...
Ninjadoodle Posted May 8, 2018 Author Report Share Posted May 8, 2018 @enpu - Ahh, thanks heaps!! I see my mistake now, and that fixes my problem Link to comment Share on other sites More sharing options...
Recommended Posts