Frame Filter Component

Overview

This component enables easily adding a framed outline to UI components. It supports automatic resizing to fit the content, padding, different shapes, anti-aliased rendering, rounded corners and different fill modes.

WebGL Demo

Properties

Property	Type	Range	Default	Description
Shape
Shape	Enum		Rectangle	The base shape to render around the source content. Options are: • Rectangle: Has the most flexibility. • Square: Ensures the frame has equal width and height. • Circle: Ensures the frame has constant radius.
Padding	Float	[-inf..inf]	16.0	For each Rectangle edge expands the edge length in pixels. For Square and Circle shapes this is a single value that controls radius padding.
Pad To Edge	Bool		False	For each Rectangle edge allows padding value to be ignored and instead extends the length to the screen edge.
Corner
Size	Enum		Percent	The type of corner size to use for the Rectangle or Square shapes. Options are: • None: No shaped corners. • Small: 12.5% rounded corners. • Medium: 25% rounded corners. • Large: 50% rounded corners. • Circular: 100% rounded corners • Percent: Value between 0..1 relative to the size of shape. • Custom Percent: Specify each of the 4 corner sizes in 0..1 range. • Pixels: A single value in pixel units. • Custom Pixels: Specify each of the 4 corner sizes in pixels.
Shape	Enum		Round	The type of corner shape to use for the Rectangle or Square shapes. Options are: • Round: Rounded corners. • Chamfer: Chamfered corners.
Fill
Fill Mode	Enum		Color	The mode to use to fill the frame background with. Options are: • None: The frame background has no fill. • Color: A single color. • Texture: A texture is used to fill the background. • Gradient: A gradient used to fill the background.
Color	Color		Black	The color to fill the frame with in Color fill mode.
Texture	Texture			The texture to fill the frame with in Texture fill mode.
Gradient	Gradient			The gradient to fill the frame with in Gradient fill mode.
Gradient Shape	Enum		Horizontal	The shape of the gradient in Gradient fill mode. Options are: • Horizontal: Colors run from left to right. • Vertical: Colors run from top to bottom. • Diagonal: Colors run from top-left to bottom-right. • Radial: Colors start in the center and expand in a circle shape. • Linear: Gradient follows the W3C definition for a linear gradient going in the direction specified by an angle. • Conic: Gradient sweeps clockwise from the top middle (12:00 position) based on the angle.
Gradient Scale	Float	[-inf..inf]	1.0	Scale the gradient position.
Gradient Offset	Float	[-inf..inf]	0.0	Offset the gradient position.
Scroll Delta Time	Enum		Normal	The time delta to use when updating scrolling. Options are: • Normal: Use Time.deltaTime. • Unscaled: Use Time.unscaledDeltaTime, but use Time.captureDeltaTime if it is set.
Gradient Scroll Speed	Float	[-inf..inf]	0.0	Set an animation speed to offset the gradient.
Radius	Float	[-inf..inf]	1.0	The radius of the gradient in Radial mode.
Angle	Float	[0..360]	0.0	The angle of the gradient in Linear mode.
Softness	Float	[1..inf]	2.0	Softness of the frame. 1 = no softness.
Border
Fill Mode	Enum		Color	The mode to use to fill the frame border with. Options are: • None: No border. • Color: A single color. • Texture: A texture is used to fill the background. • Gradient: A gradient used to fill the background.
Color	Color		White	The color to fill the frame border with in Color fill mode.
Texture	Texture			The texture to fill the frame border with in Texture fill mode.
Gradient	Gradient			The gradient to fill the frame border with in Gradient fill mode.
Gradient Shape	Enum		Horizontal	The shape of the border gradient in Gradient fill mode. Options are: • Horizontal: Colors run from left to right. • Vertical: Colors run from top to bottom. • Diagonal: Colors run from top-left to bottom-right. • Radial: Colors start in the center and expand in a circle shape. • Linear: Gradient follows the W3C definition for a linear gradient going in the direction specified by an angle. • Conic: Gradient sweeps clockwise from the top middle (12:00 position) based on the angle.
Gradient Scale	Float	[-inf..inf]	1.0	Scale the border gradient position.
Gradient Offset	Float	[-inf..inf]	0.0	Offset the border gradient position.
Scroll Delta Time	Enum		Normal	The time delta to use when updating scrolling. Options are: • Normal: Use Time.deltaTime. • Unscaled: Use Time.unscaledDeltaTime, but use Time.captureDeltaTime if it is set.
Gradient Scroll Speed	Float	[-inf..inf]	0.0	Set an animation speed to offset the border gradient.
Radius	Float	[-inf..inf]	1.0	The radius of the border gradient in Radial mode.
Angle	Float	[0..360]	0.0	The angle of the border gradient in Linear mode.
Size	Float	[0..inf]	4.0	The size of the border in pixels.
Softness	Float	[1..inf]	2.0	Softness of the border. 1 = no softness.
Apply
Cutout Source	Bool		False	Whether to render the source graphic on top of the frame, or to use the source graphic to make a hole in the frame.
Strength	Float	[0..1]	1.0	Strength of the effect.
Render Space	Enum		Canvas	Which coordinate system use when rendering this filter. Options are: • Canvas: Render the filter before any transforms (scale/rotation/translation etc) are applied. • Screen: Render the filter after transforms have been applied. Read more about this property here.
Source Area	Enum		Geometry	Changing this to RectTransform will make the bounds of the frame conform to the RectTransform area.
Expand	Enum		Expand	Whether to expand the Graphic area to accommodate this filter overflowing the original bounds. Setting this to None can be useful when applying effects to content you want to enclose in a frame using something like the FrameFilter component.

Usage

Add this component to any GameObject that contains a UI Graphic component (eg Text, Image, RawImage, etc). The object will now render with a shadow.

Usage with TextMeshPro

To use this filter effect with TextMeshPro - Text (UI) use the Filter Stack (TextMeshPro) component.

Examples

Rounded Corners

Border

Padding

Shapes

Scripting

Namespace

The namespace

using ChocDino.UIFX;

Adding the FrameFilter Component

Add the FrameFilter component to your GameObject

// Add the component to your GameObject and set default properties
var frame = AddComponent<FrameFilter>();

frame.BeginPropertyChange();
frame.Shape = FrameShape.Rectangle;
// Padding:
frame.RectPadding = new RectEdge(16f);					// Only for FrameShape.Rectangle
frame.RadiusPadding = 16f;								// Only for FrameShape.Square and FrameShape.Circle
// Extend to edge:
frame.RectToEdge  = new RectPadToEdge();				// Only for FrameShape.Rectangle
// Rounded corners:
frame.RectRoundCornerMode = FrameRoundCornerMode.None;	// Only for FrameShape.Rectangle and FrameShape.Square
frame.RectRoundCornersValue = 0.25f;					// Only for FrameShape.Rectangle and FrameShape.Square
frame.RectRoundCorners = new RectCorners(0.25f);		// Only for FrameShape.Rectangle and FrameShape.Square
frame.Color = Color.black;
frame.Softness = 2f;
frame.BorderSize = 0f;
frame.BorderSoftness = 2f;
frame.BorderColor = Color.white;
frame.CutoutSource = false;
frame.Strength = 1f;
frame.EndPropertyChange();