# Overlap start and end

**URL:** <https://phaser.discourse.group/t/overlap-start-and-end/13214>\
**Category:** Phaser 3\
**Created:** [May 1, 2023, 7:47am UTC](https://phaser.discourse.group/t/overlap-start-and-end/13214 "2023-05-01T07:47:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kara.m](https://avatars.discourse-cdn.com/v4/letter/k/9dc877/32.png) [@kara.m](https://phaser.discourse.group/u/kara.m)\
**Post date:** [May 1, 2023, 7:47am UTC](https://phaser.discourse.group/t/overlap-start-and-end/13214/1 "2023-05-01T07:47:58Z")

</div>

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!)

```javascript
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);
        }

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 1, 2023, 1:18pm UTC](https://phaser.discourse.group/t/overlap-start-and-end/13214/2 "2023-05-01T13:18:50Z")

</div>

https://codepen.io/samme/embed/preview/WaZQOX?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=WaZQOX

---

<div class="post-metadata">

**Author:** ![kara.m](https://avatars.discourse-cdn.com/v4/letter/k/9dc877/32.png) [@kara.m](https://phaser.discourse.group/u/kara.m)\
**Post date:** [May 2, 2023, 6:11am UTC](https://phaser.discourse.group/t/overlap-start-and-end/13214/4 "2023-05-02T06:11:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kara.m](https://avatars.discourse-cdn.com/v4/letter/k/9dc877/32.png) [@kara.m](https://phaser.discourse.group/u/kara.m)\
**Post date:** [May 2, 2023, 9:11am UTC](https://phaser.discourse.group/t/overlap-start-and-end/13214/6 "2023-05-02T09:11:35Z")

</div>

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

````javascript
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);
                }
            }
````