Collisions not working when using Phaser & webpack

Recommended Posts

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 ( Templates/Webpack) and an example from the website ( 

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.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.
    //  Enable the physics bodies on all the sprites
    game.physics.p2.enable([ tetris1, tetris2, tetris3 ], false);
    tetris1.body.loadPolygon('physicsData', 'tetrisblock1');
    tetris2.body.loadPolygon('physicsData', 'tetrisblock2');
    tetris3.body.loadPolygon('physicsData', 'tetrisblock3');
    // create physics body for mouse which we will use for dragging clicked bodies
    mouseBody = new p2.Body();;
    // 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 =, [0, 0], clickedBody, [game.physics.p2.mpxi(localPointInBody[0]), game.physics.p2.mpxi(localPointInBody[1]) ]);


function release() {

    // remove constraint from object's body


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:

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

Thanks in advance,


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.