Jump to content

Problem with sprite and running an animation


gsko
 Share

Recommended Posts

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/tether_drag@2x.png', 'images/sprites/tether_drag@2x.json');}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.

 

tether_drag@2x.txt is actually a JSON file but it wouldn't let me upload a JSON file. 

post-11943-0-45670400-1419000716_thumb.p

tether_drag@2x.txt

Link to comment
Share on other sites

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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