Collisions not working when using Phaser & webpack

[Alexver]

I'm making a game using Phaser, P2 physics and webpack. When it comes to P2 I can not use custom physic shapes because they won't collide with world bounds.

I'm using Phaser webpack example template (https://github.com/photonstorm/phaser-ce/tree/master/resources/Project Templates/Webpack) and an example from the website (https://phaser.io/examples/v2/p2-physics/pick-up-object). 

The point is that when using custom colision shapes, entities won't collide. But they do if I use the default squared shapes or the circle ones that Phaser provide.
The game code is simple and you can check it here:

/**
 * Import Phaser dependencies using `expose-loader`.
 * This makes then available globally and it's something required by Phaser.
 * The order matters since Phaser needs them available before it is imported.
 */

import PIXI from 'expose-loader?PIXI!phaser-ce/build/custom/pixi.js';
import p2 from 'expose-loader?p2!phaser-ce/build/custom/p2.js';
import Phaser from 'expose-loader?Phaser!phaser-ce/build/custom/phaser-split.js';


var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

    game.load.image('tetrisblock1', 'assets/sprites/tetrisblock1.png');
    game.load.image('tetrisblock2', 'assets/sprites/tetrisblock2.png');
    game.load.image('tetrisblock3', 'assets/sprites/tetrisblock3.png');

    game.load.physics('physicsData', 'assets/physics/sprites.json');

}

var tetris1;
var tetris2;
var tetris3;
var mouseBody;
var mouseConstraint;

function create() {
        
    //  Enable p2 physics
    game.physics.startSystem(Phaser.Physics.P2JS);
    game.physics.p2.gravity.y = 1000;
    
    tetris1 = game.add.sprite(300, 100, 'tetrisblock1');
    tetris2 = game.add.sprite(375, 200, 'tetrisblock2');
    tetris3 = game.add.sprite(450, 300, 'tetrisblock3');
    
    //  Create collision group for the blocks
    var blockCollisionGroup = 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();
    
    //  Enable the physics bodies on all the sprites
    game.physics.p2.enable([ tetris1, tetris2, tetris3 ], false);
    
    tetris1.body.clearShapes();
    tetris1.body.loadPolygon('physicsData', 'tetrisblock1');
    tetris1.body.setCollisionGroup(blockCollisionGroup);
    tetris1.body.collides([blockCollisionGroup]);
    
    tetris2.body.clearShapes();
    tetris2.body.loadPolygon('physicsData', 'tetrisblock2');
    tetris2.body.setCollisionGroup(blockCollisionGroup);
    tetris2.body.collides([blockCollisionGroup]);
    
    tetris3.body.clearShapes();
    tetris3.body.loadPolygon('physicsData', 'tetrisblock3');
    tetris3.body.setCollisionGroup(blockCollisionGroup);
    tetris3.body.collides([blockCollisionGroup]);   
    
    // 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);

}

function update() {
}

function render() {

//  game.debug.text(result, 32, 32);

}

If you need to have a look at the project, you can check it here: https://github.com/alexZalachenko/Phaser-Webpack
 

Any toughts about why the collisions are not working when using custom collision shapes?

Thanks in advance,

Alex

[Alexver]

Up

[samid737]

#366

[Alexver]

48 minutes ago, samid737 said:

#366

Thank you. Thought it was my fault and it was driving me crazy!

[samme]

Fixed in phaser-ce/releases/tag/v2.8.8.