I was following the info found in this thread (more specifically, this post ), but couldn’t seem to achieve the same results via UI Toolkit…
I’d like to “mask” the red fill from appearing outside of the shape’s border, without losing any transparent parts in the background “border” image. All elements have flex set to Shrink 1, Grow 1, and my hierarchy is as follows:
-
empty root container (to hold two halves of the heart, even though only one half is shown above)
-
container with background image set to left heart “border” image, and overflow set to hidden
-
child element with background image of red heart fill
In the image above I’m using textures, but I’ve also tried SVG images with the new Vector Graphics API and it still presents me with this very same issue, but also the images come out looking worse in my case.
EDIT: and to anyone wondering, I’ve also tried having #heart-left-filled be a child of an empty container with overflow set to hidden, and it gave me the exact same results as the above image
The masking geometry is currently not customizable : it is the element’s rectangle, and the mask will have a rounded corner if there is any defined on the shape.
The other thread you linked was truncating the image with a straight line, and not a custom masking shape.
You can see in the roadmap that the UI masking is in progress.
Thanks for the quick response! Glad to hear this will eventually be a supported feature.
In the meantime, I’m open to any workarounds, if there are any that don’t require me to drop the use of UI Toolkit.
Maybe I can render to texture and manually mask the texture somehow?
Some kind of shader magic, perhaps?
You can assign render textures inside visual elements. As they are not considered static, modification to the original ones will be taking effect immediately. You could also create different texture and change them on the fly using code (whether you use the image component or just the visual element background property)
Finally, maybe we could use the color to achieve something interesting: I have a few ideas in mind, but they would depend on the actual color/design of your UI: Can you share a mockup of the intended result in your game?
I was mostly just trying to see if I could recreate what you see in that other thread, the only difference being I was also rendering out a greyscale video of water bubbles to a rendertexture to use as the “fill”. The idea was to use the color (or image tint) of the VisualElement to modify the actual color of the video, and to have the video masked from the top so it wouldn’t stretch.
I did manage to achieve something like this using SVG images, but the video would stretch and so it didn’t really look so good, amongst other things involving SVG images not rendering both the border and fill to match up correctly. There were weird artifacts in the way the geometry was created by the Vector Graphics API, I’m assuming.
I would assume something is going on with the stretch behaviors for the SVG images. Instead of adding them as background, you could use the image component to have a better control on the size/scaling.
I just had another idea:
If you are familiar with building your own mesh, why not set the UV directly?
Here is a snippet that ran after that the mesh was build to adjust the UV on each vertex base on their height (it was used for a linear gradient)
// Write UVs and adjust origin all in one go
for(int i = 0; i < vertList.Count; ++i)
{
Vertex vert = vertList[i];
vert.uv = new Vector2(0, 1.0f -(vert.position.y / height));
vert.position += (Vector3)origin;
vertList[i] = vert;
}
In your case, you would leave the mesh at the same place, but change the UV values so that it point to the new value in the video.
In your video, maybe add one line to the texture fill with transparent pixels and set the sampling of the texture to clip.
I don’t know if the idea is clear: don’t hesitate to ask other questions if something is lacking.
Well one idea I thought of trying out is…
You have two UI Documents:
- PlayerHUD - Contains all HUD elements, including a VisualElement with it’s background set to be a “RenderedHeart” rendertexture
- HeartStatus - The actual vertical hp/mana progress bar
And then you have two separate panel settings:
- HUD - Default settings to render to the screen
- Heart - Target texture set to “HeartOut” rendertexture
Then, using Graphics.Blit(Texture source, RenderTexture dest, Material mat), you run the “HeartOut” texture through a MaskedTexture shader, providing a culling mask texture:
(shader code borrowed from HERE )
Shader "MaskedTexture"
{
Properties
{
_MainTex("Base (RGB)", 2D) = "white" {}
_Mask("Culling Mask", 2D) = "white" {}
}
SubShader
{
Tags {"Queue" = "Transparent"}
Lighting Off
ZWrite Off
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
SetTexture[_Mask] {combine texture}
SetTexture[_MainTex] {combine texture, previous}
}
}
}
You set the 1st parameter to the “HeartOut” rendertexture, the 2nd parameter set to the “RenderedHeart” rendertexture, and within the PlayerHUD UI document, set the background image of a VisualElement to use “RenderedHeart”…
I’ll try getting this working first, since it sounds like it’d be more flexible (and maybe even more performant?)
Well it almost works. Or at least the masking part does.
Just gotta work out a few kinks:
Glad you seem to got something working!
I feel like we got to get some features out asap. We are exploring /planning what would be required to apply custom effects (using an effect shader) directly in UI toolkit and that would simplify a lot the workflow you are doing with the extra renderTextures. It seems that you are workarounding’ every feature currently on the backlog 
Fyi, you can allways vote/suggest something here :
https://portal.productboard.com/xvo8kmgtx7tkv7desh8cyaj7/tabs/49-ui-design
