ShapeRenderer
Realot Studio ShapeRenderer component reference: fields, script API, behavior and examples.
#What it does
Draw a procedural 2D shape without requiring a sprite asset.
#How to add and use ShapeRenderer
Editor path: Select the target entity in the Hierarchy (left side) → look at the Inspector (right side) → click Add Component at the bottom of the Inspector → search for ShapeRenderer → click the component row. The Add Component picker is a centered modal with a search box; it only lists components not already attached.
For components with a dedicated editor tool, the tool is opened or activated from the location described below. Do not assume that adding the component alone activates its editor; some systems require a separate window, panel, or viewport tool.
#Component setup & editor tools
- Inspector → ShapeRenderer: choose the shape type and edit its dimensions. For triangle/freeform shapes, the corresponding viewport gizmo is used when available.
#What you should see after adding it
The component appears as its own section in the Inspector. Its serialized settings are listed in the Component data table below. If a field is conditional, it appears only when the relevant mode/type is selected. If a field is a runtime state field (for example grounded or resolved velocity), treat it as read-only diagnostic state unless the API reference explicitly documents it as writable.
#How to read the settings
For every setting below, the documentation distinguishes type, default, meaning, and tuning direction where behavior is known. When a value represents a direction, use the engine's coordinate convention documented in Coordinate system; do not substitute Unity/Godot conventions.
#Component data
| Field | Type | Purpose | Default |
|---|---|---|---|
shapeType | ShapeType enum: Square | Circle | Triangle | Capsule | Square, Circle, Triangle or Capsule. | Square |
width | number | Square | 100 |
height | number | Square height. | 100 |
radius | number | Circle | 50 |
capsuleHalfHeight | number | Capsule: a "stadium" shape (rectangle with semicircle caps), same halfHeight/radius convention as Collider2D's capsule so the two stay easy to eyeball-match if a user wants a visual capsule over a capsule collider. | 50 |
capsuleRadius | number | Capsule cap radius. | 30 |
trianglePoints | array | Triangle: 3 points in the entity's LOCAL space (same space Collider2D.trianglePoints uses), user-editable via draggable gizmo handles in the Scene view. | [{x:-50,y:50}, {x:50,y:50}, {x:0,y:-50}] |
fillColor | hex color string | Fill color. | #3a8ede |
visualRotation | number | Visual-only rotation in degrees, added to Transform.rotation when drawing. | 0 |
opacity | number | Opacity. | 1 |
outlineEnabled | boolean | Enable outline. | false |
outlineColor | hex color string | Outline color. | #ffffff |
outlineWidth | number | Outline width. | 2 |
#Script API
| Member | Kind | Description |
|---|---|---|
capsuleHalfHeight | Property (read/write) | The `this.shape` sub-object exposed to user scripts (see scripting/ScriptAPI.js). |
capsuleRadius | Property (read/write) | The `this.shape` sub-object exposed to user scripts (see scripting/ScriptAPI.js). |
fillColor | Property (read/write) | The `this.shape` sub-object exposed to user scripts (see scripting/ScriptAPI.js). |
height | Property (read/write) | The `this.shape` sub-object exposed to user scripts (see scripting/ScriptAPI.js). |
opacity | Property (read/write) | The `this.shape` sub-object exposed to user scripts (see scripting/ScriptAPI.js). |
outlineColor | Property (read/write) | The `this.shape` sub-object exposed to user scripts (see scripting/ScriptAPI.js). |
outlineEnabled | Property (read/write) | The `this.shape` sub-object exposed to user scripts (see scripting/ScriptAPI.js). |
outlineWidth | Property (read/write) | The `this.shape` sub-object exposed to user scripts (see scripting/ScriptAPI.js). |
radius | Property (read/write) | The `this.shape` sub-object exposed to user scripts (see scripting/ScriptAPI.js). |
shapeType | Property (read/write) | The `this.shape` sub-object exposed to user scripts (see scripting/ScriptAPI.js). |
visualRotation | Property (read/write) | The `this.shape` sub-object exposed to user scripts (see scripting/ScriptAPI.js). |
width | Property (read/write) | The `this.shape` sub-object exposed to user scripts (see scripting/ScriptAPI.js). |
#Examples
this.shape.fillColor = "#22c55e";this.shape.shapeType = "Circle";this.shape.radius = 32;