gsko Posted December 22, 2014 Share Posted December 22, 2014 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 More sharing options...
gsko Posted December 22, 2014 Author Share Posted December 22, 2014 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 More sharing options...
Recommended Posts