Skip to content

Material and Shader Properties

rmfandyplayz edited this page Sep 30, 2026 · 2 revisions

Material Float and Material Color steps animate a value on an element's shader: a fullscreen transition's _Progress, a glow's strength, a dissolve amount, a tint.

Setting one up

  1. On the Image, RawImage or TextMeshPro text, Add Component → UI Material Instance.
  2. Add a Material Float or Material Color step, and point it at that object (leave the slot empty if it's the player's own).
  3. Type the property's name into Shader Property, exactly as the shader names it (e.g. _Progress, with the underscore).

UI Material Instance gives the element its own copy of the material when the game starts. That way the animation can never change the material asset in your project, or every other element that shares it.

If the name is blank or doesn't exist on that shader, the step shows a ⚠ naming the shader and property, and is skipped in the game.

See Examples: Fullscreen shader transition for a complete recipe.

Two things that break it

Warning

A stencil Mask above the element stops the animation from showing. Use a RectMask2D instead, or untick Maskable on the Image. The component warns you if it spots this. Fullscreen overlays usually aren't inside a mask, so the common case is fine.

Note

TextMeshPro works, but animates TMP's own material instance. TMP ignores the usual material slot, so the component uses the text's fontMaterial instead.

Under the hood
  • The shader property is looked up once with Shader.PropertyToID.
  • Material steps can only target a UI Material Instance, so there's no Inspector slot that could point an animation at a shared material asset by accident.
  • The Mask problem: UGUI takes a one-time cached copy of the material for stencil masking (StencilMaterial.Add) and never re-syncs it, so animated values never reach the screen. MaterialPropertyBlock doesn't work with UGUI at all, so there's no way around it inside a stencil mask.
  • TextMeshPro ignores Graphic.material entirely. The component uses TMP_Text.fontMaterial, and never destroys it, since TMP owns it.
  • If you write editor code around this, don't read UIMaterialInstance.Material from it: the first read creates the instance and assigns it to the Graphic, which changes the scene. Read the Graphic's own material instead.

Clone this wiki locally