Recently I saw a post, asking for 2D reflection solution(CC3 - 2D Reflection), so I made a simple demo for it.
Build Preview: Cocos Creator | ScarletWitch
If we simplely use 2 cameras, 1 cam for the land to capture rendertexture and render it into the water, another cam for both the land and water, this will cost double drawcalls for the land.
So I improve it a little bit, 1 Cam for all game objects, this cam will capture all game objects and generate rendertexture.
1 Cam for Land and Water renderers, which share the same rendertexture’s spriteframe from the first cam, so it will only gain 2 drawcalls for this 2 renderers.
For the last Cam, it is used for UI objects only.
The final drawcalls is 8, 1 base + 1bg +1 hero +2 effect +1 ui + 2 renderers.
Even if we put more game objects , it only gains 2 drawcalls for the 2renderers as well.
Okay, look back to the water reflection solution.
For the the 1st Cam, Rect is used to capture only the top 63% of the canvas sight.
and then the RT is used for both land and water renderers.
A custom shader effect is made in this demo, for land, it uses the same content size as the canvas, and Sample from RT is being used here.
For water renderer, since it only has to show the top half of the RT, and not need to flip it, so a tiling Macro is added to this shader.
For water waves, it updates the wave texture’s uv, and the original uv is added with this offset.
.
The wave looks well, but it is hoped that the water can be more vivid.
So I add some caustic into the shader as well.
Then the water’s color should be darker in bottom area, so color step is added here, which smoothstep the color based on uv.y.
and alpha is also be steped based on uv.y, which makes the top area with less opaciy, and it looks like the water wave flowing to the land.
.
At last I add a simple FSM and controller for the character, so the RT cam can follow the HERO.
The odd thing is, the water looks like forozen, when our character walks out of the screen.
This takes some time to deal with it, it may need to give the water wave and caustics a reversed speed of the character’s movespeed, to make it looks more realistic:).
And I will add more contents into this demo to make it playable.
Free Code Here( Support me with your stars:D)