Search Unity

  1. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

[FREE] Animate UI Materials - Lightweight integration of UGUI and Unity Animations

Discussion in 'Assets and Asset Store' started by lgarczyn, Nov 24, 2023.

  1. lgarczyn

    lgarczyn

    Joined:
    Nov 23, 2014
    Posts:
    66

    Introduction

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

    It's available for free on the Asset Store and Github


    Setup

    Download and import the package from the asset store or the Releases folder

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

    upload_2023-11-24_12-4-17.png

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

    upload_2023-11-24_12-13-32.png


    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
    upload_2023-11-24_12-13-48.png
    You can then edit the color value, and the change will only affect this Image component

    2. A new gameobject will be created, holding a GraphicPropertyOverride component
    upload_2023-11-24_12-15-6.png

    upload_2023-11-24_12-14-5.png

    This component actually holds the modified value as a serialized property. This means it can be animated, set with events, overridden in prefabs, or set through code.


    Animation

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




    Create a new AnimationClip



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



    You can now animate the value like any other !




    Better yet, hit the Record button, and simply modify the properties directly from the GraphicMaterialOverride inspector






    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

    If you want to package this into your UI shader asset, even for commercial assets, please do so! Just make sure to add a link to the GitHub page in your asset description.

    The code is very well documented if you're curious about how it works under the hood.
     
    Mark_01 likes this.