title: How to collide with custom sprite bounds in Phaser
body: <p>I have a file <code>pickle.png</code> with a custom hitbox in a <code>pickle.json</code> file like this which I created using PhysicsEditor.</p>
  
  <pre><code>{ 
  
      "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
      ]
  }
  </code></pre>
  
  <p>In my preload function I put this:</p>
  
  <pre><code>    this.game.load.physics("pickle_physics", "pickle.json");
  </code></pre>
  
  <p>and in the create function:</p>
  
  <pre><code>    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);
  </code></pre>
  
  <p>if I inspect <code>foo</code> and <code>pickle</code> in the browser console they are both the same kind of sprite object.</p>
  
  <p>Now I want to make them collide, so I add this to the update function:</p>
  
  <pre><code>    this.game.physics.arcade.collide(
          this.foo, this.pickle, function(foo, pickle) {
          }, null, this
      )
  </code></pre>
  
  <p>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):</p>
  
  <p><a href="https://i.stack.imgur.com/A8WCC.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A8WCC.gif" alt="game"></a></p>
  
  <p>They are not colliding at all, and the pickle looks terrible. I don't want to see the rectangle around it, or the vertices.</p>
  
  <p>I see there's an example <a href="https://phaser.io/examples/v2/p2-physics/collide-custom-bounds" rel="nofollow noreferrer">here</a> but I'm having trouble making sense of it.</p>
  
  <hr>
  
  <p><em>edit</em> great news, I've made a bit of progress with the help of the <a href="https://phaser.io/examples/v2/p2-physics/collision-groups" rel="nofollow noreferrer">collision-groups</a> example.</p>
  
  <pre><code>    // 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);
  </code></pre>
  
  <p>At first I had an error with this because <code>foo.body</code> didn't respond to <code>setCollisionGroup</code>. <code>foo.body</code> was constructed using Arcade physics, so I needed to replace it with a <a href="https://phaser.io/docs/2.6.2/Phaser.Physics.P2.Body.html" rel="nofollow noreferrer">Phaser.Physics.P2.Body</a> instance. The result of this is I have collisions, but not in the custom bounds:</p>
  
  <p><a href="https://i.stack.imgur.com/glMdv.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/glMdv.gif" alt="enter image description here"></a></p>