Jump to content

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 = scene.physics.add.group({})

    circleShape = scene.add.circle(0, 0, 0, "0xfb00", 0.3)
    circlePhysicsGroup = scene.physics.add.group({})
    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. :)

Link to comment
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 http://labs.phaser.io/index.html?dir=geom/intersects/&q= there is couple of examples of them.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...