SetInteractive Order is prioritized instead of gameObject depth when receiving events for overlapped gameObjects

Phaser 3
1

Hello! I was working with phaser in my own project when I got stuck in this very weird issue that took me a long time to investigate. I have 2 game objects, a rectangular menu, and some text on top of it, and I have pointerup events for both of them. When I click on the text, it does not receive the event, but instead the rectangle receives it, even though the text is rendered later and also on top of the rectangle. It took me a long time to figure out but it turns out that because I called set interactive first on the rectangle, if they both listen to the same event, only the first one that had setInteractive called receives it. Should it not be the first gameObject at the top in terms of depth?

As I have a library that abstracts away the rendering and the setInteractive call of the text and rectangle, I can’t really just “change” the order of setInteractive called on the game objects, and it doesn’t make sense to me intuitively, maybe I am missing something? Hopefully someone can help me with this

Sample code (the base phaser logic is abstracted away by vue, <Rectangle> just calls scene.add.rectangle and setInteractive etc)

const rectangle1 = ref<GameObjects.Rectangle>();
const text1 = ref<GameObjects.Text>();

watch([rectangle1, text1 ], ([newRectangle1, text1 ]) => {
  if (!(newRectangle1 && text1)) return;

  newRectangle1.setInteractive(); <--- Swapping these 2 calls around would swap the console log messages
  text1.setInteractive();
});
</script>

<template>
  <Rectangle
    :on-complete="
      (rectangle) => {
        rectangle1 = rectangle;
      }
    "
    @[`${Input.Events.GAMEOBJECT_POINTER_UP}`]="
      () => {
        console.log('1');
      }
    "
  />
  <Text
    :on-complete="
      (text) => {
        text1 = text;
      }
    "
    @[`${Input.Events.GAMEOBJECT_POINTER_UP}`]="
      () => {
        console.log('2');
      }
    "
  />

image
image1704Ă—192 20.6 KB

2

:wave:

Maybe check the GitHub issues, both open and closed.

1 Like
3

Thanks for the reply! So far the closest issue I found was overlapping containers Problem with over/out events for two overlapping containers - #2 by samme
This seems to be a similar issue except this also doesn’t seem to work even though there are no containers here, I tried debugging to the source code, and it might be some hit area priority that’s incorrect since it’s based on setInteractive order, should I raise this as an issue on github?

4

This is similar:

1 Like
5

Yes… I think this might be an issue after all, I’ll raise an issue on github, thanks for confirming!

6

After a huge amount of debugging and pain, it turns out that the bug will occur if you do the following 2 things.

  1. Make the Phaser Game class a vue ref i.e. const game = ref(new Game())
  2. Add Phaser Scenes after the game event “ready”. (Yes, I don’t know why, but it turns out if you add it before “ready” it still works)

In case anyone else is attempting vue + phaser integration I’ll just leave this finding here. The easiest solution is simply just use a base game, and a computed ref instead. e.g. Esposter/lib/phaser/store/phaser.ts at main · Esposter/Esposter · GitHub