Prevent Colliding Sprites From Overlapping?

Phaser 3
1

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!

2

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. :frowning:

3

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.

sprite.body.setVelocityX(100);
1 Like
4

Thanks @BlunT76 :+1:

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… :thinking:

5

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

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:

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:

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

Hope this helps

6

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…

7

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.

8

For walls, you usually not make them by hands. You use a tilemap. And you can make your maps with Tiled
Here’s an example:
https://labs.phaser.io/edit.html?src=src\game%20objects\tilemap\collision\simple%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)
9

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.

10

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? :disappointed_relieved:

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?

11

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

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.

1 Like