How to clip Graphic when using OnPopulateMesh?

Unity Engine
1

I have some Graphic elements inside a Scroll Rect with Rect Mask 2D.
The clipping works well with all the native UI elements, but the ones that I have a custom shape, aren’t clipping at all.

Is there an easy way to get custom Graphic to clip?
Here’s an example of what I want to clip:

[ExecuteInEditMode]
public class UIButtonShape : Graphic
{
   
    protected override void OnPopulateMesh(Mesh toFill)
    {
        // Aux
        float w = rectTransform.rect.width;
        float h = rectTransform.rect.height;
        Vector2 cornerBL = new Vector2((0.0f - rectTransform.pivot.x) * w, (0.0f - rectTransform.pivot.y) * h);    // Bottom Left
        Vector2 cornerTR = new Vector2((1.0f - rectTransform.pivot.x) * w, (1.0f - rectTransform.pivot.y) * h);    // Top Right

       
        toFill.Clear();
        var vbo = new VertexHelper(toFill);
        UIVertex[] verts = new UIVertex[4];


        // Bottom Left
        UIVertex vert = UIVertex.simpleVert;
        vert.position = cornerBL;
        vert.color = color;
        verts[0] = vert;
       
        // Top Left
        vert.position = new Vector2(cornerBL.x + h, cornerTR.y);
        vert.color = color;
        verts[1] = vert;
       
        // Top Right
        vert.position = new Vector2(cornerTR.x, cornerTR.y);
        vert.color = color;
        verts[2] = vert;
       
        // Bottom Right
        vert.position = new Vector2(cornerTR.x - h, cornerBL.y);
        vert.color = color;
        verts[3] = vert;
       
       
        vbo.AddUIVertexQuad(verts);
        vbo.FillMesh(toFill);
    }

}

Appreciate any help with this.
Thanks

2

Ok, answering my own question.

It’s actually very simple, your class should inherit from MaskableGraphic instead of Graphic.

3 Likes
3

Yes, if you want your image to be masked (only show a region of a Rect), then your UI component has to inherit from MaskableGraphic instead of just graphic (had a fair few cases of this in UI Extensions.)

If however you only want to part draw an image (and possibly animate that), we’re investigating a new shader based fill option in the next release :smile:

4

Note as well (just noticed), your UI code above will only work for the single release of 5.2.1.
In 5.2.1Patch or 5.3, it needs to update to:

OnPopulateMesh(VertexHelper vh)

Oh the fun

5

Thanks for the tip.
Can’t believe this keeps changing, I have lots of custom shapes. :eyes:

Also related to this, when dragging the Scroll Rect and objects are being clipped, some weird things happen to other UI elements.
In this case, this is an Image, without any sprite, just a gray Color. And this is outside the Scroll Rect.

Is this a known issue?

6

we’re inheriting from MaskableGraphic and not getting any clipping against RectMask2d.
It clips against bitmap-based Mask fine.

do I need to override some other callback, or add the object to the RectMask2d’s list of clippables myself or something ?

also, 5.3 supports both OnPopulateMesh(mesh) and OnPopulateMesh(VertexHelper).
we’re using OPM(mesh).

7

… aha, it seems to be something to do w/ the Material we’re using.
if i switch the material to ‘none’, it clips fine.