Examples - Rounded Rectangle: Procedural Shape System for UI & 3D

Choose by goal

Open The Closest Example

Choose the result you need first. Every route opens a direct package scene from Tools > Rounded Rectangle > Examples.

Start with a finished resultOpen one complete editable UI. Learn one capabilityInspect a feature family or rendering path. Browse design examplesExplore 13 game and application interfaces.

Start With A Finished Editable Result

Golden Example

The recommended first scene: one complete Canvas SDF result with a clearly named editable panel.

Examples menuOpen Golden Example

First edit

Select: Canvas / Golden Example V2 / 00_APP_SURFACE / 01_EDIT_PROFILE_PANEL
Change: Corner Radius, Corner Profile, Border Width, or the RectTransform Width and Height. Confirm the panel updates, then Undo.
Mode: Shape and surface edits update in Edit Mode. Enter Play Mode only to try the pointer interaction.

Design Examples

For world-space and VR/AR interface layouts, inspect World Control Desk, World Monitor or Spatial SDF Board below. Select a surface and move closer in Scene view to inspect its edges. These are editable visual examples; they do not include a complete XR interaction setup. Choose a rendering path for VR/AR.

Choose Open Design Examples from the Examples menu to browse all 13 compositions in one scene. Every group is visible and selectable in Edit Mode. Select a named object in the Hierarchy and press F in the Scene view to frame it. Change one control, observe the result, then Undo.

Enter Play Mode for the included UI state demonstrations. They do not connect to a deployment service, play audio, or load a game level. Use Edit Mode for persistent shape edits and Scene handles.

Extraction Equipment

Inspect an embossed scanner housing, recessed screen surround, and raised controls.

First edit

Select: 01_Field_Equipment / Field Equipment / 01_EDIT_SCANNER_HOUSING
Try: Change Corner Radius or Emboss on the housing. In Play Mode, equip the scanner.

Tactical Briefing

Inspect a squad roster and a planned route on a tactical map.

First edit

Select: 02_Golden_Example / Golden Example V2 / 00_APP_SURFACE / 01_EDIT_PROFILE_PANEL
Try: Change the roster panel radius or border. In Play Mode, select a unit and confirm the route.

Audio Console

Inspect a dark mixer with an illuminated waveform and embossed fader caps.

First edit

Select: 03_Audio_Console / 01_EDIT_AUDIO_HOUSING
Try: Change the housing or select a fader cap. In Play Mode, move the four faders and toggle the monitor state.

Trail Inventory

Inspect a satchel interface with item pockets and a connected item tag.

First edit

Select: 04_Trail_Inventory / 01_EDIT_SATCHEL
Try: Change the satchel corners or border. In Play Mode, select a pocket to update its description.

Shape Play

Inspect large embossed controls and rounded toy shapes without reading-dependent labels.

First edit

Select: 05_Playroom / 01_EDIT_PLAY_WINDOW / 02_EDIT_RECESSED_FACE / 03_EDIT_BIG_PLAY
Try: Change the play button radius or Emboss. In Play Mode, stack the shapes and toggle the sound indicator.

Puzzle Results

Inspect a portrait results panel with stars, score, reward, and a rounded primary action.

First edit

Select: 06_WebGL_Toon / Pause window / 01_EDIT_WEBGL_TOON
Try: Change the action radius or Emboss. In Play Mode, switch between result and next-level labels.

World Control Desk

Inspect rounded mesh surfaces arranged as a three-dimensional control desk.

First edit

Select: 07_World_Mesh_Table / Spatial objects / Demo_BakedMesh_Table / RR_Table_Control_Surface
Try: Select the World Mesh Generator and change Size or Corner Radius in Edit Mode.

World Monitor

Inspect a world-space monitor with inset readouts and a Canvas SDF temperature display.

First edit

Select: 08_World_Mesh_Monitor / Spatial objects / Demo_BakedMesh_WallMonitor / RR_Monitor_Display
Try: Change Size or Border Width on the monitor surface; select the nested SDF display to edit its glow.

Spatial SDF Board

Inspect Canvas SDF surfaces positioned and rotated in three-dimensional space.

First edit

Select: 09_Canvas_SDF_In_3D / Spatial objects / Demo_BakedMesh_InteractiveBoard / RR_Interactive_Board_Surface
Try: Change Corner Radius or an SDF effect, then orbit the Scene view to inspect the arrangement.

Daily Planner

