using an overlap collision triggering things on and off

Recommended Posts

Hello there,

I'm working on 2d collision and stumbled across the overlap function.

I'm having trouble with something simple. I have an player entity and an npc entity with a physicsGroup set as a collision circle.

As the player touches the circle, I want the npc entity to interact in some way. (say, shoots bullets at the player)

I can easily listen to any collisions and trigger a boolean to true..

.. but am struggling to find a way to trigger to turn on or off depending on whether the player entity touches the collision circle.

For example: Sends a log to console "collided" if player collides. If player doesnt collide, send a log to console "not colliding".

Heres my entity code:

export const createEntity = (scene) => {

    entitySprite = scene.add.sprite(487, 249, '')
    entityPhysicsGroup ={})

    circleShape =, 0, 0, "0xfb00", 0.3)
    circlePhysicsGroup ={})
    circleShape.body.setCircle(128, -128, -128)

    isTouching = false

    scene.physics.add.overlap(circleShape, playerSprite, (e) => {
        isTouching = true

I've tried declaring the boolean as false both globally and in the createEntity function. I've also tried this in the updateEntity function that I have.

I personally would have thought that a second callback could be used to trigger a function if the player entity stops overlapping with the circle, or just something in general that listens when things are not touching. The boolean method may work but my logic used to implement it might be a little fuzzy.

Any thoughts and help would be much appreciated. 

From a phaser 3 newbie. :)

Share this post

Link to post
Share on other sites


i don't really know were is the problem in your code, but maybe i can show you my overlap code that works and you can find something useful.

 I have 2 sprites in create function: 

player = this.physics.add.sprite(200, 250, 'goku');
player2 = this.physics.add.sprite(400, 250, 'goku2', 'basic_05');

Then in create function i set bouncing and colliding for them:


And physics collider:

this.physics.add.collider(player, player2);

Then in update function i make this logic:

if(checkOverlap(player, player2)){
    if(key_x.isDown || key_z.isDown){
        hit_text.visible = true;
        hit_text.visible = false;
    hit_text.visible = false;

And i create outside function called checkOverlap:

function checkOverlap(spriteA, spriteB) {
    var boundsA = spriteA.getBounds();
    var boundsB = spriteB.getBounds();

    return Phaser.Geom.Intersects.RectangleToRectangle(boundsA, boundsB);

So basically i send two player sprites to that function which gets this two sprites bounds with getBounds function and return the RectangleToRectangle intersects function boolean of if the bounds were Intersected. If that's true, then i check if that overlap was triggered by key_x or key_z (key_x is my sprite punches and key_z is my sprite kicks, so that if goku power up's and overlap the other sprite, it wouldn't count for hit). 

So maybe you should try Intersects functions, there is RectangleToRectagle and others, look at this link there is couple of examples of them.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.