Cleaning and generating puddles

[mnyan]

Hi there!

Our team is developing a game where one of the mechanics is cleaning puddles with a mop. Some of them are placed in the level beforehand, while others need to be generated in runtime. We’d like the cleaning system to be similar to the ones in Out Of Space (Out of Space - Game Trailer - YouTube) or Super Mario Odyssey (https://youtu.be/OBi8RFlDFt0?t=31)specifically the way a part of the puddles disappear when the mop or Mario’s hat touches them. Our main inspiration for generating the puddles is Splatoon.

We’ve been looking into render targets, decals, vertex painting, opacity and depth operations… But we’re kinda lost :’) Could it be a shader what these games are using? How would you guys implement such a feature?

If anyone can give us some hints on where to start, or point us in the right direction, we’d very much appreciate it.

Thanks in advance!!

[MostHost_LA]

Pretty simple with a render target and a custom brush.
copy from the content example render target.
it shows you how to draw to it at runtime.
use that plus the broom location to mask out the puddle material.

To create a puddle just toss a mesh down with the material. You generate the puddle in the material making use of distance to nearest surface to direct the flow.
And you also have distance field gradients to push liquid back from objects in a more natural way.

Determining when the puddle is cleared up could be more of a challenge.
you’d have to compare the puddle to the mask to determine how well it was erased out analytically.
You would do this in pure math because reading pixels is a time hog.

The concept would be that whatever math generated the puddle can be used in code to create a data set. Because distance to nearest isn’t really a thing in code, maybe hook up into the nav mesh system to prevent the math having unreachable areas.

The cleaning script is still the mop running over the same areas so the data can be modified/popped/erased as more is clean up, potentially giving you a nice percentage read out.

Ideally the math expands/creates the puddle immediately compared to the material which will do it over time but based on similar math).
as far as what that math may be… no idea. Flow sim math is hard.

[mnyan]

@MostHost_LA

Pretty simple with a render target and a custom brush.
copy from the content example render target.
it shows you how to draw to it at runtime.
use that plus the broom location to mask out the puddle material.

To create a puddle just toss a mesh down with the material. You generate the puddle in the material making use of distance to nearest surface to direct the flow.
And you also have distance field gradients to push liquid back from objects in a more natural way.

Determining when the puddle is cleared up could be more of a challenge.
you’d have to compare the puddle to the mask to determine how well it was erased out analytically.
You would do this in pure math because reading pixels is a time hog.

The concept would be that whatever math generated the puddle can be used in code to create a data set. Because distance to nearest isn’t really a thing in code, maybe hook up into the nav mesh system to prevent the math having unreachable areas.

The cleaning script is still the mop running over the same areas so the data can be modified/popped/erased as more is clean up, potentially giving you a nice percentage read out.

Ideally the math expands/creates the puddle immediately compared to the material which will do it over time but based on similar math).
as far as what that math may be… no idea. Flow sim math is hard.

Thank you for your detailed answer! It seems like render targets are indeed the way to go. We’ll experiment with that and hopefully we’ll post an update soon!