Inspect tonal surfaces, selected dates, and a scheduled event.

First edit

Select: 10_Daily_Planner / 01_EDIT_DAY_SURFACE
Try: Change the main surface or event corners. In Play Mode, toggle the add-to-day action.

Focus Settings

Inspect grouped settings, a focus icon, and a primary action on a light window.

First edit

Select: 11_Focus_Settings / 01_EDIT_FOCUS_WINDOW
Try: Change the window corners or shadow. In Play Mode, toggle the focus status.

Deployment Monitor

Inspect a dark status interface with restrained outlines and a request chart.

First edit

Select: 12_Deployment_Monitor / 01_EDIT_DEPLOYMENT_WINDOW
Try: Change the window border or corner radius. In Play Mode, show and hide the sample log text.

Paper Workshop

Inspect carved pastel surfaces around a crafting recipe and its materials.

First edit

Select: 13_Pastel_Paper / Light Loadout Showcase / Loadout Profile Card
Try: Change Inner Shadow on a recessed surface. In Play Mode, make one stool and observe the material counts.

Learn A Focused Capability

Style And Effects

Compare live corner, border, gradient, texture, and SDF-effect specimens.

Examples menuOpen Style and Effects

First edit

Select: Style Effects Canvas / Style and Effects Gallery / 01_SHAPE_AND_BORDER_PAGE / 01 Corner Profiles / 01 CIRCULAR
Change: Change the named shape control, observe only that specimen, then Undo.
Mode: Play Mode is not required.

Runtime Button States

Try Normal, Focused, Pressed, and Disabled on one real action surface.

Examples menuOpen Runtime Button States

First edit

Select: Canvas / Runtime Button States / Live Action
Change: Hover, focus, press, and disable the action surface.
Mode: Enter Play Mode to observe live states.

Compare Rendering Destinations

These are three independent scenes. If you have not chosen a destination yet, choose between the rendering paths first.

World Mesh

Inspect generated geometry as a directly editable Scene object.

Examples menuOpen World Mesh Example

First edit

Select: World Mesh Example / World Mesh Control / Action
Change: Size, Corner Radius, or Border Width on the Generator.
Mode: Play Mode is not required.

Canvas Mesh UI

Inspect generated topology submitted directly to a Unity Canvas.

Examples menuOpen Canvas Mesh UI Example

First edit

Select: Canvas / Canvas Mesh UI Example / Action Surface
Change: RectTransform Width or Height, Corner Radius, or Border Width.
Mode: Play Mode is not required.

Canvas SDF

Inspect soft Canvas edges and SDF-only effects on a direct example.

Examples menuOpen Canvas SDF Example

First edit

Select: Canvas / Canvas SDF Example / Action Surface
Change: Corner Radius or one SDF effect such as Drop Shadow or Outer Glow.
Mode: Play Mode is not required.

Inspect Additional Examples

Prototype and refined interface comparison

Prototype To Final

Compare a base composition with the same layout after hierarchy and surface refinement.

Examples menuOpen Prototype to Final

First edit

Select: Canvas / Prototype To Final / 02_REFINED_LAYOUT / 01_EDIT_REFINED_ABILITY
Change: Change one surface control and compare it with the base layout, then Undo.
Mode: Play Mode is not required.

Mobile Leaderboard

Inspect a complete 9:16 Canvas SDF layout and its main ranked panel.

Examples menuOpen Mobile Leaderboard

First edit

Select: Canvas / Mobile Leaderboard / 01_EDIT_TOP_THREE_PANEL
Change: Corner Radius, Border Width, or one SDF effect without changing the 9:16 layout.
Mode: Play Mode is not required.

Find the scene files

All scene files are under Assets/RoundedRectangle/ExampleScenes/.

GettingStarted — Golden Example
DesignExamples — one scene with 13 game and application compositions
FeatureExamples — Style and Effects and Runtime Button States
RenderingPaths — World Mesh, Canvas Mesh UI, and Canvas SDF
Showcases — Prototype to Final and Mobile Leaderboard

Optional icon set: 25 tintable rounded-line sprites are under Assets/RoundedRectangle/Examples/Icons. Choose an RRIcon_*.png Sprite by its semantic filename for UI.Image or SpriteRenderer.

For a paired Canvas SDF object, use RoundedRectangleGenerator for size, corner, border, fill, gradient, and texture controls. Use RoundedRectSDFGraphic for SDF-only effects.