Greeting,
a colleague and I are currently facing a visually minor, yet bothersome problem.
In the creation of an overlay inside a blueprint we’re trying to add images to a CanvasPanel inside a Border-widget. The images are logos of teams, 2 images on each side of the Border-Widget. One of the logos is smaller and more centered, the other is bigger and would overlap with the edges of the border.
The border is set to “Clip to Bounds”. For the original edges this works and the big logo is cut off there. However, the Border-widget is also drawn as a “Rounded Box”. The logo is still overlapping with the rounded corners and is not cut off on these points. Since the big logos have a very low opacity it is hard to see but apparent enough that people are bothered by it.
What setting are we missing that would cut the image off even at the rounded corners? We already tried to use a masked material for the Border-Widget but that didn’t work. We also tried a RetainerBox around the images but that also didn’t work.
The images I will add are to show the overlapping corner in the blueprint and to highlight where edges of the border are and another image where it is the most visible with one of our logos that is mono-colored.
Thanks in advance!
Hi,
This is going to be a bit tricky, since we use scissor rects for our clipping (which are always rectangular). There are a few options you could explore:
- If your border contains a horizontal box that hosts these two images, you could nudge the padding up until that horizontal box rect is entirely within the rounded box and set it to clip. That would keep everything within the outer border, though it does prevent you from using all of the available space since you’re clipping to a smaller rectangle within
- Materials applied to a border should clip properly, so if you can apply a material directly to the border then you should be able to avoid this. That would be easier if it were only one image, so maybe its not viable if you need to dynamically switch the two logos
- Perhaps a hybrid of these two approaches - you could create a rounded border with a horizontal box containing two rounded borders, then apply the logos as materials to those inner borders. Matching the rounded box settings should help you line it up, then you don’t need to clip since you’re applying a material. Here’s an example, the pink border is the outer one and two inner borders host materials reading off a square rainbow texture (set to UI domain and translucent)
[Image Removed]
Best,
Cody
Thank you for the reply, Cody and sorry for the delayed answer. We were pulled into a different project so the focus got a little lost. However we managed to make it work with a different material setting and a RetainerBox. If I find some time later on I’d also like to give your solution a try. Thank you very much.