How to work properly with setInteractive ()?

Phaser 3
1

Hey there
I develop a game kind of Tic Tac Toe.
All game grid item are placed inside a container.
Each grid item has its own setInteractive()
Also the game has info popup with semi transparent overlay, some background and button.
The popup itself is a separate scene that runs parallel to the game.
Popup overlay code:

let rt = this.add.renderTexture(0, 0, gameWidth, gameHeight);
rt.fill(0x000000, 0.5);

I need to block user interaction with the game grid
THE PROBLEM:

  1. The pop-up scene is located above the the game grid and its overlay covers the game grid, but clicks on the playing field still work. Even when I’ve added rt.removeInteractive(); . Why?
  2. Then I’ve added container.disableInteractive() for game grid container. But nothing happened and all nested items are still interactive. Why? What is the point of applying disableInteractive to a container?
2

:wave:

If they’re two separate scenes, pause the game scene when the popup appears.

disableInteractive() and removeInteractive() are used only after setInteractive() on the same game objects. So you should be calling disableInteractive() on the grid items. But pausing the scene is probably simpler.