topOnly Like Behavior Across Zones/Scenes

Phaser 3
1

Hello.
I am making a computer for an upcoming game, and I’m using the drag scenes tutorial as a reference for creating and dragging new scenes. One thing that I’ve noticed is that setTopOnly doesn’t seem to work on these draggable scenes. Here is the documentation for setTopOnly.

The code I am using to create the scenes is very similar to what the demo shows.

createWindow(func) {
		if(apps < 25) {
		this.count += 1;
		var handle = 'window' + this.count;

        var win = this.add.zone(100, 100, func.WIDTH, func.HEIGHT).setInteractive().setOrigin(0);

        var demo = new func(handle, win);

        this.input.setDraggable(win);

        win.on('drag', function (pointer, dragX, dragY) {
            this.x = dragX;
            this.y = dragY;
			this.win = win;
            demo.refresh()

        });

		win.on('pointerdown', function () {
            demo.refresh()

        });
		
		setInterval(()=>{
			if(sleeping == true) {
				win.destroy();
			}
		}, 500)
        this.scene.add(handle, demo, true);
		}
	}

I would think the solution would be to make win use setTopOnly, but the documentation says the default is true (which isn’t the behavior I’m getting). Any Ideas?

1 Like
2

Hi @UltimateProGrammer,
In the drag scenes example, each new scene is created on top of the others, and never changes its z-index (depth). topOnly only affects the behavior of the input plugin, but not the z-index of the objects.
The Zone object (win) has the method setDepth for this task.
In your case the solution would be something like this:

createWindow(func) {
		if(apps < 25) {
		this.count += 1;
		var handle = 'window' + this.count;

        var win = this.add.zone(100, 100, func.WIDTH, func.HEIGHT).setInteractive().setOrigin(0);

        var demo = new func(handle, win);

        this.input.setDraggable(win);

        win.on('drag', function (pointer, dragX, dragY) {
            this.x = dragX;
            this.y = dragY;
            demo.refresh()

        });


		win.on('pointerdown', function () {
             this.setDepth(Date.now());

        });
		
		setInterval(()=>{
			if(sleeping == true) {
				win.destroy();
			}
		}, 500)
        this.scene.add(handle, demo, true);
		}
	}

Regards.

1 Like
3

Thanks for the reply. That doesn’t work for me for some reason. Here is the code I used (the same as yours basically)

win.on('pointerdown', function () {
      demo.refresh();
      this.setDepth(Date.now());
});
4

Can you be more specific? What’s going wrong, exactly?

5

Sorry, I should have been more clear in the original post.

For example, let’s say I have two windows. A is the one I’m trying to click on. B is the window behind A. Let’s say A has a really big button on it, and B also does. If I click on A’s button, but it happens that B’s button is right behind it, it will also trigger B. I can try to get a live demo, but I will have to do that wen I have more time later today.

Sorry if this is unclear, feel free to ask clarifying questions.

One thing I did notice now that I look at it again, is that win.on('pointerdown'... doesn’t trigger when this happens.

6

And the windows are the scenes? You may want this.input.setGlobalTopOnly(true).

2 Likes
7

That worked perfectly.