Multiple collision / overlap bounding boxes in a sprite

Phaser 3
1

Hi, I’m wondering what’s the best way to implement multiple collision areas for a sprite in Phaser 3. Use cases I have in mind:

  1. To have a larger overlap area to pick up items, and a smaller overlap area to receive enemy damage.

  2. In a top-down game, to have a small collision body at the feet, to collide against walls, etc. and a larger overlap area to receive enemy damage.

  3. To have different bounding boxes to get hurt than for attacking.

At the moment I’ve been solving no. 3 by spawning a new sprite for the duration of the attack animation. However, since Phaser 3 doesn’t have addChild for sprites, this is a bit messy.

I don’t know what’s the best way to do no.1 and 2. Change the body shape/size before each collision / overlap check every frame? What would be the performance implications for that? Would it be better to spawn invisible sprites? What’s the best way to “sync” those sprites positions, rotation. etc. then?

Thanks!

2

I just make Zones, inject physics bodies into them(Matter) and set their XY to the sprite’s XY in the update function. Not sure if this is the best method either, but the docs suggest that placing physics objects into container children can get wonky and I wasn’t able to achieve that. I also use zones instead of invisible sprites because sprites “take a fraction longer to process and have a larger API footprint”. I’d say it’s less expensive to have game objects in the scene all the time rather than resizing, making and destroying them constantly.

3

Thanks! I was not familiar with Zones, they weren’t on Phaser 2, but they do seem a good solution, although having to manually sync them sounds a bit painful.

One question: where do you keep the references to the zones? Let’s say I have a pool of enemies and each one has a property with a hit zone on it. If I want to check if there’s overlap between those hit zones and the player’s bullets, it gets messy, because I couldn’t just pass the pool/group to the overlap function. Either I’d have to build an array of zones each frame, or I’d need to have this array be permanent and sync it when enemies are spawned/destroyed…

4

I keep everything related to the creature in it’s state, which is a basic sprite game object extended with my custom functions and properties. I use the object composition pattern here to reuse and modularize as much logic as possible to other creatures. And every individual creature also adds its own update function to a Set that gets iterated in the scene’s main update function.

As for collision, I use Matter and have a global callback to the collisionstart and collisionend events in which I check all the colliding pairs and their numeric labels. If a collision happens between two bodies with certain labels I just take the reference to their game object from the matter body and do what I want with it. That way I don’t have to attach each event to each object. I’m not sure if you can do the same thing in Arcade.

I have a tendency to do a lot of things “my way” in Phaser games and it can often make things much easier and more optimized, as long as you properly structure your code around it as to not end up with unreadable and confusing code.

1 Like