Fill Texture Filter Component

Overview

This component can fill a UI element with a texture, with various fit, transform, tiling and blend options.

WebGL Demo

Properties

Property	Type	Range	Default	Description
Fill
Texture	Texture			The 2D texture to fill with.
Wrap Mode	Enum		Default	The texture coordinate wrap mode to use for tiling the texture. Options are: • Default: Use the wrap mode specified in the original texture. • Clamp: Texture coordinate are clamped to [0..1] meaning the texture can not tile. • Repeat: The texture coordinates repeat infinity producing a repeating tile pattern. • Mirror: The texture coordinates repeat with the tiling direction alternating after each repeat.
Color	Color		White	The color of the tint the texture. The texture color is multiplied by this color.
Area
Fill Space	Enum		Geometry	Options are: • Geometry: The gradient position is relative to the Graphic geometry. • Screen: The gradient position is relative to screen-space.
Fixed Scale Mode	Bool		True	If true, the texture maintains aspect ratio and fills the area based on it's size, otherwise it scales the texture based on the Scale Mode property.
Scale Mode	Enum		Scale To Fit	The fit mode to use which applies an initial scaling to the texture coordinates to describe how the texture should fit into the rectangular area of Graphic to fill. Options are: • Stretch To Fill: Stretches the texture to fill the complete rectangle. The texture will not maintain aspect ratio. • Scale And Crop: Scales the texture, maintaining aspect ratio, so it completely covers the rectangle area. If the texture is being draw to a rectangle with a different aspect ratio than the original, the image is cropped. • Scale To Fit: Scales the texture, maintaining aspect ratio, so it completely fits withing the rectangle area.
Transform
Pivot	Enum		MiddleCenter	The point in the rectangle where scale and rotation is centered.
Scale	Float	[0..32]	1.0	Scale the texture coordinate to create a zoom in or zoom out effect.
Rotate	Float	[0..360]	0.0	Rotate the texture coordinates.
Offset	Vector2		0, 0	Offset the texture coordinates to translate the texture.
Animation
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.
Scroll Speed	Vector3		0, 0, 0	Set an animation speed. XY corresponds to the texture offset (in pixels per second), and Z corresponds to rotation.
Apply
Source Alpha	Float	[0..1]	1.0	Fades the source Graphic.
Blend Mode	Enum		Blend	The blending mode to apply the gradient to the original Graphic. Options are: • Replace • Blend • Over • Under • Mask • Clear • Darken • Multiply • Color Burn • Linear Burn • Lighten • Screen • Color Dodge • Linear Dodge • Overlay • Soft Light • Hard Light • Vivid Light • Linear Light • Pin Light • Hard Mix • Difference • Exclusive • Subtract • Divide
Blend Mode Force Gamma Space	Bool		False	Whether to force blend operations in happen gamma-space to match the default in software such as PhotoShop. Otherwise blend operations happen in the active color-space.
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.

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.