Water effect - rectangle distort shader

Phaser 3
1

Hi,
I’m trying to create realistic water effect…

I need to create RECTANGLE with some SIZE and POSITION above tilemap and all what is rendered below it will be distorted like it’s under water…

Exactly like this official example but I need to apply this effect to specified area with position and size
http://labs.phaser.io/view.html?src=src\camera\game%20shader%20test%202.js

Is it possible?
I have no idea where to begin

Thanks for help

2

You could apply the shader to a new camera instance (setRenderToTexture), and size/position/scroll that camera based on the tilemap.

3

Ok, this works…
Only problem is I need to FIX camera to tileset position… currently camera still remain in viewport as I’m moving around world

4

does this work for you ?

camera.setPosition(400, 400)

this will mean if you scroll the other camera dictating your game (which may be like idk focused on your character or something), the other camera will stay static at 400,400

I also have confirmed that this does at least work with scenes testing with my own ui:

this.scene.get('Debug_Scene').cameras.main.setPosition(400, 400)

when my player walks around with a completely different other scene tracking its movement and scrolling, it sets my debug ui element at the 400,400 position and it doesn’t scroll with the char, almost as if its its own tile.