How do I call a callback function when two objects stop overlapping?

[GreenCloversGuy]

I am a hobbyist game developper and I've been trying to get into Phaser 3 recently as I enjoy using Javascript. I'm making an rpg-like and I'm trying to make a very basic "Press x to talk" system. I'm trying to get an image to show when the player is within range of an NPC.  

 

class WorldScene extends Phaser.Scene{

  constructor(){
    super('WorldScene')
  }

  preload(){

  }

  create(){


    this.NPC = new NPC(this, 200, 90, 0x00FF00)

    this.player = new WorldUnit(this, 50, 100, 'player', 0)

    this.cursors = this.input.keyboard.createCursorKeys();

    this.player.addOverlap(this.NPC);
    this.NPC.addOverlap(this.player);

  }

  update ()
  {
    this.player.update();
    this.NPC.update();
  }
}

class Unit extends Phaser.GameObjects.Sprite{
    constructor(scene, x, y, texture, frame) {
    super(scene, x, y, texture, frame);
    scene.add.existing(this);
  }
  addOverlap(targetCollider, func){
    this.scene.physics.add.overlap(this, targetCollider, func, false, this.scene);
  }
}

class NPC extends Unit {

  constructor(scene, x, y, color){
    super(scene, x, y, 'player', 1);
    scene.add.existing(this);
    scene.physics.add.existing(this);
    this.setTintFill(0x000000);
    this.body.setCircle(20, -10, 0);
    this.talkalert = new Phaser.GameObjects.Image(scene, x, y-10, 'icons', 49)
    this.talkalert.setScale(0.2)
    this.talkalert.alpha = 0;
    scene.add.existing(this.talkalert)
    
  }
  addOverlap(targetCollider){
    super.addOverlap(targetCollider, ()=>{
      this.talkalert.alpha = 1;
    })
  }

  update(){

  }
}

I've not shown the WorldUnit class as there is currently no events being shared between the two so I believe that the code can only be completed in the NPC class. 

I'm able to use my addOverlap method to add the overlap event to my program, and it does cause my "talk" icon to show up, however it stays there forever and I can't find any code that will set the alpha of my icon back to 0. I have tried multiple things, including the following:

this.body.touching.none (Taken from this example)

Does most of what I want it to do, however if the player is inside of the code and does not move then this.body.touching.none becomes true and the icon disappears. I do not know why this is happening.

  addOverlap(targetCollider){
    super.addOverlap(targetCollider, ()=>{
      //this.talkalert.alpha = 1;
    })
  }

  update(){
    this.talkalert.alpha = this.body.touching.none ? 0 : 1;
  }

'

setting the alpha back to 0 in the update loop (Taken from this Phaser 2 forum post)

Causes the alpha to be constantly set to 0, I believe that update is running after the collider callback is running so, even though the callback is setting the alpha to 1, it's being set back to 0 before the image can be rendered. 

  addOverlap(targetCollider){
    super.addOverlap(targetCollider, ()=>{
      this.talkalert.alpha = 1;
    })
  }

  update(){
    this.talkalert.alpha = 0
  }

 

I feel like there's something obvious that I'm missing in my research and I'm approaching this problem all wrong, I would really appreciate it if someone could help me improve my code. 

[samme]

function update () {
  if (this.body.embedded) {
    this.body.touching.none = false;
  }

  if (body.touching.none && !this.body.wasTouching.none) {
    // Collision just ended
  }
}

 

[GreenCloversGuy]

Thank you for your response! Out of curiosity, do you think that using an overlap and a modified body is the correct way of doing this?

[cornstipated]

it is one way  but it is so desperately dependant on phaser. Why not a simple check for distance in the npc update loop 

[samme]

On 10/11/2018 at 2:35 PM, GreenCloversGuy said:

I believe that update is running after the collider callback is running so, even though the callback is setting the alpha to 1, it's being set back to 0 before the image can be rendered.

This is correct. You could either move the overlap calls into the update method, after resetting the alpha (this is just like the Phaser 2 example), or you could bind to the scene's preupdate event and reset the alpha there.

[samme]

Overlap start, overlap end

[GreenCloversGuy]

8 hours ago, cornstipated said:

it is one way  but it is so desperately dependant on phaser. Why not a simple check for distance in the npc update loop 

I suppose I could do, but I'm trying to learn Phaser 3 and make use of it's features! In addition, using bodies and physics helps make my code more structured in a way that makes sense to me. I'd rather control both my player and my NPC and their interactions though methods in the classes and through the scene they are both placed in. It wouldn't be impossible to create a method for the NPC class that would take a list of objects for my NPC to interact with and test the distance, but just trying to think through it now is making my head hurt. 
 

2 hours ago, samme said:

This is correct. You could either move the overlap calls into the update method, after resetting the alpha (this is just like the Phaser 2 example), or you could bind to the scene's preupdate event and reset the alpha there.

That is interesting. Thanks for confirming my assumptions about the engine. I have rewritten my code to include your first post earlier with success, but I might edit it so I can create an "addOverlap" method for my class, as it makes sense to me the way I've written my program. I was a bit annoyed by how difficult this was, but now seeing this I understand the logic a bit better.