Need help to code logic for interaction with npc

Phaser 3
1

Hello there. I’m currently working on some interaction with an npc, which in my code I named entity. My idea is to use a conditional switch to go between different states. If the player overlaps with, then I can display some text to show that it is active and can be interacted with. Pressing Z, while overlapping, would then display some text, maybe some npc dialogue.

Heres my code:

import { Player } from '../classes/Player.js'
import { Entity } from '../classes/Entity.js'

let expression = "IDLE"

export class GameScene extends Phaser.Scene {
    constructor() {
        super('Game')
    }
    create() {
        // create fadein
        this.cameras.main.fadeIn(1000, 0, 0, 0)
        // create input
        this.keys = this.input.keyboard.addKeys('W, S, A, D, P')

        // create player
        this.player = new Player(this, '')
        this.player.setVicinityCircle(1, 1)
        this.player.setPosition(200, 300)

        this.entity = new Entity(this, '')
        this.entity.setVicinityCircle(40, 40)
        this.entity.setPosition(300, 300)
  
    }
    update(time, delta) {
        this.player.update(this, time)
        this.player.handleInput(this.keys, delta)

        console.log(expression);

        expression = "IDLE"
        this.physics.add.overlap(this.player.getSprite(), this.entity.getCircleShape(), () => {
            expression = "TOUCHING"
        })
        
        switch(expression) {
          case "IDLE":
            // code block
            console.log("in idle state");
            break;
          case "TOUCHING":
            // code block
            console.log("in touching state");
            break;
          default:
            // code block
        }
   }
}

Each time I let the player touch the entity, the switch does not recognize the code that I want triggered. In my code, I have placed in a console log statement for each expression in the switch.

My first attempt was to draw a circle around the entity, and then add a listener to listen and trigger something every time the circle overlaps with the player, ideally display text to indictate that the player and circle have overlapped. I tried to incorporate a switch, which has not worked for me in both the create function and update function.The switch would have different states, that would change depending on if playing has overlapped with circle. I think i’m misunderstanding something in its logic, as I can’t figure this out as well as I wish I could.

Ive also considered using a state machine, but that seems to complicate it all.

If someone could help enlighten me on the best way to approach a problem like this, I would very much appreciate it.
:sweat_smile:

EDIT:

this.text.visible = false

switch(expression) {
  case "IDLE":
    // code block
    console.log("in idle state");
    break;
  case "TOUCHING":
    this.text.visible = true
    console.log("in touching state");

    // code block
    break;
  default:
    // code block
}

expression = "IDLE"
this.physics.add.overlap(this.player.getSprite(), this.entity.getCircleShape(), () => {
    expression = "TOUCHING"
})

Ok this seems to do something. I have a piece of text showing everytime I overlapp with the circle. But how can I do a keypress while I’m hovering over it, so it can enter a new state, which triggers some new text or a dialogue window (ui).

I am not sure if this is the best method here, if anyone can enlighten me I would much appreciate it.

Thanks.

2

So like this.

3

Thanks Milton.