How to mask/clipping a sprite?

I need a solution for masking sprites like GUI Clipping mode or this in Unity.
I found this solution but it uses discard; and it masks everything. Also results are not smooth as I want.

Maybe It is possible by using a second texture with alpha for sprite shader? But I have no idea how to implement it. I couldn’t find anything similar on shadertoy(such a terrible site :frowning: ).

Does anyone has a solution for sprite base(not for everything) masking (with shader+stencil perhaps)?

00

1 Like

I’m on my phone right now, but perhaps you could use some variation of this?

1 Like

I’ll publish an example for how you can do this relatively soon, I need to strip it out of an existing project.

What I do is I have a render target where I draw white masks onto a black clear. So on your GOs of whatever you want masked you need to attach a sprite with the mask shape as a white png with transparency. If you wanted some fading in the mask just erase parts of it. A black/white png with no transparency would probably work too.

Then you use the “mask”, with all of the masks drawn onto it, render target as the extra alpha in a shader to mask off areas of whatever you want masked. This requires masked objects to be drawn to their own render predicate too.

The final product is then drawn to a unit quad like other post processing effects are. If you follow the color grading tutorial you can probably learn enough to implement this yourself.

9 Likes

Also interested in this! Would be great to mask a sprite.

2 Likes

Any news about this?

RenderMask.zip (401.5 KB)

Here’s my thing wasd to move around, but it’s not in a release ready state and has some issues with window scaling and the texture offsets of the storm texture UVs because I couldn’t figure out a way to make them proportional to window scale (for masking regular sprites it’s probably fine)(if you figure out how to make the UV offsets proportional please tell me!!). Check the render script it has active to see how it’s doing its magic. You can draw sprites in the proper way around the scene and mask off different rendering layers based on the sprite mask shapes. If you have questions I can probably help. You can mask any shape, the snowflake is an example.

Example of snowflake mask (click it to see version with grey background) basically it is using same code as DF fonts I only needed it for the BR game though so it can scale up super big, for regular scenes you could probably just use solid black/white sprites. :slight_smile:

I was making a 2D battle royale game but the engine pausing while minimized/resizing was a deal breaker, and also is currently killing any multiplayer game I wanted to make.

I later or anyone else whenever could make this into a polished general use sprite masking thing.

3 Likes

@britzl

We’ll discuss this during our planning session tomorrow. The task has not yet been estimated. Once we have an idea of size and complexity we can plan this.

3 Likes

Thank you for the example. It didn’t work for me but inspecting it would be very educational.

Dealing with shaders are so sensitive a specially for mobile games. Sprite masking is a very very useful tool for game devs. Since It is very problematic, I believe we need a build in solution for most used things like sprite outline, masking/clipping.

Just sharing the errors on Macos, I’m going to try to fix them when I got time:

What OS are you on? It works for me on Win10 but probably some shader incompatibilities.

Sprite alpha clipping would be useful. As would ability to generate our own mesh shapes for GUI clipping.

For match3 games in particular need mesh shape clipping really badly.

On MacOS. This is a good example of why I’m calling these solutions a problematic.

It really would only need more testing to fix the platform specific issues. Like switch float to int or int to float in whatever it is complaining about. Here is how it looks on Win 10.

Sure, there is always a way out. But testing and fixing require lot of time and effort for different devices and specs. It is so hard to fix them as a small team or a one person indie.
And there are other issues that you mention like window scaling, texture offsets and maybe more…

Thank you again, It look so smooth on the video. I will look deep into when I got time.

1 Like

There is some formula to get the UVs right clearly but I don’t know it. Some expert would have to say it. It would be extremely useful to know because this has many applications for gamedev with proper scaling.

Luckily we can crowd source these things so none of us are alone in this!

2 Likes

Shaders are always my hurts.

1 Like

To fix this particular shader, you only need to replace each int literal with a floating literal, i.e. 10 -> 10.0, and so on.

1 Like

Thank you, I know and I will. But actually that is not my point.

For whatever reason, Defold on windows seems to be extra forgiving when it comes to shaders. I don’t think you will have the same issues developing from Mac.

I had similar problems making my lighting demo from windows, and got around it by testing with HTML builds, which are more strict.

1 Like

I guess I couldn’t explain myself correctly. What I’m trying to achieve/meant is the same with GUI Clipping but for sprites.
I’m looking for a shader based solution for build-in sprite.

Something like this:


or

https://docs.unity3d.com/Manual/class-SpriteMask.html

  • Without using quads
  • Per sprite from an atlas(with multiple sprites in it)
  • Works with diffent OpenGL vesions, especially for mobile
  • Fast (minimum draw calls, batched (if possible))

shader

With GOs, I think the minimum is still something like 3 draw calls per clipped layers. One for the things you are clipping, one for drawing their masks, one for drawing the render target. Then you would need 2 predicates per layer too. You currently cannot do this without using a render target with GOs as far as I know. Multi texture support is still not in. I could make a simplified sample project closer to what you want sometime in the future.

Multi texturing isn’t in yet Defold roadmap H1-2019 - Q1 summary

I don’t know how it will work but hopefully it will make doing stuff like this easier. It needs to be able to really intelligent about UV space for textures in atlases to be useful for this if it’s just ability to apply multiple textures straight to a sprite it will barely be useful. Ideally we want to be able to apply multiple kinds of textures from atlases so we can do other cool things like complex lighting on sprites eventually too.

1 Like