Overlap start and end

Phaser 3
1

Hi
I wanna to do something when two objects are starting overlap and stop it when they are not over on them

i write this code but just first log was log in console(Player and platform are overlapping!)

for (let g_info of this.games_info) {

            const portal_info = maps.games.find(p => p.name === g_info.name);

            if (portal_info == undefined) continue

            this.card = this.add.image(portal_info.asset1.x, portal_info.asset1.y, portal_info.asset1.name)
                .setScrollFactor(1, 1)
                .setScale(portal_info.asset1.scale)

            if (g_info.banner) {
                // ask the LoaderPlugin to load the texture
                this.load.image(g_info.name, g_info.banner)
                this.load.once(Phaser.Loader.Events.COMPLETE, () => {
                    // texture loaded so use instead of the placeholder
                    this.card.setTexture(g_info.name)
                    this.card.setDisplaySize(75, 150, 0.5)
                })
            }

            let graphic = this.physics.add.image(portal_info.asset2.x, portal_info.asset2.y + 100, portal_info.asset2.name).setScale(portal_info.asset2.scale);
            this.physics.add.existing(graphic);
            graphic.body.checkCollision.right = false;
            graphic.body.checkCollision.left = false;
            graphic.body.checkCollision.up = false;
            graphic.body.checkCollision.down = false;

            graphic.body.setImmovable(true);
            graphic.body.allowGravity = false;
          
            graphic.setVisible(true);
            graphic.setInteractive()
            graphic.setDepth(0)


            graphic.info = g_info

        
            this.physics.add.overlap(this.o.player, graphic, overlapGameAndPlayerHandler, null, this);

            this.o.platform_garphics.push(graphic)

      
        }


function overlapGameAndPlayerHandler(player, platform) {
            console.log('Player and platform are overlapping!', this.physics.world);

            // Register the overlapStart event
            this.physics.world.on('overlapstart', function (bodyA, bodyB, shapeA, shapeB, contact) {
                if ((bodyA === this.o.player.body && bodyB === graphic.body) || (bodyA === graphic.body && bodyB === this.o.player.body)) {
                    console.log('Overlap started between player and platform!');
                }
            }, this);

            // Register the overlapEnd event
            this.physics.world.on('overlapend', function (bodyA, bodyB, shapeA, shapeB) {
                if ((bodyA === this.o.player.body && bodyB === graphic.body) || (bodyA === graphic.body && bodyB === this.o.player.body)) {
                    console.log('Overlap ended between player and platform!');
                }
            }, this);
        }
2

1 Like
4

this is a good idea
i havnt seen this way to define an listener on phaser
but it isnt work when we have more than one physical objects in our scene
in my case, i wanna to define overlap start and end with specific object
thank you

6

this is a part of my create()
i wanna to set a different welcome message for each game
in this case, we have to section
first section is define games and ane list of games
and second section is watch when player overlap start with my game portal, message will showing
and when player was going out of portal, that message visibilety set to false

bellow of this code, i paste the codes are in update()
if anybody can help me, i appreciate his or shes knowldge

for (let g_info of this.games_info) {

            const portal_info = maps.games.find(p => p.name === g_info.name);

            if (portal_info == undefined) continue

            this.card = this.add.image(portal_info.asset1.x, portal_info.asset1.y, portal_info.asset1.name)
                .setScrollFactor(1, 1)
                .setScale(portal_info.asset1.scale)


            if (g_info.banner) {

                this.load.image(g_info.name, g_info.banner)
                this.load.once(Phaser.Loader.Events.COMPLETE, () => {

                    this.card.setTexture(g_info.name)
                    this.card.setDisplaySize(75, 150, 0.5)
                })
            }

            let graphic = this.physics.add.image(portal_info.asset2.x, portal_info.asset2.y + 100, portal_info.asset2.name).setScale(portal_info.asset2.scale);
            this.physics.add.existing(graphic);
            this.physics.world.enable(graphic);

            graphic.body.checkCollision.right = false;
            graphic.body.checkCollision.left = false;
            graphic.body.checkCollision.up = false;
            graphic.body.checkCollision.down = false;

            graphic.body.setImmovable(true);
            graphic.body.allowGravity = false;
            graphic.setVisible(true);
            graphic.setInteractive()
            graphic.setDepth(0)

            graphic.info = g_info

            this.o.platform_garphics.push(graphic)

            this.o.player.on('overlapstart', (player, gameObject) => {
                const isGamePortal = this.o.platform_garphics.some(graphic => graphic === gameObject)
                if (isGamePortal) {
                    this.o.reach_target = {
                        type: "game",
                        info: gameObject.info
                    }
                    console.log('overlapstart', this.o.reach_target)
                }
            })
            this.o.player.on('overlapend', (player, gameObject) => {
                const isGamePortal = this.o.platform_garphics.some(graphic => graphic === gameObject)
                if (isGamePortal) {
                        this.o.reach_target = {
                            type: "",
                            info: ""
                        }
                }
            })

        }```

//update()

if (this.o.reach_target.type && this.o.reach_target.info) {
                this.o.enterMsg.setVisible(true)
            }
            else {
                this.o.enterMsg.setVisible(false)
            }

            for (let i = 0; i < this.o.platform_garphics.length; i++) {
                let graphic = this.o.platform_garphics[i];
                if (this.physics.overlap(this.o.player, graphic)) {

                    this.o.player.emit("overlapstart", this.o.player, graphic);
                }
                else {
                    this.o.player.emit("overlapend", this.o.player, graphic);
                }
            }