Tween color overlay of Spine animation

Question

Im using Unity3D and character animations imported from Spine. I want to add a color overlay over those characters. For example, I have one character, I want to make it a "shadow" character, so I add the black color over it in this way:

GetComponent<SkeletonAnimation>().Skeleton.color = new Color(0f,0f,0f);

Nevertheless, I want a Tween between the regular color, and the new color. But, unfortunately, I can't do it with the DOColor method of DOTween. I try

GetComponent<SkeletonAnimation>().Skeleton.DOColor(Color.Black,1);

But the method DOColor for Skeleton doesn't exists. So which is the way to follow to accomplish this?

Enz · Accepted Answer · 2019-05-14T22:45:30.513

DoColor, DoMove, etc are shortcuts and extension method that written for unity's built-in components. SkeletonAnimation is not supported by DoTween extension methods. You can tween its color property like this:

Color yourColor = Color.white; //GetComponent<SkeletonAnimation>().Skeleton.color
Color targetColor = Color.black;
float duration = 1f;
DOTween.To(() => yourColor, co => { yourColor = co;  }, targetColor, duration);

Also, You can write your own extension:


public static class MyExtensions{

    public static Tweener DOColor(this SkeletonAnimation target, 
    Color endValue, float duration)
    {
    DOTween.To(() => target.color, 
               co => { target.color = co; }, 
               endValue, 
               duration);   
    } 


}

Well, I found an easiest way... DOTween.To(getter,setter,endValue, duration) and that's it, not writting the extension, just that command. And it works! As is based on your answer, I will mark it as correct! — David TG, May 17 '19 at 12:12

score 0 · Answer 2 · answered Sep 13 '21 at 23:43

If you are working with UI, For SkeletonGraphic, following code works.

public static class Utilities
{
    public static void DOColor(SkeletonGraphic skeletonGraphic, Color endValue, float duration)
    {
        DOTween.To(() => skeletonGraphic.color, 
            newColor => { skeletonGraphic.color = newColor; }, 
            endValue, 
            duration);
    }
}

And then you can call like:

private SkeletonGraphic _skeletonGraphic;

private void Start()
{
    _skeletonGraphic = spineAnimationParent.GetComponentInChildren<SkeletonGraphic>();
}

Utilities.DOColor(_skeletonGraphic, Color.grey, 0.5f);

It is important to NOT pass the color by value (i.e. _skeletonGraphic.color as input of DOColor function would be bad), because since you want to change the color inside of your class, you need to pass reach reference in Utilities.DOColor().

Tween color overlay of Spine animation

2 Answers2