Custom overlap: full overlap only

Phaser 3
1

I’m making a level where a player has to “take a picture” of an object.
I want the overlap to count only if the object you’re taking a picture of is fully within the picture frame.

This beautiful rendition in Paint should explain it better:
overlap

I’m currently trying to modify this code to suit my needs. It works, but it still recognises partial overlap as viable, which is what I want to exclude. Basically, I don’t want “touching” or “partial overlap” to count as overlapping.

update() {
  this.astros.getChildren().forEach(astro =>{
      // Treat 'embedded' as 'touching' also
      if (astro.body.embedded) {
        astro.body.touching.none = false
      };

      var touching = !astro.body.touching.none;
      var wasTouching = !astro.body.wasTouching.none;
  
      if (touching && !wasTouching) {
        astro.emit("overlapstart");
        console.log("overlap start");
      }
      else if (!touching && wasTouching) {
        astro.emit("overlapend");
        console.log("overlap end");
      }
    });
}

Any help would be greatly appreciated

2

You could make some quick geometry objects based on your other objects and use Phaser.Geom.Intersects, just not sure how performant it would be in the update loop.

3

I already have sprites with bodies (one recrangle and multiple circles to intersect with) Will this work with those instead of creating geometry objects?

I have a mechanic where it is important which exact circle the rectangle is intersecting with (i.e. you are given an object to take a picture of, you need to find the matching one on the playing field and interact with it)