Unity上でキャラクターの肌や髪の色の変更と、Spineアニメ上でSlotカラーの操作を両立するより良い方法

koyu2

こんにちは。いつもSpineにお世話になっております。
素晴らしいツールをありがとうございます。

キャラクターの肌や髪といった一部のパーツをUnity上で色変更したいです。
同時にSpineアニメーション上でSlotカラーの変更を両立する方法を探しています

Unity上で髪や肌など特定のパーツを色変更するには、スロットカラーの操作を推奨しているとのことでした。
しかし、Slotの色変更を使用すると、Spineエディタで制作したアニメ上のSlot操作とバッティングするため、アニメ上でSlotの色操作ができなくなってしまいます。

■具体例

肌の色が異なる３種のゴブリンは、異なるスキンを用意するのではなく、
白い肌色でゴブリンを作成し、コード上で肌のSlotカラーを変更することで実現できました。

彼らを消滅させたり出現させる際、瞬間表示ではなくフェードで出現させたいです。
そこでSlotカラーをフェードするアニメを作ったのですが、動画のように、設定していたカラーがデフォルトの白に戻ってしまいます。

Spineエディタ上ではゲーム上のキャラクターがどの肌色に設定されるか知りようがないため、FFFFFFFFを基本として操作するしかありません。
キャラクター全体をフェードさせるだけであれば、MaterialPropertyBlocksなど代替方法がありますが、
アタッチメントを切り替える際にフェードで瞬間表示のチラつきを軽減させる等、アニメでSlotカラー変更を用いたいケースは多いです。
そのためSlotカラーと競合しない、肌や髪パーツの色をゲーム上で設定する方法を必要としています。

実際のところ、セットアップ画面で変更できるアタッチメントカラーはSlotカラーと競合しません。
そのためアタッチメントカラーを、Unity上で動的に変更できれば、問題が解決できそうなのですが、APIリファレンスにアタッチメントには色変更のメソッドは見つかりませんでした。

上記の課題をどのように解決したら良いでしょうか？
ご助言を頂けたら幸いです。

Spinebot

こんにちは。SpineとUnityでの色変更の問題についてお答えします。

SpineでのSlotカラーの変更とUnityでの色変更を両立させるためには、いくつかの方法があります。まず、SpineのアニメーションでSlotカラーを使用している場合、Unityでの色変更がアニメーションに影響を与えないようにする必要があります。これを実現するために、MaterialPropertyBlockを使用して、特定のスロットの色を変更することができます。これにより、アニメーションのSlotカラーの変更と競合しないようにできます。

また、SpineのアタッチメントカラーはSlotカラーと競合しないため、アタッチメントカラーを動的に変更することも考えられます。ただし、SpineのAPIには直接アタッチメントカラーを変更するメソッドはありません。そのため、アタッチメントの色を変更するには、スロットの色を変更するか、アタッチメント自体を異なる色のものに差し替える必要があります。

アニメーションでSlotカラーを使用してフェード効果を実現する場合、skeletonRenderer.OnMeshAndMaterialsUpdatedコールバックを使用して、アニメーションの後にSlotカラーを設定することで、アニメーションによるSlotカラーの上書きを防ぐことができます。

Harald

@koyu2 You could theoretically modify Attachment colors. You would need to cast the attachment from Attachment to RegionAttachment or MeshAttachment, or cast it to the common interface IHasTextureRegion respectively, then you can set the color accordingly. However, note that an Attachment is shared data and not instance data by default, so to avoid modifying all similar skeletons that share the same SkeletonData, you would need to first copy the Attachment once and assign it, so that it's only affecting the desired skeleton instance.

An easier solution however, as Spinebot mentioned, would be to let the animations set the Slot color alpha value first, and then register to the skeletonRenderer.OnMeshAndMaterialsUpdated callback and from there set the Slot color RGB values accordingly while keeping the Slot.A value.

Harald

Harald An easier solution however, as Spinebot mentioned, would be to let the animations set the Slot color alpha value first, and then register to the skeletonRenderer.OnMeshAndMaterialsUpdated callback and from there set the Slot color RGB values accordingly while keeping the Slot.A value.

Sorry, after reading the above suggestion again I just noticed that the OnMeshAndMaterialsUpdated callback is wrong if you want to modify the Slot color after animations have been applied. The OnMeshAndMaterialsUpdated callback would be used to modify Material assignment and Material properties, or modify the vertex color of each vertex of the generated mesh. While you could modify vertex colors, it's likely much too cumbersome to isolate the desired region vertices to modify and leave other vertices as-is.

What I should have suggested instead is using the UpdateComplete callback, which is called after animations have been applied. In this callback you can modify the Slot color RGB values as described, after animations are done modifying Slot alpha. This would be the easiest, recommended solution.

