Group and Drag

[Uridarkner]

Hi everybody,

I'm actually ( with 3 others ) on the devellopements of a coding game ( Human Ressource Machine type ). I'm working on the "drag and drop" section :

You drag a "box" and drop it into a specific area, then you can pick another same box and do it again, then ( the difficult part ) i want that, if you take a third box and want to put it between the first two, they will move so that the third box can be drop between them. 

The drag party was easy, but now i have to use the collision part and it's kind of difficult because phaser has only example ( the docs really not helpfull in my opinion ).

So i've begin to work with groups, i create a group of box with physics ( P2JS ), i created the boxes themself but when i want to enable the drag part, they give me an error : 

Uncaught TypeError: Cannot read property 'enableDrag' of null

Here is the code, error is caused by 

     box.input.enableDrag();

window.onload = function() {
	var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create , update: update});
	function preload() {
	    game.load.image('boxes', 'js/img/mushroom2.png');
	}

	function create() {
		game.physics.startSystem(Phaser.Physics.P2JS);

		//  Enable P2
	    game.physics.startSystem(Phaser.Physics.P2JS);

	    //  Turn on impact events for the world, without this we get no collision callbacks
	    game.physics.p2.setImpactEvents(true);

	    game.physics.p2.restitution = 0.8;

	    //  Create our collision groups. One for the player, one for the pandas
	    var boxCollisionGroup = game.physics.p2.createCollisionGroup();

	    //  This part is vital if you want the objects with their own collision groups to still collide with the world bounds
	    //  (which we do) - what this does is adjust the bounds to use its own collision group.
	    game.physics.p2.updateBoundsCollisionGroup();

	    var boxes = game.add.group();
	    
	    boxes.enableBody = true;
	    boxes.physicsBodyType = Phaser.Physics.P2JS;

	    for (var i = 0; i < 4; i++)
	    {
	        var box = boxes.create(game.world.randomX, game.world.randomY, 'boxes');
	        box.inputEnabled = true;
	        box.input.enableDrag();
	        
	        box.body.setRectangle(40, 40);

	        //  Tell the panda to use the pandaCollisionGroup 
	        box.body.setCollisionGroup(boxCollisionGroup);

	        //  Pandas will collide against themselves and the player
	        //  If you don't set this they'll not collide with anything.
	        //  The first parameter is either an array or a single collision group.
	        box.body.collides(boxCollisionGroup);
	    }


	}

	function update(){
		
	}

	function render(){
	}

}

Thanks for reading and futur answer ! I'll take advice too, if you think i'm not making it in the right way ( and don't know a lot about phaser i've juste started ).

P.S : I'm a french guy so french answer are really welcome  

[Roilen]

Hello! I'm not sure if the problem is still actual, but since there is now answer I'll give one, as I was googling the same issue and found a solution eventually. Maybe it will be helpful to others, who face the same issue at the begging of learning Phaser and P2

Dragging is not that simple in P2 Physics, as it is in Arcade. You can look through this example: http://phaser.io/examples/v2/p2-physics/pick-up-object

You need to create mouseBody and operate with it on interacting with objects: 

 

function create() {

//  Enable p2 physics
    game.physics.startSystem(Phaser.Physics.P2JS);

// create physics body for mouse which we will use for dragging clicked bodies
    mouseBody = new p2.Body();
    game.physics.p2.world.addBody(mouseBody);
        
    // attach pointer events
    game.input.onDown.add(click, this);
    game.input.onUp.add(release, this);
    game.input.addMoveCallback(move, this);
}

function click(pointer) {

    var bodies = game.physics.p2.hitTest(pointer.position, [ tetris1.body, tetris2.body, tetris3.body ]);
    
    // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system
    var physicsPos = [game.physics.p2.pxmi(pointer.position.x), game.physics.p2.pxmi(pointer.position.y)];
    
    if (bodies.length)
    {
        var clickedBody = bodies[0];
        
        var localPointInBody = [0, 0];
        // this function takes physicsPos and coverts it to the body's local coordinate system
        clickedBody.toLocalFrame(localPointInBody, physicsPos);
        
        // use a revoluteContraint to attach mouseBody to the clicked body
        mouseConstraint = this.game.physics.p2.createRevoluteConstraint(mouseBody, [0, 0], clickedBody, [game.physics.p2.mpxi(localPointInBody[0]), game.physics.p2.mpxi(localPointInBody[1]) ]);
    }   

}

function release() {

    // remove constraint from object's body
    game.physics.p2.removeConstraint(mouseConstraint);

}

function move(pointer) {

    // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system
    mouseBody.position[0] = game.physics.p2.pxmi(pointer.position.x);
    mouseBody.position[1] = game.physics.p2.pxmi(pointer.position.y);

}

As for me, it looks a bit complicated, unless you need P2 physics for your purposes. 

Actually, I'm developing the same game mechanics as you do - dragging the object in special area, and the object can move other objects in area, if player wants to place it in between. And Arcade Physics is enough for me.