Alexver

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 (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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.