Customize
Translucent Image requires 2 components in a scene: 1 or more Sources that control the blur amount, and multiple Translucent Images that replace the built-in Image component.
Translucent Image Source
Translucent Image Source generate the blurred background. It lets you control how much blur is present, the quality of blur, and thus the performance trade-off.
Blur Amount
There are 2 methods of controlling the amount of blur, Simple and Advanced:
Simple:
- Strength. Using this single property, you can (mostly) smoothly change the blur amount at runtime.
Advanced:
- Size: Increase blur amount without affecting performance, but will look bad if set too high or too low. Reduce flickering when increased. Allow smooth interpolating between blur amounts, but can't go down to 0.
- Iteration: Increase blur quality and blurriness. Affects performance slightly. Animating this will create noncontinuous change in blur amount.
Performance:
These allow you to fine-tune the performance-quality trade-off. They're more useful for less capable mobile devices or high-resolution tablets.
Downsample: Increasing to reduce the internal resolution and improve performance. At the cost of reduced quality, and may cause flickering.
Blur Region: Limit the blur effect to a region of the screen. If your UI does not span the entire screen, it is a good idea to use this to increase performance and reduce power usage.
Tip
You can visualize and visually edit this by turning on Preview. The number here works the same as the Camera component Viewport. It's easier to wield if you change x
and y
before w
and h
.
- Max Update Rate: How many times the screen is blurred per second. Use this to improve performance and decrease power usage.
Tip
Setting this to 0 will pause the effect completely. This can reduce power usage/ prevent overheat when you don't need a dynamically updating background, for example, in a pause menu.
Other:
- Background Fill: Fill the background where the frame buffer alpha is 0. Useful for VR Underlay and Passthrough, where these areas would otherwise be black.
- Preview: Preview the effect in full-screen. It also shows the Blur Region as a resizable rectangle.
Translucent Image
Source Image, Color, Raycast Target, Image Type: same as built-in Image.
Material: Multiple Translucent Images using the same material share some settings. They will batch dynamically into a single draw call.
Warning
- Materials used here must use the shader UI/TranslucentImage.
- You should create your own Material instead of the default to avoid changes to look after asset updates.
Source: a Translucent Image Source component. Will be automatically set to the first one found, so you should make sure there's one in your scene before creating any Translucent Image. You can change this to select which camera will provide the background.
Sprite Blending: Mix between the Source Image and the blurred background. This should be what you would use instead of the alpha channel of the Color property most of the time.
Shared settings
The following settings are shared across Translucent Images using the same material:
Vibrancy: Colorfulness of the background. 0 means monochrome, and a negative value will invert the color.
Brightness: Brighten or darken the background.
Flatten: Reduce the background contrast. Useful when you can't predict the color of the background but want to keep the content on top of it legible.