Material Tint has no Effect in Scrollview / On Maskable Image

Hello community,

the two rectangles in this screenshot have the same material with UiDefault shader and a green “tint” attached to them:

Only difference is that one is child of a scrollview and the other isn’t.
If I disable and re-enable the one in the scrollview it does update its color.
It also updates correctly if I remove the “maskable” flag from the flat rectangle, but obviously that makes the scrollview useless.

Is this desired behavior or a bug?
In every case it is not allowing me to have scrollviews in menus that are meant to fade in and out smoothly.
Is there a way to circumvent this?

This happens in all recent versions I’ve tried. For example 2020.1.11f1.

Have tried to add Canvas.ForceUpdateCanvases(); in an update function, but without effect.

Here a copy of this very simple project:
https://www.dropbox.com/s/xd0pokjuncdl3g1/ScrollViewBugTest.zip?dl=0

Huge thanks for suggestions :slight_smile:

1 Like

Have found some more information here: Masked Material Shader Changes not working correctly
So apparently to enable masks, Unity duplicates and modifies the material of your object.
So the material is not actually the same you assigned, once at runtime…
However the function RecalculateMasking() causes the cloning again, with the new values.

Therefore I have found a workaround. Add this class to the viewport object of the scrollable:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SimpleMaskUpdater : MonoBehaviour
{
    static public bool do_update = false;
    static public bool last_update = true;

    IMaskable[] maskables = null;
    void OnEnable()
    {
        maskables = GetComponentsInChildren<IMaskable>();
    }

    void Update()
    {
        if (do_update)
        {
            if (!last_update)
                maskables = GetComponentsInChildren<IMaskable>();
            foreach (IMaskable msk in maskables)
                msk.RecalculateMasking();
        }
    }
    void LateUpdate()
    {
        last_update = do_update;
    }
}

Then just set SimpleMaskUpdater.do_update to True when starting to change the material values and to false when done with it.
You might be able to ommit the “maskables = GetComponentsInChildren();” inside the update function as well as the whole “last_update” variable for performance reasons. I need it in my project though because the elements can change frequently.

Not very sure about the performance impact of RecalculateMasking(). It has not been significant in my case though and I only need it for GUI. If you want to use it all the time in a game, you might want a different workaround.

1 Like