steffmeister Posted July 13, 2014 Share Posted July 13, 2014 Hi I'm new to Phaser and I got through some examples, a thing which I am interested now is a draggable sprite while p2js physics is activated. It is no problem with arcade physics, but when switching to p2js the sprite does not react to drags. I have searched the forums but didn't find a good solution. I also found nothing in the documentation why this is not working as with arcade pyhsics (but I may be a bad searcher). (Basically I want to make a balloon sprite which floats to the top and one should be able to pull it down, after this it should be againt rise to the top.)I have an (non-working) example here (its also here http://steffmeister.at/dev/phaser/demos/balloon.html):<!DOCTYPE html><html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src="../phaser-master/build/phaser.min.js"></script> <title>Drag Test</title> </head> <body> <script type="text/javascript"> window.onload = function() { var game = new Phaser.Game(600, 800, Phaser.AUTO, '', { preload: preload, create: create }); var ball; function preload () { game.stage.backgroundColor = '#fff4d9'; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.setScreenSize(); game.load.image('ball', 'ball.png'); } function create () { game.physics.startSystem(Phaser.Physics.P2JS); ball = game.add.sprite(50, 50, 'ball'); game.physics.enable([ball], Phaser.Physics.P2JS); game.physics.p2.gravity.y = -100; ball.inputEnabled = true; ball.input.enableDrag(true); ball.events.onDragStart.add(startDrag, this); ball.events.onDragStop.add(stopDrag, this); } function startDrag() { // You can't have a sprite being moved by physics AND input, so we disable the physics while being dragged ball.body.moves = false; console.log('startdrag'); } function stopDrag() { // And re-enable it upon release ball.body.moves = true; console.log('stopdrag'); } }; </script> </body></html>The events are fireing, so that is not the problem. Can someone tell me what I have to change to make this working? Kind regards,Stefan. Link to comment Share on other sites More sharing options...
pandavigoureux29 Posted July 16, 2014 Share Posted July 16, 2014 I have had the same problem. The only fix I've found is to make the body move with the mouse while the sprite is dragged. I believe P2 body blocks the dragging of the sprite. The same behaviour is to be noticed when you try moving the x or y property of a Sprite having a body : it won't budge an inch. You have to act on sprite.body.x (or y) instead.var sprite;function create(){ sprite.inputEnabled = true; sprite.input.enableDrag();}function update(){ if( sprite.input.isDragged ){ //BODY => follow pointer if( sprite.body != null ){ sprite.body.x = game.input.activePointer.worldX; sprite.body.y = game.input.activePointer.worldY; } }} Link to comment Share on other sites More sharing options...
lewster32 Posted July 16, 2014 Share Posted July 16, 2014 I think if you set sprite.body.static = true during the drag, you remove control of the sprite from the physics system, allowing it to move freely. Otherwise, the physics system is applying the position as calculated from the velocity of the body every frame, so it will either not move or jerk and vibrate as the two systems fight with one another. Link to comment Share on other sites More sharing options...
steffmeister Posted July 18, 2014 Author Share Posted July 18, 2014 I have had the same problem. The only fix I've found is to make the body move with the mouse while the sprite is dragged. I believe P2 body blocks the dragging of the sprite. The same behaviour is to be noticed when you try moving the x or y property of a Sprite having a body : it won't budge an inch. You have to act on sprite.body.x (or y) instead. Thanks for your code, this is working Link to comment Share on other sites More sharing options...
axxion Posted July 19, 2014 Share Posted July 19, 2014 Your example code not work in JSFiddle, why? http://jsfiddle.net/r2M8R/ Link to comment Share on other sites More sharing options...
pandavigoureux29 Posted July 19, 2014 Share Posted July 19, 2014 Well I don't know, I've not really ever used JSFiddle, but nothing is showing at the screen, so the problem doesn't not seem to come from my code only. Just for information, I think the "moves" property exists only with Arcade, not P2. So it won't do anything. Link to comment Share on other sites More sharing options...
lewster32 Posted July 19, 2014 Share Posted July 19, 2014 You need to add Phaser to jsfiddle in the external resources bit. Also, you can take out the window.onload stuff. http://jsfiddle.net/r2M8R/1/ Link to comment Share on other sites More sharing options...
JHook Posted July 29, 2014 Share Posted July 29, 2014 I thought I'd contribute this JSFiddle to the discussion. I referenced this JSFiddle from schteppe and modified it to work with Phaser. ( http://jsfiddle.net/WZNfe/1/ ) http://jsfiddle.net/9e8cd/ Please excuse the blank sprites... I had it using the tetris peices from examples.phaser.io because I built it to work inside the examples site. Unfortunately I can't load those into JSFiddle. Another note is that I'm creating the mouseBody directly as a new P2.Body() instead of using Phaser's built in P2 functions. I tried using Phaser's functions to create that body but was having trouble getting it to work. Anyways, I hope this helps some others! Link to comment Share on other sites More sharing options...
Recommended Posts