Jump to content

Problem with sprite and running an animation - Updated with CodePen


gsko
 Share

Recommended Posts

On eguneys' advice, I have created a CodePen that shows what I am trying to achieve. The objective is for the user to click on the two tether strings at the top right of the strings (the cursor will appear) and pull them to right which will trigger the animation. I'm using an empty sprite to achieve the hotspot for the user to drag. The animation is 30 frames long and the 15 frames are the tether string pull out and then remain frames show it go back to the normal state. Kind of like pulling the string on a bow. 

 

Here is the CodePen which can better show than I can explain: http://codepen.io/anon/pen/pvEzvG

 

So I have a couple of issues:

 

1) When it first loads, if I click instead of click and drag, it appears to be stuck. You can't click and drag after. 

2) I want the drag to be realistic so that the animation plays while the drag occurs. If the user stops dragging, I would like the animation to stop and start up when redragging. For this I am using the sprite's deltaX to advance the current frame of the animation. 

3) After the user drags the tether strings all the way to the right and let's go, I'd like the rest of the animation to play so it appears to snap back. 

 

Am I going about this the right way? What would you suggest? Thanks for all the help. 

 

 

Here's the code I am using:

<html><body><div class="canvas">    <div id="simulator"></div></div><script src="//code.jquery.com/jquery-2.1.1.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.2.1/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', 'http://projects.digital-compass.ca/tether/[email protected]', 'http://projects.digital-compass.ca/tether/[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;    tether_pull.input.useHandCursor = 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>
Link to comment
Share on other sites

I have discovered the source of my issues. It's based on this post here: http://www.html5gamedevs.com/topic/2207-bodies-of-invisible-sprites-are-not-updated/

 

 

The position of the Sprite does not get updated. So trying to drag an empty sprite will not work. But it does work occasionally which was the confusing issue. Even if I added an empty PNG to the Sprite and tried to use that it would not work. I had to add a Sprite with some color and then set the value of renderable = false. This solved all my issues. 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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