Skip to content
Rectangle clip shader for scrollable GUI containers
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
images
screenshots
videos
.gitignore
LICENSE
README.md
package.json
shader.shader

README.md

GUI Shader

Rectangle clip shader/mask for scrollable GUI containers.

Used for clipping container children. This is not a generic (stencil) solution, since it works with rectangles only.

Parent sprite, as well as each child sprites should have this shader on. Rectangular input values on each sprite should be set in sync with the parent. This gives the effect of children being clipped by the parent.

This should be implemented recursively for containers within other containers.

GUI Shader!

📺 Video

https://www.youtube.com/watch?v=K0f2Nj0DPso

🚀 More

When having a sprite that is a child of another masking sprite, all you have to do is to "push down" the masking information from a parent to the child, and saving it as child sprite's actual mask.

Furthermore, when having a sprite having multiple masking sprites up in the hierarchy, the actual mask is the INTERSECTION of all the masks up in the hierarchy (in their global coordinates, as observed by the orthographic camera). So the actual mask on each descendant sprite is the result of the AND operation of all the masks up in the hierarchy (pixel-by-pixel).

Whenever the user changes the mask on a parent, the system should go through each ancestor, look for SpriteRenderer components on each child and refresh their actual masks as described.

As an additional performance optimization, a kind of the "commit" command could be available on the parent, so the user could commit the change for the part of the hierarchy - but only when finished changing all the parent masks. This would then avoid the repetition of the process without a real purpose.

An interesting case happens when dealing with only rectangular masks: the resulting actual masks (intersections) of the child sprites are also rectangular. It's just like looking through multiple (stacked) windows, having random offset in X and Y direction.

You can’t perform that action at this time.