gsko

Members
  • Content Count

    16
  • Joined

  • Last visited

  1. gsko

    Slow drag on Sprite

    Or alternately, is there a way to slow down the input pointer so it moves slower?
  2. gsko

    Slow drag on Sprite

    Using this example: http://examples.phaser.io/_site/view_full.html?d=input&f=drag.js&t=drag Would there be a way to slow down the drag so it would restrict a user from dragging a Sprite around so fast? Thanks.
  3. 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.
  4. 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/tether_drag@2x.png', 'http://projects.digital-compass.ca/tether/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; 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>
  5. Thanks for the comment. I have created a new post with a CodePen example and will update my comments.
  6. 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. tether_drag@2x.txt
  7. gsko

    Animation with Multipack Sprite Sheets

    I did some more testing on this and part of the issue was that TexturePacker coudn't handle that many files. I create the individual sprite sheets manually it looks a lot better but there is still a slight pause switching between animations. I've looked all over for information on this and I know it's probably not your standard game question. Any help would be appreciated. Thanks
  8. I have an 18 second video to incorporate into my canvas. The MP4 file has been exported as a 532 PNG sequence for me. When i pack it in TexturePacker I get 11 sprite sheets. I'm trying to come up with a good method for playing it as seamlessly as possible. Here is the test code I have been using. I only loaded 5 for brevity. Is this the suggested method? Anyone have a better way to do it? It definitely doesn't look fluid. My initial thought was to just play the MP4 file over the canvas but there is already an HTML5 video on the screen that is playing at the same time. This has to work on the iPad and I couldn't get both videos to play at the same time. Hence why I have a PNG sequence. <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});function preload() { game.load.atlasJSONHash('handle_animation0', 'images/sprites/handle_animation0.png', 'images/sprites/handle_animation0.json'); game.load.atlasJSONHash('handle_animation1', 'images/sprites/handle_animation1.png', 'images/sprites/handle_animation1.json'); game.load.atlasJSONHash('handle_animation2', 'images/sprites/handle_animation2.png', 'images/sprites/handle_animation2.json'); game.load.atlasJSONHash('handle_animation3', 'images/sprites/handle_animation3.png', 'images/sprites/handle_animation3.json'); game.load.atlasJSONHash('handle_animation4', 'images/sprites/handle_animation4.png', 'images/sprites/handle_animation4.json');}function create() { handle_animation0 = game.add.sprite(0, 0, 'handle_animation0'); var anim0 = handle_animation0.animations.add('play0'); anim0.onComplete.add(function() { handle_animation1 = game.add.sprite(0, 0, 'handle_animation1'); var anim1 = handle_animation1.animations.add('play'); anim1.onComplete.add(function() { handle_animation2 = game.add.sprite(0, 0, 'handle_animation2'); var anim2 = handle_animation2.animations.add('play'); anim2.onComplete.add(function() { handle_animation3 = game.add.sprite(0, 0, 'handle_animation3'); var anim3 = handle_animation1.animations.add('play'); anim3.onComplete.add(function() { handle_animation4 = game.add.sprite(0, 0, 'handle_animation4'); var anim4 = handle_animation1.animations.add('play'); anim4.onComplete.add(function() { console.log('end.'); }, handle_animation3); anim4.play('play',30,false); }, handle_animation3); anim3.play('play',30,false); }, handle_animation2); anim2.play('play',30,false); }, handle_animation1); anim1.play('play',30,false); }, handle_animation0); anim0.play('play',30,false);}</script></body></html>Thanks
  9. This is my first Phaser project and I have a set canvas size. So I don't know what would happen. Maybe someone more experienced has an idea.
  10. It works for Phaser.Text. I just did this about 10 minutes ago: var instructions = game.add.text(363, 20, msg, { fill: '#ffffff', font: "14px Arial", align: "center"});instructions.anchor.set(0.5,0);Centered the text for me. Where 363 is the width of my canvas/2. Original Solution
  11. gsko

    check downDuration of a sprite

    Did you put the sprite.input.downDuration() in your update function? I am currently using this and it works for me. var down = false;function update() { if (down == false && sprite.input.downDuration()>=2000) { // Do stuff down = true; }}
  12. I seem to remember having an error doing something similar. Maybe try: player.animations.currentAnim.onComplete.add(change_state, {x: 1});I'm a newb but really enjoying working with Phaser.
  13. I've tried to use the destory method but I can' seem to get it to work. Here's my code sample: tether_drag = game.add.sprite(530, 15, 'drag');tether_drag.name = 'tether_drag';tether_drag.inputEnabled = true;tether_drag.animations.add('pull');tether_drag.events.onInputDown.add(checkInputStatus, {sprite: tether_drag});I cannot set inputEnabled to false since I still need to be able to track if it is being clicked so I can send an error message. The checkInputStatus will see if the Sprite is active or inactive (i use Sprites health to keep track of active/inactive) and do that case. This is the code that fires if the Sprite is inactive: tether_drag.events.destory();and I also tried... tether_drag.input.reset(true);But the event keeps firing every time I click the Sprite. How can I stop the event from firing keeping in mind that inputEnabled needs to be set to true. Thanks, gsko
  14. gsko

    Drag to Rotate Sprite with Anchor

    Thank you! That was exactly what I needed! I ended up with this: var p = game.input.activePointer; if(!p.isDown){ down = false; } else if(down) { var angle = (Math.PI*0.5) * Phaser.Math.angleBetween(p.x, p.y, button.x, button.y)+90; button.rotation = angle; }Had to add 90 instead of subtract. Thanks again for your help!