9-Sliced sprite as a mask for texture

[artfabrique]

Hi there!
Is it possible to use one 9-sliced sprite as a mask for texture2d?
Here is a sceenshot:

The idea is to have different button shapes and colors in a game but we are very limited in our UI atlas in terms of memory (huge number of windows popups etc)

I guess that now you are creating 9-sclice scalable sprites using UVs and geomenty, and there is no way to get a bitmap snapshot of a final(already scaled) sprite so it could be used as a mask in a shader. But maybe there is a way to do 9-slicing via shader too?

[bac9]

First of all, if you absolutely need to keep the background a separate sprite, add identical alpha and slicing setup to it. Computing actual clipping to add it behind the frame is an overkill.

Now, for the tiled texture overlay, yeah, that's not possible using exclusively existing UI elements. There are two ways out of this:

A: Rethink the design to remove the need for tiled areas in all border quads, then use Advanced sprite type that allows you to set fill type individually on per-quad basis and use Tiled type for the central quad. Or maybe create an inward transparency fade in the sliced sprite, disable the fill of the central quad and insert the anchored tiled sprite underneath, that works too and would allow you to get the tiled pattern closer to corners (although you'll still have to use the inward halo with flat color).

B: Use the approach practically every single game with heavy effects on UI elements does: post processing through shaders. Create a shader and a component following the Image Effect pattern in Unity that will overlay your UI camera with scrolling texture masked using alpha of UI camera output.

I'd recommend the last one, it's clean object hierarchy-wise, it gives you enormous freedom to do stuff like glitches, varied scrolling control etc at a completely flat cost.

[artfabrique]

Now, for the tiled texture overlay, yeah, that's not possible using exclusively existing UI elements.

May be there is a "C" way: write a 9-slice pixel shader that will take 4 coords: top,bottom,left,right OR even take rects (x,y,w,h) for each of 9 pieces and will combine these atlas areas in one single scalable sprite?

[ArenMook]

Occam's razor guys.

You have something that can be achieved easily using 2 clipped regions. One regular, and another tilted 45 degrees, creating a second set of sliced corners.

So do just that -- 2 clipped panels affecting your tiled sprite.

[bac9]

Occam's razor guys.

You have something that can be achieved easily using 2 clipped regions. One regular, and another tilted 45 degrees, creating a second set of sliced corners.

So do just that -- 2 clipped panels affecting your tiled sprite.

It's implied they want every single UI element to be styled like that, which makes that setup (2 panels per rect element) practically impossible

[ArenMook]

Yup, but at some point it will become a question of simplicity. If you need something that looks like that, and it can't be tiled or sliced, then the only other thing left is to just have a sprite that looks exactly like you want it to begin with, and not worry about anything else.

[artfabrique]

B: Use the approach practically every single game with heavy effects on UI elements does: post processing through shaders. Create a shader and a component following the Image Effect pattern in Unity that will overlay your UI camera with scrolling texture masked using alpha of UI camera output.

Could you please explain a little bit more on this method?