Ink Panel
Draw a moving ink silhouette with a radial reveal and scattered droplets
Overview
Ink Panel draws a procedural ink silhouette with rough edges and detached droplets. Its surface moves continuously, while a separate radial reveal controls how much of the ink is visible. Use it for ink backgrounds, panel reveals, and masks.
Usage
Add Ink Panel to a UI rectangle under a Canvas. The component draws its own Graphic, so it does not need a separate Image component.
Set the rectangle's size and the graphic Color. The rectangle includes space around the ink for splatters.
Choose Origin and Roundness in Settings, then adjust Roughness, Droplets, and their scales.
Set Speed and Motion in Animation. Animate Reveal from 0 to 1 to show the ink, or from 1 to 0 to hide it.
Customization
- Origin sets the normalized contact point for the radial reveal. Use
(0.5, 0.5)to start in the center. - Roundness changes the silhouette from square corners at 0 to rounded ends at 1. Roughness controls the irregularity of the ink edge.
- Droplets controls the detached splatters. Droplet Scale adjusts their size and spacing independently of the edge detail.
- Detail Scale changes the scale of the edge grain and droplets in canvas units, independently of the panel's aspect ratio. Higher values produce finer detail.
- Speed controls the continuous motion rate, while Motion controls its amount. Seed varies the noise pattern.
- Leave Noise Texture empty to use the shared, automatically generated noise. A custom texture should contain linear, tileable RGBA noise.
Notes
The ink animates in Edit Mode and uses unscaled time at runtime, so it keeps moving when Time.timeScale is 0. Setting Speed or Motion to 0 produces a static pattern; it does not preserve the current animated frame.
Reveal is independent of the continuous motion and does not animate automatically. Drive it through a script or animation, or connect a float UI event to SetReveal(). Preview Reveal in the Inspector previews the effect in Edit Mode without changing the saved reveal value.
Add Soft Mask to the same object and place supported child graphics underneath it to mask them with the animated ink silhouette. The graphic defaults to black with Raycast Target disabled.
Include an Ink Panel prefab in the build to retain its shader references. If you assign a custom material through code, that material owns its settings instead of the component's ink controls.
Public API
Use InkPanel in the Evo.UI namespace. Its properties update the graphic automatically.
Properties
| Name | Type | Description |
|---|---|---|
Reveal | float | Radial reveal progress, from 0 (hidden) to 1 (complete silhouette). |
Origin | Vector2 | Normalized reveal contact point, clamped to 0–1 per axis. |
Roundness | float | Silhouette roundness, from 0 to 1. |
Roughness | float | Ink edge irregularity, from 0 to 1. |
Droplets | float | Detached droplet amount, from 0 to 1. |
DropletScale | float | Droplet size and spacing scale, from 0.25 to 3. |
DetailScale | float | Edge grain and droplet detail scale, from 0.5 to 2. |
Speed | float | Unscaled animation speed, from 0 to 2. |
Motion | float | Continuous motion amount, from 0 to 1. |
Seed | float | Noise pattern seed, from 0 to 100. |
NoiseTexture | Texture2D | Optional linear, tileable RGBA noise. Null uses the shared generated texture. |
Methods
| Name | Parameters | Description |
|---|---|---|
SetReveal() | float value | Sets Reveal, clamped to 0–1. Suitable for float UI events. |
SetEditorRevealPreview() | float value | Editor-only rendered reveal override. A negative value clears the preview without changing saved data. |
Example
using System.Collections;
using UnityEngine;
using Evo.UI;
public class InkPanelExample : MonoBehaviour
{
[SerializeField] private InkPanel target;
private IEnumerator Start()
{
target.Origin = new Vector2(0.5f, 0.5f);
target.Roundness = 0.8f;
target.Speed = 0.45f;
target.Reveal = 0f;
const float duration = 1f;
for (float elapsed = 0f; elapsed < duration; elapsed += Time.unscaledDeltaTime)
{
target.Reveal = elapsed / duration;
yield return null;
}
target.Reveal = 1f;
}
}