UnityでSpineデータの一部にモザイクなどのシェーダーをあてるtips

こんにちは、Unityエンジニアの黒板です。

今回はSpineで作成したデータの各パーツに別々のシェーダーをアタッチするための一連の流れについて紹介したいと思います。

※この記事はGRIPHONE Advent Calendar 2018 16日目の記事です。
https://adventar.org/calendars/3147
https://qiita.com/advent-calendar/2018/griphone

まず、Spineでデータを作成します。

このとき、イメージファイルのディレクトリをあてたいシェーダーごとに分けて格納します。
下の図は4つに分けて格納した時の例になります。

mosaicは黒の小さい素材にしておいて、モザイクのかけたい場所に任意の形でアニメーションさせておくことができます。
opticalはPhotoshopなどにおけるOverlayなどの演出をするために使用できます。

次に、バイナリ形式でエクスポートします。

バイナリ形式でエクスポートする場合、拡張子をskel.bytesにしないといけないので注意してください。アトラス作成はする必要ありません。

終わったら、バイナリをエクスポートしたディレクトリと同じ場所にテクスチャパッカーを使用してアトラスを出力します。

こうすると、分けておいたイメージフォルダごとにテクスチャが管理できるようになります。

エクスポートが終わったら、/Hoge/exportフォルダをUnityにドラッグ＆ドロップして取り込みます。
生成されたマテリアルのシェーダーを任意に設定してください。
モザイクシェーダーなどは自前で用意します。

SkeletonDataからSkeletonAnimation形式で生成してできることが確認できれば完了です！

SkeletonGraphic形式では複数のマテリアルの参照がもてないため、拡張しない限りはSkeletonAnimation形式でないとこの方法は使えないことに注意してください。

【おまけ】

スキンを変更するのではなく、同時に出すためにAddSkinメソッドを拡張してみると以下のようになります。

public static class HogeSkeletonExtensions
{
    #region Public Method
    // 指定されたスキンを追加する拡張メソッド
    public static void AddSkin(this Skeleton skeleton, string skinName)
    {
        if (skeleton.skin == null)
        {
            Debug.LogError("Current skin is null");
            return;
        }
 
        var foundSkin = skeleton.data.FindSkin(skinName);
        if (foundSkin == null)
        {
            throw new ArgumentException("Skin not found: " + skinName, nameof(skinName));
        }
 
        foreach (var attachment in foundSkin.Attachments)
        {
            skeleton.skin.Attachments[attachment.Key] = attachment.Value;
        }
    }
}