Make only a part of scene zoomable and draggable

Phaser 3
1

I have a windowed game where only 800x600 part of the screen is zoomable and draggable in these bounds. I solved this by using a second camera and setting viewport.

But If I create a sprite above this zoomed part, these sprites are also affected by the second camera’s zoom. Can you offer me a better design for this special part of the screen? Maybe using the scaling of sprite instead of using a second camera?

this.mapCamera = this.world.scene.cameras.add(0, 0, 800, 600);
this.mapCamera.setBounds(0, 0, 800, 600);
this.zoomLevel = 2;
this.mapCamera.setZoom(this.zoomLevel);
this.mapCamera.centerOn(300, 400);

this.world.mapSprite.on(Phaser.Input.Events.GAMEOBJECT_POINTER_MOVE, (pointer) => {
	this.mapCamera.scrollX -= (pointer.x - pointer.prevPosition.x) / this.zoomLevel;
	this.mapCamera.scrollY -= (pointer.y - pointer.prevPosition.y) / this.zoomLevel;
});

this.world.scene.input.on(Phaser.Input.Events.POINTER_WHEEL, async (pointer, currentlyOver, deltaX, deltaY, deltaZ) => {
	if (deltaY) {
		this.zoomLevel /= 2;
		this.mapCamera.pan(x, y, 360, 'Power2');
		this.mapCamera.zoomTo(this.zoomLevel, 400);
	}

	if (deltaY < 0 && !this.zoomInProgress) {
		this.zoomLevel *= 2;
		this.mapCamera.pan(x, y, 360, 'Power2');
		this.mapCamera.zoomTo(this.zoomLevel, 400);
	}
});

image
image1026×775 8.27 KB

image
image1026×775 8.14 KB

2

With multiple cameras, you probably want to use ignore() to allocate game objects to one camera or the other.

3

Do you think launching another scene and making its camera’s viewport 800x600 is a better option?

4

That would be fine, yes.