Unity 2D Animationのボーンを使用して変形したスプライトを取得したい。

Question

実現したいこと

Unity2DAnimationを使用して、ボーンとSpriteSkinで変形したスプライトがあるのですが
そこから「ボーンで変形したスプライト」をテクスチャとして取得したいです。

ボーン変形したスプライトをテクスチャとして取得出来れば、
既存のアセットを使用して
自由変形させることが出来るので、そのためにテクスチャとして取得したいです。

ボーンにより無理やり自由変形する事も可能ではあるのですが、
どうしても自由変形できるアセットよりも
クオリティが落ちてしまうため　ボーンではなくそのアセットで自由変形をしたいです。

発生している問題・分からないこと

SpriteSkinがスプライトを変形させてる、というのは分かったのですが
スプリクトなどはほとんど初心者のため、SpriteSkinから
どうやってボーン変形したスプライトを取得すれば良いのかがわかりませんでした。
もし可能でありましたら、解決のヒントなど頂けたらありがたいです。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

teratailやグーグルで検索をかけたり、SpriteSkinのコードを読み解こうと試みたりしたのですが
変形した頂点の座標の位置などhttps://docs.unity3d.com/Packages/com.unity.2d.animation@5.0/api/UnityEngine.U2D.Animation.SpriteSkin.html
分かる関数などはあったのですが　変形したスプライトそのものの情報をどこで取得するのかが
わかりませんでした。

補足

Unity2022.3.12f1 Windows10

Answer 1

おっしゃるとおり変形後のメッシュの頂点座標は取得できるものの、変形後の画像を取得する機能は用意されていなさそうですね。
自前で別途レンダリングしてやらないといけないかもしれません。レンダリング用のスクリプトとして、下記のようなものを作ってみました。

using UnityEngine;
using UnityEngine.Rendering;
using UnityEngine.U2D.Animation;

public static class SpriteSkinUtility
{
    public static Sprite CaptureDeformedSprite(this SpriteSkin spriteSkin)
    {
        var renderer = spriteSkin.GetComponent<SpriteRenderer>();
        if (renderer == null)
        {
            Debug.LogError($"{nameof(SpriteRenderer)} not found.");
            return null;
        }

        var sourceSprite = renderer.sprite;
        if (sourceSprite == null)
        {
            Debug.LogError($"{nameof(Sprite)} not found.");
            return null;
        }

        // 変形されたスプライトのバウンディングボックスを取得する
        var bounds = renderer.localBounds;
        var boundingRect = new Rect(bounds.min, bounds.size);

        // テクスチャのサイズを決める
        var pixelsPerUnit = sourceSprite.pixelsPerUnit;
        var textureWidth = Mathf.RoundToInt(boundingRect.width * pixelsPerUnit);
        var textureHeight = Mathf.RoundToInt(boundingRect.height * pixelsPerUnit);

        // スプライト撮影にあたってオブジェクトの配置を操作したいので、後で元に戻すために現在の配置を覚えておく
        var transform = renderer.transform;
        var spriteParent = transform.parent;
        var spriteScale = transform.localScale;
        transform.GetLocalPositionAndRotation(out var spritePosition, out var spriteRotation);

        // スプライトの配置を調整する
        // 中心をワールド空間原点に置き、2m四方の正方形になるよう伸縮する
        var scale = new Vector3(2.0f / boundingRect.width, 2.0f / boundingRect.height, 1.0f);
        transform.SetParent(null, false);
        transform.localScale = scale;
        transform.SetLocalPositionAndRotation(
            Vector3.Scale(-bounds.min - bounds.extents, scale),
            Quaternion.identity);

        // レンダーテクスチャ上にスプライトをレンダリングする
        var currentTarget = RenderTexture.active;
        var renderTexture = RenderTexture.GetTemporary(textureWidth, textureHeight);
        RenderTexture.active = renderTexture;
        var commands = new CommandBuffer();
        commands.SetViewProjectionMatrices(Matrix4x4.identity, Matrix4x4.identity);
        commands.DrawRenderer(renderer, renderer.sharedMaterial);
        Graphics.ExecuteCommandBuffer(commands);
        commands.Dispose();

        // スプライトの配置を元に戻す
        transform.SetParent(spriteParent, false);
        transform.localScale = spriteScale;
        transform.SetLocalPositionAndRotation(spritePosition, spriteRotation);

        // レンダリング結果をTexture2Dに読み取って、それを使ったスプライトを作る
        var spriteName = $"{sourceSprite.name} (Captured)";
        var texture = new Texture2D(textureWidth, textureHeight)
        {
            name = spriteName
        };
        var textureRect = new Rect(0.0f, 0.0f, textureWidth, textureHeight);
        texture.ReadPixels(textureRect, 0, 0);
        texture.Apply();
        RenderTexture.active = currentTarget;
        RenderTexture.ReleaseTemporary(renderTexture);
        var sprite = Sprite.Create(texture, textureRect, -boundingRect.min / boundingRect.size, pixelsPerUnit);
        sprite.name = spriteName;
        return sprite;
    }
}

使用例として、下記のようにSpriteSkinを撮影して別のSpriteRendererに結果をセットするスクリプトを試してみたところ、

using UnityEngine;
using UnityEngine.U2D.Animation;

public class SpriteSetter : MonoBehaviour
{
    [SerializeField] private SpriteSkin source;
    [SerializeField] private SpriteRenderer destination;

    private Sprite capturedSprite;

    private void OnDestroy()
    {
        DestroySprite(this.capturedSprite);
    }

    private void OnGUI()
    {
        if ((this.source == null) || (this.destination == null))
        {
            return;
        }

        if (GUILayout.Button("Capture"))
        {
            // 古いスプライトを削除し...
            DestroySprite(this.capturedSprite);

            // SpriteSkinをキャプチャーしたスプライトを作り...
            this.capturedSprite = this.source.CaptureDeformedSprite();

            // 隣に配置してあるSpriteRendererにセットする
            this.destination.sprite = this.capturedSprite;
        }
    }

    // スプライトが使っているテクスチャも新しく作ったものなので、
    // スプライトを削除したい時は併せてテクスチャも削除してやるといいでしょう
    private static void DestroySprite(Sprite sprite)
    {
        if (sprite == null)
        {
            return;
        }

        Destroy(sprite.texture);
        Destroy(sprite);
    }
}

下図のようにボタンクリック時のSpriteSkin（左側）を撮影し、別のSpriteRenderer（右側）に反映させることができました。

Comments

[After]

丁寧なお返事・お答え、誠にありがとうございます！　スプリクトまで組んでくださり、本当にありがたいです・・・！
また実装するスプリクトや動画によるわかりやすい参考例も、とてもありがたいです・・・！

自分でスプリクトじゃない範囲で試してみて　カメラを使って無理やり
該当のスプライトだけを映すカメラを作り、RawImageで表示するやり方をやっていたのですが、

その場合だとレイヤーがその分、必要となり３１個の制限を超えてしまう上に
オブジェクト数も一つのスプライトに対して　ボーン変形するスプライトとカメラとRawImageと
かなり管理がし辛いヒエラルキー構成になってしまっていたため
カメラを使わずに撮影出来ることは思いもよらなかったので、本当にありがたいです・・・！

重ねて、ご丁寧なスプリクトを書いてくださり、本当にありがとうございます・・・！