Skip to main content

Composite Layer Component

Overview​

This component composites (renders) all child UI elements together into a single layer (texture).

Benefits:

  1. Filters - apply filters to multiple UI elements at once.
  2. Transition filters - Apply transition filters to fade on/off entire parts of the UI instead of just individual elements.
  1. Better opacity control - When fading opacity via Canvas Group the overlapping UI elements will render correctly instead of showing overlap artifacts.
  1. Better performance - All child UI element rendering is disabled once baked into the Composite Layer, saving precious draw calls. Child UI elements only need to render when they are modified.

WebGL Demo​

Properties​

Component Screenshot

Property                            Type    Range    DefaultDescription
ColorColorWhiteThe color to tint (multiply) this Graphic when rendering.
MaskableBooleanTrueWhether or not this Graphic should support the masking components.

Usage​

Add this component to a empty UI GameObject that has child UI elements that you want to render into a layer.

You can then add filter components below the Composite Layer component, and even Canvas Group component to control opacity.