Home

Awesome

alt_text

Introduction

Animate UI Materials allows editing and animating materials for a single UI component.

alt_text

You can see such an example in the demo scene.

Setup

Download the package from the asset store or the Releases folder

Import the package into your project

Simply add the GraphicMaterialOverride component to an UI element, such as an Image with a custom Material

alt_text

When selecting the dropdown “Add Override”, you will be greeted with every possible property you can animate.

alt_text

You can ignore those you don’t know, such as the _Stencil properties. They are internal to UI stencil rendering. Simply select “_Color” for example.

Two things will happen:

  1. A new modifier will be listed in the GraphicMaterialOverride component alt_text You can already edit the color value, and the change will only affect the Image component

  2. A new gameobject will be created, holding a GraphicPropertyOverride component alt_text alt_text The value displayed here is the exact same as in the GraphicMaterialComponent. However this value can also be animated.

Animation

To animate the property, add the usual Animator component to the image

alt_text

Create a new AnimationClip

alt_text

Click Add Property and select _Color Override, then Graphic Property Override Color, then Graphic Property Override Color.Property Value

alt_text

You can now animate the value like any other !

alt_text

Alternatively, hit the Record button, and simply modify the properties from the GraphicMaterialOverride inspector

alt_text

alt_text

Baking

To get the final modified material as a material asset, simply open the context menu of your GraphicMaterialOverride or Graphic and press "Bake Modified Material". A new material variant will be saved alongside the source material.

Next Steps

Emulate an actual MaterialEditor

I want to support custom materials drawers, and other possible combinations, which could be done with a "ghost" MaterialEditor, but would require dropping support before unity 2021.3

https://discussions.unity.com/t/edit-chosen-material-in-the-inspector-for-custom-editor/67530/3

This is required as MaterialEditor does a lot of closed-source heavy lifting to recover that attribute data, and because those attribute drawer require a reference to the MaterialEditor

End Notes

If you encounter a bug or need any help, please contact me at fleeting.being.official@gmail.com

Don’t hesitate to look into the code if you want to know how things work !