# Prevent Colliding Sprites From Overlapping?

**URL:** <https://phaser.discourse.group/t/prevent-colliding-sprites-from-overlapping/5795>\
**Category:** Phaser 3\
**Created:** [April 6, 2020, 1:31am UTC](https://phaser.discourse.group/t/prevent-colliding-sprites-from-overlapping/5795 "2020-04-06T01:31:02Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![JimLynchCodes](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jimlynchcodes/32/3090_2.png) [@JimLynchCodes](https://phaser.discourse.group/u/JimLynchCodes)\
**Post date:** [April 6, 2020, 1:31am UTC](https://phaser.discourse.group/t/prevent-colliding-sprites-from-overlapping/5795/1 "2020-04-06T01:31:02Z")

</div>

Ok, hopefully I can phrase this question succinctly…

Suppose I have two sprites- one is called “wallsSprite” that is basically the bounds of my game world.

Then I have another sprite called “playerSprite”, and just to keep this hypothetical question simple let’s say in the scene’s update function I increase the playerSprite’s x position value by 1 every frame.

In the scene’s “create” function I added a collider to check the collisions between these two sprites:

this.physics.add.collider(this.outOfBoundsWalls, playerFish, (x) =\> {  
console.log(‘collision!’)  
}, null, this)

This does indeed log the text when the two things are colliding, but the playerSprite can still go right through the walls.

So my question is- Is there a simple way to say that I want to prevent these two sprites from ever overlapping? Do I necessarily need to check in the update function that they are not overlapping before I increment the player’s x position, or is there some additional setting I can add when initializing the collider to prevent these sprites from overlapping?

thanks!

---

<div class="post-metadata">

**Author:** ![JimLynchCodes](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jimlynchcodes/32/3090_2.png) [@JimLynchCodes](https://phaser.discourse.group/u/JimLynchCodes)\
**Post date:** [April 6, 2020, 1:39am UTC](https://phaser.discourse.group/t/prevent-colliding-sprites-from-overlapping/5795/2 "2020-04-06T01:39:26Z")

</div>

Also, a separate but related issue- the walls are made from one big rectangle that has a 30pt stroke border and transparent fill. I was expecting the collision to only occur when the player moves into the walls (ie. the rectangle border).

However, it seems that it is also registering collisions when the playerSprite is touching only the inner transparent part of the rectangle. ☹

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [April 6, 2020, 8:03am UTC](https://phaser.discourse.group/t/prevent-colliding-sprites-from-overlapping/5795/3 "2020-04-06T08:03:01Z")

</div>

Hi,  
Phaser3 handle collisions with physics, if you increment the x position of a sprite there’s no collision détection. Instead you need to apply a velocity to the body sprite, and the sprite will automatically follow the body.

```javascript
sprite.body.setVelocityX(100);

```

---

<div class="post-metadata">

**Author:** ![JimLynchCodes](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jimlynchcodes/32/3090_2.png) [@JimLynchCodes](https://phaser.discourse.group/u/JimLynchCodes)\
**Post date:** [April 6, 2020, 2:46pm UTC](https://phaser.discourse.group/t/prevent-colliding-sprites-from-overlapping/5795/4 "2020-04-06T14:46:19Z")

</div>

Thanks @BlunT76 👍

Do I need to export each of the for walls as a separate image? It still thinks the transparent empty space in the middle of the rectangle is a party of the sprite… 🤔

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [April 6, 2020, 2:56pm UTC](https://phaser.discourse.group/t/prevent-colliding-sprites-from-overlapping/5795/5 "2020-04-06T14:56:35Z")

</div>

The sprite has a default size, the size of the png, you can resize it of course, with:

```javascript
sprite.setDisplaySize(width, height)

```

When you add a sprite to the physics, the sprite has now a body with the sprite size by default.  
But you can change it:

```javascript
sprite.body.setSize(width, height)
// and if needed an offset
sprite.body.setOffset(x, y)

```

You can’t develop a game without a display of bodies, so in the config game you need to add:

```javascript
physics: {
    default: 'arcade',
    arcade: {
      debug: true,
      debugShowBody: true,
      debugShowStaticBody: true,
    },
  },

```

Hope this helps

---

<div class="post-metadata">

**Author:** ![JimLynchCodes](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jimlynchcodes/32/3090_2.png) [@JimLynchCodes](https://phaser.discourse.group/u/JimLynchCodes)\
**Post date:** [April 6, 2020, 5:33pm UTC](https://phaser.discourse.group/t/prevent-colliding-sprites-from-overlapping/5795/6 "2020-04-06T17:33:19Z")

</div>

Thanks @BlunT76.

What I’m saying is that the body for every sprite is just it’s bounding rectangle.

To me, it doesn’t really make sense that the body creation doesn’t respect the transparency of the image at all.

IMO, it would be much better if the body was the parts of the image that are not fully transparent, rather than the entire rectangle surrounding the image…

---

<div class="post-metadata">

**Author:** ![UltimateProGrammer](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ultimateprogrammer/32/3069_2.png) [@UltimateProGrammer](https://phaser.discourse.group/u/UltimateProGrammer)\
**Post date:** [April 7, 2020, 12:31pm UTC](https://phaser.discourse.group/t/prevent-colliding-sprites-from-overlapping/5795/7 "2020-04-07T12:31:11Z")

</div>

Totally agree with this, but PhotonStorm doesn’t. Basically, if you make the bounding box not include the transparent parts of the image, what is to stop someone from making non square or circle shape in arcade physics?

What I’m saying is: I feel your pain. The only good way to make walls in phaser, even invisible ones, is to use the phaser editor, because without it you just spend all your time placing the walls in the right position, refreshing until you get it right.

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [April 7, 2020, 1:29pm UTC](https://phaser.discourse.group/t/prevent-colliding-sprites-from-overlapping/5795/8 "2020-04-07T13:29:25Z")

</div>

For walls, you usually not make them by hands. You use a tilemap. And you can make your maps with [Tiled](https://www.mapeditor.org/)  
Here’s an example:  
[https://labs.phaser.io/edit.html?src=src\game%20objects\tilemap\collision\simple%20map.js](https://labs.phaser.io/edit.html?src=src%5Cgame%20objects%5Ctilemap%5Ccollision%5Csimple%20map.js)

About Phaser 3 physics, you have 2 choice:

- Arcade: with square or round body boxes only, it’s extremely fast and allow games to run in low end devices.
- Matter: allow any kind of boxes shapes, pixel perfect is possible but more cpu intensive and harder to use i think (but never tried)

---

<div class="post-metadata">

**Author:** ![UltimateProGrammer](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ultimateprogrammer/32/3069_2.png) [@UltimateProGrammer](https://phaser.discourse.group/u/UltimateProGrammer)\
**Post date:** [April 7, 2020, 8:08pm UTC](https://phaser.discourse.group/t/prevent-colliding-sprites-from-overlapping/5795/9 "2020-04-07T20:08:39Z")

</div>

Matter is cool but super CPU intensive once you go past basic polygons and circles. It’s harder to use but I wouldn’t put it past a beginner to use it. I just did a quick game test with it the other day and figured out how to use most of it, though I noticed there is nothing as easy as `overlap` or `collider` on matter.

---

<div class="post-metadata">

**Author:** ![JimLynchCodes](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jimlynchcodes/32/3090_2.png) [@JimLynchCodes](https://phaser.discourse.group/u/JimLynchCodes)\
**Post date:** [April 7, 2020, 8:14pm UTC](https://phaser.discourse.group/t/prevent-colliding-sprites-from-overlapping/5795/10 "2020-04-07T20:14:58Z")

</div>

thanks guys!

man, that’s super depressing that arcade physics doesn’t support more control over the sprites bodies. It kind of defeats the purpose of having collision detection in the first place if the collisions are not based on the actual images of the sprites, don’t you think? 😥

I tried to change the physics to “matter” in my game config, and almost every line of code had an error because the matter api is so different from the arcade physics api, even in phaser! So basically if you want to switch over to matter you need to completely rewrite the game?

---

<div class="post-metadata">

**Author:** ![UltimateProGrammer](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ultimateprogrammer/32/3069_2.png) [@UltimateProGrammer](https://phaser.discourse.group/u/UltimateProGrammer)\
**Post date:** [April 8, 2020, 8:41pm UTC](https://phaser.discourse.group/t/prevent-colliding-sprites-from-overlapping/5795/11 "2020-04-08T20:41:48Z")

</div>

If you want to switch to matter, you should first look at what arcade only functions you are using. First of all, if your game uses `moveTo` or `moveToObject`, matter doesn’t have either of those functions and the math gets pretty confusing pretty quick (although it certainly isn’t impossible with the ol’ copy and paste technique)

If you aren’t using `moveTo` though, the transition should be relatively painless, as long as your willing to put in the time to read through [the Phaser Matter docs](https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Matter.html). Most things are there, though I still can’t wrap my head around collision groups yet. Ctrl-F is definitely your friend for switching over.

Additionally, if you want to go beyond just polygons, you’ll need to learn how to use [physics editor](https://www.codeandweb.com/physicseditor).

If you’re unsure what engine to use for your game, I recommend asking the community.

Going back to the original question, if _all you want to do is make walls_, matter is **not** the engine you should go for. Like BlunT said you should use Tiled.