Therefore, you must assign a copy of the attachment so that the color can be applied to each instance of the goblin.
However, I don't know the specific steps.

Do you mean how to copy an attachment? You can just call Attachment copy = attachment.Copy();. Then you should be able to copy and re-assign the copy at a slot something like the following code:

Slot slot;
slot.Attachment = slot.Attachment.Copy();

You should ensure that this is only ever copied once for each skeleton (e.g. in Start or the like) and not each frame.

koyu2

こんにちはハラルドさん。
お返事ありがとうございます！
問題解決のためにもう少し詳しい助言をください。

■アタッチメントの色を変える方法について

上記のコードで緑ゴブリンの胴体のみを色変えしてみました。
ご指摘の通り、緑ゴブリンだけではなく、赤いゴブリンの色も変わりました（紫ゴブリンが変わらない理由は分かりません）

そのため、ゴブリンのインスタンスごとに色を適用できるよう、アタッチメントのコピーを割り当てる必要があります。
しかし、具体的な手順が分かりません。
どのようにすればよいでしょうか？

■OnMeshandMaterialsuUpdatedについて

OnMeshandMaterialsuUpdatedはメッシュやマテリアルが変更された直後に呼び出されるコールバックのようです。
しかし、私の環境では正常に動作しませんでした。
調べたところRenderSeparatorが有効だとコールバックが呼び出されないことが分かりました。
RenderSeparatorはゲームに必要なので、使用した状態でも正常に機能させるにはどうしたら良いでしょうか？

■OnMeshandMaterialsuUpdatedを用いた肌の色とアニメ中のSlotColor変更を両立する方法について
具体的な流れを確認したいです。
1.フェードアウトするアニメーションを再生。Slotカラーが変更される（白色に戻る）
2.onmeshandMaterialsupdatedのコールバック呼び出し
3.コールバック内で白色＋肌色の色を計算してSetColorで上書き

上記の工程を毎フレーム行う、ということで合っていますでしょうか？

koyu2

こんにちは、ハラルドさん。
お返事が大変遅くなってすみません。
多くの検証を行ったのですが、上記２つの方法で問題に直面してしまいました。
になりました。

===========================================================
■Slotカラーを変更する方法

What I should have suggested instead is using the UpdateComplete callback,

public class _TestSpine : MonoBehaviour
{
    SkeletonAnimation skeletonAnimation;
    private Slot slotTorso;
    
    private void Start()
    {
        skeletonAnimation = GetComponent<SkeletonAnimation>();
        
        // I'm just changing it to goblin skin for the video, so I'll skip it on code.
        SetSKin();
        
        // Spineアニメの見た目がアップデートされた後に呼び出されるコールバック
        skeletonAnimation.UpdateComplete += UpdateComplete;
        slotTorso = skeletonAnimation.skeleton.FindSlot("M45_/torso");
    }
    
    private void UpdateComplete(ISkeletonAnimation anim)
    {
        Debug.Log($"<color=#3dffff> Updated</color>");
        Color skinColor = new Color(0.7744197f, 0.8427672f, 0.7129068f, 1f);
    
        // It turns psychedelic colors.
        Color mixColor = new Color(skinColor.r + slotTorso.GetColor().r, skinColor.g + slotTorso.GetColor().g, skinColor.b + slotTorso.GetColor().b, slotTorso.GetColor().a);
        slotTorso.SetColor(mixColor);
    }


    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Alpha0))
        {
            Debug.Log("TestKey:0");
            skeletonAnimation.AnimationState.SetAnimation(0,"TestSlotColor1",true);
        }
        
        if (Input.GetKeyDown(KeyCode.Alpha1))
        {
            Debug.Log("TestKey:1");
            skeletonAnimation.UpdateComplete -= UpdateComplete;
            slotTorso.SetColor( new Color(1,1,1,1f));
            
            Color skinColor = new Color(1,1,1,1f);
            Color OnSpineAnimColor  = new Color(0,0,0,1f);
            
            Color mixColor = new Color(skinColor.r + OnSpineAnimColor.r, skinColor.g + OnSpineAnimColor.g, skinColor.b + OnSpineAnimColor.b, OnSpineAnimColor.a);
            slotTorso.SetColor(mixColor);
            // mixColor == Color:(1,1,1,1)   However, black is expected. 
        }
    }
}

skinColorをゴブリンの肌色として定義します。
ご提案いただいたSlotカラーを変更する方法では、毎フレーム「緑の肌色＋アニメで指定したSlotカラー」を計算する必要があります。しかしその方法が分かりません。

■１．取得方法
コードではアルファ値を除いて、「指定の肌色＋Slotの色」を代入しています。
ご覧のようにサイケデリックな色が点滅しています。
FindSlotでは「現在のSlot色」を取得するため、２フレーム以降は「指定の肌色＋1フレーム前で混合済みのSlot色」になってしまうようです。
Spineアニメ上のSlotカラーだけを取得する方法が必要ですが可能ですか？

