# Changing collision box with Matter

**URL:** <https://phaser.discourse.group/t/changing-collision-box-with-matter/4183>\
**Category:** Phaser 3\
**Created:** [November 8, 2019, 5:54am UTC](https://phaser.discourse.group/t/changing-collision-box-with-matter/4183 "2019-11-08T05:54:02Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![quasipickle](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/quasipickle/32/2277_2.png) [@quasipickle](https://phaser.discourse.group/u/quasipickle)\
**Post date:** [November 8, 2019, 5:54am UTC](https://phaser.discourse.group/t/changing-collision-box-with-matter/4183/1 "2019-11-08T05:54:02Z")

</div>

Hi all,

I’ve just started playing around with Phaser 3, and I’m having trouble adjusting a sprite’s collision box. I’m rotating entities, so I have to use the Matter engine (which sucks, as approximately 100% of the examples use Arcade)

My code’s a mess (I’m still in the _can I do this?_ phase), but basically I have:

**Preload**

```javascript
this.load.spritesheet(
	'ship',
	'assets/ship.png',
	{
		frameWidth:100,
		frameHeight:208
	}
);

```

The “ship” is a 2 frame sprite - frame 1 has just the ship, frame 2 has the ship with exhaust. I’m trying to adjust the collision box so the exhaust portion of the sprite doesn’t collide with anything.

**Create**

```javascript
window.player = this.matter.add.sprite(
        this.cameras.main.width/4,
        this.cameras.main.height/2,
        'ship'
    )
    // this moves the rotation point to the middle of the ship
    // instead of the middle of the sprite
    .setOrigin(0.5,0.2);

// I thought this should do it, but the pink box doesn't change
window.player.setSize(200,200);

```

How do I change the collision box? I know I can change the initial frame height when loading the sprite sheet, but that clips off the exhaust.

Here’s a screenshot of what I have, without the exhaust: [https://imgur.com/a/kWHntCU](https://imgur.com/a/kWHntCU). I’d like the pink pox to be snug to the ship, but allow the exhaust to still be seen.

Any other tips would also be helpful. Documentation on Phaser 3 + Matter.js seems pretty non-existent.

---

<div class="post-metadata">

**Author:** ![smjn](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/smjn/32/2087_2.png) [@smjn](https://phaser.discourse.group/u/smjn)\
**Post date:** [November 8, 2019, 8:57am UTC](https://phaser.discourse.group/t/changing-collision-box-with-matter/4183/2 "2019-11-08T08:57:02Z")

</div>

For a simple box that you want to change for a frame, I think the easiest solution is to change the vertices of the box and/or position of the box when this frame is active.

You can change the collision box position with: window.player.body.position.x and y  
You can change the vertices with window.player.body.vertices[0] to [3], 0 being the top left.

Some links of use:  
[https://rexrainbow.github.io/phaser3-rex-notes/docs/site/matterjs-world/](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/matterjs-world/) \<- has more pages with matter info.  
[https://medium.com/@michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-1-958fc7e6bbd6](https://medium.com/@michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-1-958fc7e6bbd6) \<- excellent 4 part tutorial on using phaser and matter  
[https://www.codeandweb.com/physicseditor/tutorials/how-to-create-physics-shapes-for-phaser-3-and-matterjs](https://www.codeandweb.com/physicseditor/tutorials/how-to-create-physics-shapes-for-phaser-3-and-matterjs) \<- Using PhysicsEditor tutorial  
[https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Matter.html](https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Matter.html) \<- Phaser 3 docs  
[https://brm.io/matter-js/docs/](https://brm.io/matter-js/docs/) \<- Full matter docs  
[https://labs.phaser.io/index.html?dir=physics/matterjs/&q=](https://labs.phaser.io/index.html?dir=physics/matterjs/&q=) \<- Lots of examples using matter

---

<div class="post-metadata">

**Author:** ![quasipickle](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/quasipickle/32/2277_2.png) [@quasipickle](https://phaser.discourse.group/u/quasipickle)\
**Post date:** [November 8, 2019, 3:11pm UTC](https://phaser.discourse.group/t/changing-collision-box-with-matter/4183/3 "2019-11-08T15:11:56Z")

</div>

I can’t play around with your solution right now as I’m at work, but I’ll take a look when I get home. Thanks for the advice & links.

---

<div class="post-metadata">

**Author:** ![quasipickle](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/quasipickle/32/2277_2.png) [@quasipickle](https://phaser.discourse.group/u/quasipickle)\
**Post date:** [November 9, 2019, 12:14am UTC](https://phaser.discourse.group/t/changing-collision-box-with-matter/4183/4 "2019-11-09T00:14:12Z")

</div>

Neither of those suggestions worked. Setting the position changed the position of the whole object. I wasn’t able to get any tweaking of the vertices to produce anything usable.

However, your links convinced me to bite the bullet and use PhysicsEditor and TexturePacker. Creating an atlas with TexturePacker, then explicitly setting the frame (as opposed to an animation), resulted in the box being snug to the graphic.

Thanks.

---

<div class="post-metadata">

**Author:** ![roberto257](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/roberto257/32/2314_2.png) [@roberto257](https://phaser.discourse.group/u/roberto257)\
**Post date:** [November 15, 2019, 8:27pm UTC](https://phaser.discourse.group/t/changing-collision-box-with-matter/4183/5 "2019-11-15T20:27:00Z")

</div>

I have use PhysicsEditor and TexturePacker in my game. Can I ask how you implemented what you mean when you say “setting the frame” instead of an animation? I have an animation, but I want the sprite’s body/hitbox to stay “snug” like you said with the image

---

<div class="post-metadata">

**Author:** ![quasipickle](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/quasipickle/32/2277_2.png) [@quasipickle](https://phaser.discourse.group/u/quasipickle)\
**Post date:** [November 15, 2019, 11:14pm UTC](https://phaser.discourse.group/t/changing-collision-box-with-matter/4183/6 "2019-11-15T23:14:27Z")

</div>

“setting the frame” didn’t make the box snug, using an atlas did. As to why - I can’t say. My _guess_ is the atlas sets the source size (ie, size of the sprite) when the sprite is initially created, and setting the frame later doesn’t update the physics box.

To create my sprite I did:

```javascript
let Ship = this.matter.add.sprite(
    xCoord,
    yCoord,
    'ship-atlas.png',
    'initial-ship-frame.png'
);

```

That was enough to make the box snug. Later, to set the frame when accelerating, I do:

```javascript
this.setFrame('exhaust-ship-frame.png');

```

Does that help?

---

<div class="post-metadata">

**Author:** ![roberto257](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/roberto257/32/2314_2.png) [@roberto257](https://phaser.discourse.group/u/roberto257)\
**Post date:** [November 16, 2019, 4:11am UTC](https://phaser.discourse.group/t/changing-collision-box-with-matter/4183/7 "2019-11-16T04:11:58Z")

</div>

Do you know if this works when using animations?

---

<div class="post-metadata">

**Author:** ![quasipickle](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/quasipickle/32/2277_2.png) [@quasipickle](https://phaser.discourse.group/u/quasipickle)\
**Post date:** [November 16, 2019, 6:03pm UTC](https://phaser.discourse.group/t/changing-collision-box-with-matter/4183/8 "2019-11-16T18:03:07Z")

</div>

I don’t know. I believe you can specify animations in TexturePacker, so maybe referring to the atlas for your animations will have the same affect.

---

<div class="post-metadata">

**Author:** ![quasipickle](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/quasipickle/32/2277_2.png) [@quasipickle](https://phaser.discourse.group/u/quasipickle)\
**Post date:** [November 16, 2019, 10:47pm UTC](https://phaser.discourse.group/t/changing-collision-box-with-matter/4183/9 "2019-11-16T22:47:29Z")

</div>

@roberto257

Ok, I did a little experiment this afternoon and I got it working.

Here’s the sprite sheet I used to test. It’s kind of hard to see on a white background, but the 2nd & 4th frames have a little yellow exhaust.  
 ![sprites](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/e7914617bd5af68bb36238a45210a204e14ad50b.png)

The frame names are, in order:

1. `1.png`
2. `2.png`
3. `1A.png`
4. `2A.png`

Here’s the JSON atlas:

```javascript
{
	"textures": [
		{
			"image": "sprites.png",
			"format": "RGBA8888",
			"size": {
				"w": 16,
				"h": 72
			},
			"scale": 1,
			"frames": [
				{
					"filename": "1.png",
					"rotated": false,
					"trimmed": false,
					"sourceSize": {
						"w": 16,
						"h": 16
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 16,
						"h": 16
					},
					"frame": {
						"x": 0,
						"y": 0,
						"w": 16,
						"h": 16
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "1A.png",
					"rotated": false,
					"trimmed": false,
					"sourceSize": {
						"w": 16,
						"h": 20
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 16,
						"h": 20
					},
					"frame": {
						"x": 0,
						"y": 16,
						"w": 16,
						"h": 20
					},
					"anchor": {
						"x": 0.5,
						"y": 0.4
					}
				},
				{
					"filename": "2.png",
					"rotated": false,
					"trimmed": false,
					"sourceSize": {
						"w": 16,
						"h": 16
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 16,
						"h": 16
					},
					"frame": {
						"x": 0,
						"y": 36,
						"w": 16,
						"h": 16
					},
					"anchor": {
						"x": 0.5,
						"y": 0.5
					}
				},
				{
					"filename": "2A.png",
					"rotated": false,
					"trimmed": false,
					"sourceSize": {
						"w": 16,
						"h": 20
					},
					"spriteSourceSize": {
						"x": 0,
						"y": 0,
						"w": 16,
						"h": 20
					},
					"frame": {
						"x": 0,
						"y": 52,
						"w": 16,
						"h": 20
					},
					"anchor": {
						"x": 0.5,
						"y": 0.4
					}
				}
			]
		}
	]
}

```

You’ll see the frames without exhaust are 16x16, and the frames with exhaust are 16x20. That different frame size is reflected in the individual frames’ `sourceSize` property.

It appears the physics box is set by the size of the first frame in the animation. Here’s my setup code (which is in a class that extends the basic Phaser.Scene class, hence the usage of `this`)

```javascript
this.player = this.matter.add.sprite(400,300,'sprite-atlas','1.png');
this.anims.create({
	key:'still',
	frames:this.anims.generateFrameNames('sprite-atlas',{
		start:1,
		end:2,
		suffix:'.png'
	}),
	frameRate:8,
	repeat:-1
});

this.anims.create({
	key:'moving',
	frames:this.anims.generateFrameNames('sprite-atlas',{
		start:1,
		end:2,
		suffix:'A.png'
	}),
	frameRate:8,
	repeat:-1
});

this.player.anims.play('still');

```

If I modified the creation line to:

```javascript
this.player = this.matter.add.sprite(400,300,'sprite-atlas','1A.png');

```

Then the physics box was 20 pixels high - since that’s the size of the `1A.png` frame.

Finally, I had to adjust the anchor/pivot points because the `*A.png` frames were taller, so 0.5 was at 10 pixels, not 8 (why those anchor points are decimals rather than actual pixel values is a mystery to me).

After all that, I can toggle between the “still” and “moving” animations and the physics box will stay just around the ship - the exhaust is displayed outside the physics box.

Hopefully that helps.