gsko Posted December 19, 2014 Share Posted December 19, 2014 I am trying to use an empty sprite that when dragged will play an animation. The drag plays the first 15 frames of the animation and then when released it plays the other 15 so 30 frames in total. I can get it work how I want it but the problem is if I click the sprite first and then try to move it again. It won't move. I've spend hours trying to figure this out with nothing. Here's the code I am using to test this:<html><body><div class="canvas"> <div id="simulator"></div></div><script src="//code.jquery.com/jquery-2.1.1.min.js"></script><script src="scripts/vendor/phaser.min.js"></script><script>var game = new Phaser.Game(727, 171, Phaser.CANVAS, 'simulator', { preload: preload, create: create, update: update, render: render});var tetherDragged = true;var runOnce = false; function preload() { game.load.atlasJSONHash('drag', 'images/sprites/[email protected]', 'images/sprites/[email protected]');}function create() { this.game.stage.backgroundColor = '#cccccc'; //Empty sprite for pull action tether_pull = game.add.sprite(600, 60); tether_pull.name = "tether_pull"; tether_pull.height = 40; tether_pull.width = 40; tether_pull.z = 30; tether_pull.inputEnabled = true; boundsTetherPull = new Phaser.Rectangle(600, 60, 120, 60); tether_pull.events.onInputDown.add(checkInputStatus, {sprite: tether_pull}); runSimulation()}function runSimulation() { tether_drag = game.add.sprite(530, 15, 'drag'); tether_drag.name = 'tether_drag'; tether_drag.scale.x = 1/game.device.pixelRatio*0.5; tether_drag.scale.y = 1/game.device.pixelRatio*0.5; tether_drag.animations.add('pull');}function update() { if (tetherDragged == true && tether_pull.input.isDragged==true) { var lastFrame = tether_drag.animations.frameTotal/2; if (tether_pull.deltaX>=1 && tether_drag.animations.currentFrame.index<=lastFrame-1) { tether_drag.animations.next(1); } if (runOnce==false && tether_drag.animations.currentFrame.index==lastFrame-1) { //Some other stuff outside of game happens here tether_pull.enableDrag = false; runOnce = true; } } }// Debug info will get written to canvas.function render() { game.debug.font = '10px Courier'; game.debug.lineHeight = 10; game.debug.inputInfo(10, 10, '', { fill: '#ffffff', font: "15px Arial"}); game.debug.spriteInputInfo(tether_pull, 230, 10,'', { fill: '#ffffff', font: "15px Arial"}); game.debug.text("Time until event: " + game.time.events.duration, 420, 10);}function checkInputStatus() { tether_pull.input.enableDrag(true, false, true, true, boundsTetherPull); tether_pull.input.allowVerticalDrag = false;}</script></body></html>I've also included the files I am using for the animation. I'm kind at a loss as to what to do. [email protected] is actually a JSON file but it wouldn't let me upload a JSON file. [email protected] Link to comment Share on other sites More sharing options...
eguneys Posted December 20, 2014 Share Posted December 20, 2014 Put this in a jsbin so we can see the problem. I don't understand how you do the animation. Normally if you have two animations, you would add both with sprite.animations.add('pull', frames)sprite.animations.add('release', frames)and when you want to play:sprite.play('pull', frameRate)sprite.play('release', frameRate) Note the frameRate describes the speed, so you can adjust it how long the animation will last. But I guess you don't know how long the drag will last so you want to play the frames manually, I don't know how to do that, but I would play with your logic if you put up a working example. Another problem is how to know when mouse is released. You can check if it is justReleased, it would be nice if there was a hook to call but there isn't. So you have to check in the update function. The logic looks messy, so you should simplify it more, get rid of `tetherDragged` variable. Anyway I don't understand your problem, it works when you drag, but it doesn't work when you click and wait a little and then drag? Link to comment Share on other sites More sharing options...
gsko Posted December 22, 2014 Author Share Posted December 22, 2014 Thanks for the comment. I have created a new post with a CodePen example and will update my comments. Link to comment Share on other sites More sharing options...
Recommended Posts