RuiLin - Procedural rectangle on umg

Demo link(windows):https://drive.google.com/file/d/1NslkdNDnSbLRroAMhs4sGa5JNICu6jKr

1. Product Overview

This is a high-performance SDF (Signed Distance Field) based procedural shape system. By moving away from traditional texture-dependent UI, it achieves pixel-perfect results with a minimal memory footprint. Create flawless rounded rectangles and dashed strokes with integrated support for fills, outlines, and professional shadows—all fully animatable in real-time.

2. Key Featuresđź’Ž Pixel-Perfect Geometry

  • Vector-Based Rendering: Edges remain razor-sharp regardless of scaling or rotation. No aliasing, no blurring—just pure mathematical precision.

  • Independent Corner Radii: Complete control over each corner (Top-Left, Top-Right, Bottom-Right, and Bottom-Left) for complex UI shapes.

  • Figma-Parity Shadows: A professional shadow system that faithfully recreates Figma’s logic, including precise Spread, Blur, and Offset adjustments.

🎨 Versatile Fills & Strokes

  • Multi-Mode Filling: Toggle seamlessly between Solid Color, Linear Gradient, and Texture Sampling modes.

  • Advanced Dashing System: * Path Mode (A): Dashes crawl along the border with consistent physical pixel length.

    • Radial Mode (B): Dashes radiate from the center, perfect for radar scans or high-tech UI effects.

  • Unit Alignment: All dashes and gaps use physical pixel units, ensuring a consistent look across different resolutions and aspect ratios.

⚡ Animation Support

  • Tween Animation: Built-in lightweight tweening logic, allowing you to animate nearly 90% of all parameters smoothly.

  • Timeline Integration: Fully compatible with Unreal Engine’s Timeline for complex, keyframe-based motion sequences.

3. Why Choose This Product?

In modern UI development, relying on static textures for rounded rectangles often leads to stretching artifacts, blurry edges, and cumbersome asset management.

This toolkit provides a professional-grade solution that drastically reduces the time between design handoff and implementation. Whether you are developing desktop applications, rapid prototyping for game UIs, or building sleek HUDs, this system provides the mathematical precision and creative flexibility required for top-tier production.