Procedural Rect

OverviewCopy Anchor Link

Procedural Rect is a custom MaskableGraphic that renders smooth, anti-aliased rounded rectangles using a signed distance field (SDF) shader. It replaces sprite-based UI panels with a fully procedural alternative, supporting fills, outlines, inner shadows, outer shadows, and corner radii — all without any textures.

Color for each layer can be a flat color, a gradient, or inherited from the graphic's base color. Materials and gradient textures are pooled automatically so identical configurations share a single GPU resource.

UsageCopy Anchor Link

NotesCopy Anchor Link

• Materials and gradient textures are reference-counted and shared across all ProceduralRect instances with identical settings, minimising draw calls and memory usage.
• The component requires TexCoord1, TexCoord2, TexCoord3, Tangent, and Normal canvas shader channels. These are enabled automatically on the parent Canvas.
• The component accepts a source image (sprite) graphic, so it can be used for masking. For example, you can assign a profile picture and increase the corner radius to get a perfect masking with better performance.

Radius SyncCopy Anchor Link

Radius sync lets a child ProceduralRect automatically match the curvature of another rect (typically a parent card or container), so corners nest without any manual radius calculations.

When radiusSyncMode is Match Parent, the component reads the parent's resolved radii. When set to Match Target, it reads from the explicitly assigned radiusSyncTarget. Either way, the child's own cornerRadius field is ignored while sync is active.

The sync math subtracts the child's padding from the outer radius on each corner independently:

R_inner = max(0, R_outer − min(paddingX, paddingY))

In the editor, modifying the parent rect's properties triggers UpdateRect() on children automatically, so the nested radii stay live while you tweak values in the Inspector.

PropertiesCopy Anchor Link

GraphicCopy Anchor Link

FillCopy Anchor Link

OutlineCopy Anchor Link

Corner RadiusCopy Anchor Link

ClippingCopy Anchor Link

Inner ShadowCopy Anchor Link

Outer ShadowCopy Anchor Link

EnumsCopy Anchor Link

Scale ModeCopy Anchor Link

Raycast ModeCopy Anchor Link

Clip MethodCopy Anchor Link

Color ModeCopy Anchor Link

Radius ModeCopy Anchor Link

Radius Sync ModeCopy Anchor Link

Public MethodsCopy Anchor Link

Code ExampleCopy Anchor Link

using UnityEngine;
using Evo.UI;

public class ProceduralRectExample : MonoBehaviour
{
    public ProceduralRect rect;

    void Start()
    {
        // Set a sprite
        rect.sprite = mySprite;

        // Rounded card with a white fill
        rect.fillColorMode = ProceduralRect.ColorMode.Custom;
        rect.fillColor = Color.white;
        rect.cornerRadius = new Vector4(16, 16, 16, 16);

        // Subtle drop shadow
        rect.outerShadowOffset = new Vector2(0, -4);
        rect.outerShadowSoftness = 12f;
        rect.outerShadowColor = new Color(0, 0, 0, 0.25f);

        // Thin outline
        rect.outlineWidth = 1f;
        rect.outlineColorMode = ProceduralRect.ColorMode.Custom;
        rect.outlineColor = new Color(0, 0, 0, 0.1f);

        // Reveal the shape with a radial wipe
        rect.clipMethod = ProceduralRect.ClipMethod.Radial360;
        rect.clipAmount = 0.75f;

        // Update the rect to apply some changes that require vertices or material to be updated
        rect.UpdateRect();
    }
}