ClipsDescendants should work with rotated UI elements

No one assumed this, it was mentioned by staff. Look for replies by zeuxcg on this topic.

EDIT: fixed confusing quote

5 Likes

I agree with this. The Minimap example is great, and something I’m running into right now. Check out the minimap in my game here, and notice how freakin’ large the border is around the minimap. It’s so large because I have to overlap the rotated minimap image.

Although I think the idea of UI masks could also be thrown into this.

10 Likes

I don’t think I ever said it’s not worth implementing? It’s hard - our entire UI clipping pipeline is designed around rectangles - but it’s definitely a bug, it’s just hard to fix. We had other bugs that were hard to fix before (like the 3D UI render order), it just takes time and requires this to become a priority to fix.

25 Likes

It’s not an easy fix. The way clipping works right now is based on adjusting vertices, while arbitrarily rotated GUIs would require the use of the stencil buffer. This has performance implications for mobile.

Example of how clipping works:

 ____________
|            |
|      A___B2|____B
|      |     |    |
|      |     |    |
|____C2|___D2|    |
       |          |
      C|__________|D

In this diagram, the leftmost square is the parent, and it is clipping. The inner square is offset out of the clipped region. What happens is we adjust the vertices and texcoords of the square to obtain the “2” versions of the vertices, and then render using that. Specifically, this is computing the intersection rectangle of the two rectangles. At no point is there any kind of alpha masking or stencil buffer use involved.

You may notice a couple things with this approach:

  • It is trivially extended for rotations == 180 degrees
  • It can be less trivially extended for rotations that are multiples of 90 degrees
  • It can work when the GUI is rotated, as long as it is not rotated relative to the clipping ancestor. This is a nontrivial modification.

Web browsers also use this system, but only as an optimization. They will fall back to stencil buffering in more complex cases.

I think we should implement this feature, but it will require substantial amounts of time from a rendering engineer like zeuxcg said.

Update (October 2022)

There is a CanvasGroup instance, which renders all UI underneath it into a texture. This can be used to make a minimap, such as the one shown in the original post.

It comes with a significant performance and memory cost, so don’t use more than a few, and avoid using fullscreen frames. Using 1 for a minimap is a great usecase though.

Example place: Minimap.rbxl (72.6 KB)

44 Likes

Sorry I was referring to “hard”, hasty quoting on my part

I’m not sure if it’s a credible source but this is one instance of someone mentioning it’s not worth supporting. Thanks for the technical explanations, too, it’s easier to see the problem with more visual detail (sometimes I get a little too passionate when writing about features we desperately need).

Thanks for explaining the issue in detail, It does help to know that it comes down to a more technical problem. But I do hope it’s still something considered in the future as I know many devs like myself who would love to be able to rotate GUIs while keeping them clipped to the parent.

2 Likes

As a temporary workaround, you can take an approach that Jailbreak took with it’s minimap, placing a UI dot in the center of the map, and panning the map around based on the player’s position.

It wouldn’t rotate obviously, but it’s better than nothing while waiting for this feature request to be implemented.

2 Likes

Yeah rotating the icons and such is no problem because it never goes outside of the clips. But I think for the best appeal for any minimap it needs to rotate.

5 Likes

Hey that’s me. I remember Sorcus saying that it was such a large task that it wasn’t worth taking the time and effort to actually do. Things may have changed in the 3-4 years since then.

3 Likes

Just thought I would bring this back up. I ran into issues with this while testing a new design for my shop/inventory UI.

image

The sideways text completely ignores ClipsDescendants.

2 Likes

It’s on our roadmap to fix this some time in 2019.

42 Likes

We are in halfway 2019, are you guys working on a fix? This is still needed. Also, I can’t find it on the High-Level Roadmap.

10 Likes

She never stated that they were actively working on a fix, but it is on their roadmap to fix the issue. Often, smaller issues or features like this will get pushed back due to other features or bug fixes being prioritized.

Also, the roadmap you linked is only for high-level features and not an internal roadmap run by each team so that they can keep track.

3 Likes

We’re in Q2 of 2020 now and ClipDescendants support for rotated UI objects is still very much needed. With recent ‘bonus’ additions to the UI system like UIGradient, which multiplies any given UI object with a given color range and supports rotation, support for ClipDescendants with rotated objects (even if it only works for rotated objects inside of grid-aligned objects) seems like a great candidate to implement/fix next.

35 Likes

We are continuing to evaluate hardware features and different approaches to implementing this. Right now it’s scheduled for later this year, but no promises. This is a complex feature and we want to be sure we deliver a performant solution that works on all devices, particularly mobile platforms where graphics APIs are somewhat limited in capability. This is currently on our roadmap for Q4 of this year, but it could be pushed back depending on how things stand then.

53 Likes

cc @Tiffblocks

Been well over 4 years since this request was made, over 7 years since the first request for this and over a year with no further word, and still not implemented :upside_down_face: how hard can it possibly be?

All these awesome UI features like UICorner, UIStroke, Richtext, all (I’d imagine) would be a lot more complex to add. But simple clipping of rotated items still isn’t here? Hell, since the introduction of CSG, I’d imagine something like this, which is only 2D, would be infinitely easier to implement.

Not even on this years roadmap either, so we can’t even expect it to come out till 2022 (or at this rate, another decade)

75 Likes

Wanted to add on that this would make developing flight computer UIs much, much easer for flight sims. Currently to make an artificial horizon, I have to Add black frames around a solid blue frame, and set the z index of the brown frame in between the black borders and the and blue horizon. This takes up more time and resources to achieve the same result if ClipDescendants would behave properly for rotated objects.

9 Likes

This behaviour can be achieved with the release of CanvasGroups.

7 Likes

As stated in the above reply, this feature was implemented in the form of CanvasGroups

1 Like