CODEWITHSUNDEEP
javascriptspritegame-physicsphaser-framework
max pleaner
max pleaner

Reputation: 26788

How to collide with custom sprite bounds in Phaser

I have a file pickle.png with a custom hitbox in a pickle.json file like this which I created using PhysicsEditor.

{ 

    "pickle": [

        {
            "density": 2, "friction": 0, "bounce": 0, 
            "filter": { "categoryBits": 1, "maskBits": 65535 },
            "shape": [   468, 156  ,  399, 214  ,  365, 222  ,  387, 98  ,  414, 100  ,  443, 113  ,  467, 131  ]
        } ,
    // etc
    ]
}

In my preload function I put this:

    this.game.load.physics("pickle_physics", "pickle.json");

and in the create function:

    game.physics.startSystem(Phaser.Physics.P2JS);

    this.pickle = game.add.sprite(400, 300, '/pickle.png');
    game.physics.p2.enable(this.pickle, true);
    this.pickle.body.loadPolygon('pickle_physics', 'pickle');

    // this is a separate sprite with default bounds
    this.foo = mt.create('foo1');
    game.physics.p2.enable(this.foo, true);

if I inspect foo and pickle in the browser console they are both the same kind of sprite object.

Now I want to make them collide, so I add this to the update function:

    this.game.physics.arcade.collide(
        this.foo, this.pickle, function(foo, pickle) {
        }, null, this
    )

The net result of all of this is what you can see in the following gif (note, cylindrical object is a kool-aid soaked pickle):

game

They are not colliding at all, and the pickle looks terrible. I don't want to see the rectangle around it, or the vertices.

I see there's an example here but I'm having trouble making sense of it.

edit great news, I've made a bit of progress with the help of the collision-groups example.

    // collision setup for non-rectanular sprites
    game.physics.p2.setImpactEvents(true);
    game.physics.p2.restitution = 0.8;
    foo.body = new Phaser.Physics.P2.Body(game, foo, 0, 0)
    var foo_collision = game.physics.p2.createCollisionGroup();
    var pickle_collision = game.physics.p2.createCollisionGroup();
    game.physics.p2.updateBoundsCollisionGroup();
    this.foo.body.setCollisionGroup(foo_collision);
    this.foo.body.collides([foo_collision, pickle_collision]);
    this.pickle.body.setCollisionGroup(pickle_collision);
    this.pickle.body.collides(foo_collision, function(pickle, foo) {
        console.log('hit')
    }, this);

At first I had an error with this because foo.body didn't respond to setCollisionGroup. foo.body was constructed using Arcade physics, so I needed to replace it with a Phaser.Physics.P2.Body instance. The result of this is I have collisions, but not in the custom bounds:

enter image description here

Upvotes: 3

Views: 2845

Answers (1)

max pleaner
max pleaner

Reputation: 26788

I had to change the following lines

game.physics.p2.enable(this.pickle, true);
game.physics.p2.enable(this.foo, true);

and make it false instead of true . The true means it's debug mode, and will show all those ugly borders and vertices. This is covered in the following tutorial, which was very useful in all this: https://www.codeandweb.com/physicseditor/tutorials/phaser-p2-physics-example-tutorial.

Second, before this.pickle.body.loadPolygon('pickle_physics', 'pickle'); I needed to add this.pickle.body.clearShapes(); to remove the outer rectangle bounds.

The result is this:

enter image description here

Upvotes: 2

Related Questions