■２．計算方法
また、単純に
Color SkinColor;
Color OnAnimSlotColor;
Color MixColor = SkinColor + OnAnimSlotColor;
という計算は不適切です

なぜなら白（1,1,1,1）+ 黒(0,0,0,1)を単純に加算すると白になってしまうからです。
これは肌色をUnity上で加算しないほとんどのキャラがSpineアニメ上でSlotColorを真っ黒にすることができなくなります。

そのため、Spineエディタ上で確認できるAttachmentカラー＋ Slotカラーのような色を再現できる計算が必要です。

■３．パフォーマンス
また、少し気になったのがパフォーマンスです。
Slotカラーの変更は負荷は高いですか？
この方法だと沢山のSlotをキャラクターの数だけ、毎フレーム色変えするため気になりました。

===========================================================
■アタッチメントカラーの変更をインスタンスごとに適用する方法

Slot slot;
slot.Attachment = slot.Attachment.Copy();

こちらの方法では、Spineアニメ上で別のAttachment切り替えが発生すると、Copyではない元々のアタッチメントが表示されることがわかりました。
おそらく、上記のコードはSlotの現在表示するアタッチメントを、Copyしたものに一時的に切り替えているだけのように見えます
また、SetSlotsToSetupPose()を使用すると元々のAttachmentに変わってしまうため、Attachmentからアプローチする方法は難しいと感じました。

ここまで読んでくださってありがとうございます！
何卒ご助言を頂ければ幸いです

Harald

As you can see, psychedelic colors are flashing.

From the video it seems halfway-working, it seems that your colors are not right (I see more than 2 colors flashing) and that it's not updated every frame, or not at the right time.

Slot色」になってしまうようです。
Spineアニメ上のSlotカラーだけを取得する方法が必要ですが可能ですか？
I need a way to get only the Slot color defined in the Spine animation, without blending, but is that possible?'

What do you mean by "without blending"? (It might be a machine translation mistake.)
I basically meant in the suggested solution, that you provide the RGB color from an external source, and take the A value from the animation, so combine it in a replacing way.

If you want your animations to also provide RGB color, and combine it with your custom secondary RGB color, you will run into problems when your animation does not set the color every frame, then you start from the last frame's color.

Also, simply doing:

...
Color MixColor = SkinColor + OnAnimSlotColor;`

is inappropriate.

You normally never add colors with +, usually colors are multiplied by *.

そのため、Spineエディタ上で確認できるAttachmentカラー＋ Slotカラーのような色を再現できる計算が必要です。
Therefore, I need a blending calculation that can reproduce the colors as seen in the Spine editor—that is, Attachment color + Slot color.

Colors in the Spine Editor are always multiplied when combined, never added.

この方法だと沢山のSlotをキャラクターの数だけ、毎フレーム色変えするため気になりました。
In this method, the color of many Slots for each character must be changed every frame, so I'm a bit worried about the overhead.

Modifying slot colors every frame in a callback should be cheap enough to not worry about. If you are, just perform some measurements on the target device, with and without the feature enabled, then you can be sure.

Slot slot;
slot.Attachment = slot.Attachment.Copy();

Slot slot;
slot.Attachment = slot.Attachment.Copy();

こちらの方法では、Spineアニメ上で別のAttachment切り替えが発生すると、Copyではない元々のアタッチメントが表示されることがわかりました。
おそらく、上記のコードはSlotの現在表示するアタッチメントを、Copyしたものに一時的に切り替えているだけのように見えます

With this method, if another Attachment switch occurs in the Spine animation, the original (non-copied) attachment gets displayed again.
It seems that the code above just temporarily switches the currently displayed Attachment of the Slot to a copied one.

Yes, you then need to again copy the modified attachment as soon as it changes, or re-use a previous copy if you've alreayd copied it (e.g. using a Dictionary<original attachment, attachment copy>). This is indeed not ideal, and requires more management overhead to keep things correct.

koyu2

You normally never add colors with +, usually colors are multiplied by *.
Colors in the Spine Editor are always multiplied when combined, never added.

ありがとうございます。
私はこの色の正しい計算方法が分かりませんでした。

Color skinColor = new Color(0.7744197f, 0.8427672f, 0.7129068f, 1f);
Color mixColor = new Color(skinColor.r * slotTorso.GetColor().r, skinColor.g * slotTorso.GetColor().g, skinColor.b * slotTorso.GetColor().b, slotTorso.GetColor().a);

このようにアニメーションのSlotカラーと、キャラクターの肌色であるskinColorを乗算する計算に変えてみました。
しかし、また一つ問題に直面しました。

ご覧の動画のように、緑色に着色された肌色がすぐに真っ黒になってしまいました。
動画の前半はSlotカラーを変更するアニメではありません。

後半はSlotカラーを変更するアニメになります。
こちらは正しい色が適用されています。（デフォルト色 → 黒 → 透明 → 青 →デフォルト色と変化します）

if you want your animations to also provide RGB color, and combine it with your custom secondary RGB color, you will run into problems when your animation does not set the color every frame, then you start from the last frame's color.

はい。それを解決する方法を探しています。

Slot.GetColor()は、ゲーム中のキャラクターの現在のSlotカラーを取得するメソッドのようです。
そのため、動画後半のようにSlotカラーを変更するアニメであれば、問題ないようです。
おそらくアニメのタイムライン上のSlotカラーが毎フレーム適用されていますね。
つまりSpineエディタのタイムライン上のSlotカラーを取得できているのと同じことです。
その後、肌色であるセカンダリーを乗算しています。

しかし、動画の前半のように、Slotカラーを変更するアニメではない場合、
skinColor * skinColor * SkinColor... というように毎フレーム乗算され真っ黒になってしまいます。

そのため、SkinColorを乗算する前、現在のSpineアニメのタイムライン上Slotカラー取得する方法が必要です。
それはどのようにすればよいでしょうか？

Harald

koyu2 ご覧の動画のように、緑色に着色された肌色がすぐに真っ黒になってしまいました。
動画の前半はSlotカラーを変更するアニメではありません。

Yes, this is what I described in this sentence earlier:
"If you want your animations to also provide RGB color, and combine it with your custom secondary RGB color, you will run into problems when your animation does not set the color every frame, then you start from the last frame's color."

後半はSlotカラーを変更するアニメになります。
こちらは正しい色が適用されています。（デフォルト色 → 黒 → 透明 → 青 →デフォルト色と変化します）

If your animation sets the color, then during applying the animation each frame the color is explicitly set to the correct color. So you have a reliable base for your color combinations.

koyu2 しかし、動画の前半のように、Slotカラーを変更するアニメではない場合、
skinColor * skinColor * SkinColor... というように毎フレーム乗算され真っ黒になってしまいます。

そのため、SkinColorを乗算する前、現在のSpineアニメのタイムライン上Slotカラー取得する方法が必要です。
それはどのようにすればよいでしょうか？

This is what I described above: if the animation does not change and therefore not set the color, your color multiplications are based on the last frame's color. The last frame's color is multiplied every frame by a second color, turning more and more black every frame.

If you are setting RGB color in animations and also as your secondary color, then you need to key the
color in at least one animation that is playing, so that the color base is not the last frame's color but the animation color. You could e.g. play a special setup-pose color animation on a separate track which just serves to set the setup-pose color each frame.

May I ask what you are trying to achieve with animation RGB color combined with skin color, i.e. what is the RGB color that the animation sets here? I thought you just wanted to use the animation to control color alpha for a fade-out or fade-in effect, but I don't understand what you are using RGB color for in your animations.

koyu2

こんにちは、ハラルドさん。
またまた返事が遅くなってすみません。

If you are setting RGB color in animations and also as your secondary color, then you need to key the
color in at least one animation that is playing, so that the color base is not the last frame's color but the animation color. You could e.g. play a special setup-pose color animation on a separate track which just serves to set the setup-pose color each frame.

ご提示の方法を試してみました。
胴と右手に肌色が正常に適用され喜ぶゴブリンの動画です。
キャラクターの肌や髪の色をデフォルトの白色に設定したアニメを作り、
これを一番下のTrackで再生することで問題が解決できました！
制作したアニメーション全てにSlotカラーを設定することは現実的ではなかったので助かります。
ありがとうございます！

May I ask what you are trying to achieve with animation RGB color combined with skin color, i.e. what is the RGB color that the animation sets here?

先の動画の例で説明します。
なぜ単純にフェードせず、一度黒く塗っているからフェードしているかというと、
そのままフェードするとパーツの継ぎ目が目立ち不自然に見えます。
そのため、一度黒く塗ってからフェードすることで見た目の違和感を軽減させています。

また他にも例えばダメージを受けたら赤く光らせる、
奥側の腕や足を少し暗くすることで奥行きが表現できる、
入れ墨を光らせる演出がしたい、など
RGBカラーを変化させたいケースはたくさんあります。

単純にアルファ値の維持だけでは、このような他の表現ができなくなってしまいます。
そのため、肌や髪の色設定とアニメ上の色変化を両立する方法が必要でした

Harald

Glad it helped, thanks for letting us know!

Thanks also for explaining your use case why you need to set the RGB color programmatically.

As you mentioned flashing red: Please note that this is typically done via tint-black slot color (secondary, dark color) instead of using the primary (light) slot color.