スプライトスワップの例

以下のサンプルプロジェクトは、スプライトスワップを使用してさまざまな効果や結果を実現する方法を示しています。

以下のサンプルのシーンはすべて Assets/Samples/2D Animation/[X.Y.Z]/Samples/4 SpriteSwap にあります。

Animated Swap

このサンプルは、スプライトのスワップを使用して、スプライトのスワップと デフォーメーション の両方を含むアニメーションに再利用可能なアニメーションクリップを作成する方法を示しています。**ノート:**このサンプルを使用するには、PSD Importer パッケージをインストールしてください。

シーンファイル 1 Animated Swap.unity を開き、サンプルの動作を確認します。

キャラクターのカラーバージョンとグレースケールバージョン。異なるキャラクターが 1 つのアニメーションクリップを共有します。これは、Sprite Resolver の状態をアニメーション化することによって行われます。開いた手から親指を立てる手の動きのアニメーションは、2 つのスプライトのスワップです。
親指を上にした状態の初期フレーム。

このサンプルは、Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Sprites にある 2 つの異なるソースファイルを使用しています。使用されているアセットは以下のとおりです。

  • dialog.psb
  • dialog gray.psb

これらのアセットは、PSD Importer の Character Rig プロパティを有効にしてインポートされています。どちらのアセットも同じスケルトンでリグ設定されており、各アセットには、アニメーション中にスワップされる手用の 2 つの異なるスプライトがあります。

これらのストライプは以下のとおりで、Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 Sprite Swap/Sprite Library にあります。

  • dialog.spriteLib (カラーのキャラクター)
  • dialog gray.spriteLib (グレースケールのキャラクター)

次のステップに従って、サンプルシーンを再構築します。

  1. dialog.psb プレハブと dialog gray.psb プレハブの両方を Project ウィンドウからシーンにドラッグします。

  2. Sprite Library コンポーネント を dialog ゲームオブジェクトに追加し、dialog.spriteLib アセットをその Sprite Library Asset プロパティに割り当てます。

  3. Sprite Library コンポーネント を dialog gray ゲームオブジェクトに追加し、dialog gray.spriteLib アセットをその Sprite Library Asset プロパティに割り当てます。

  4. dialog ゲームオブジェクトの階層を展開し、R_arm_2 子ゲームオブジェクトを無効にします。このアセットはアニメーション中にスワップされるため、必要ありません。

  5. R_arm_1 ゲームオブジェクトに移動し、Sprite Resolver コンポーネント を追加します。Label ドロップダウンメニューまたはサムネイルから R_arm_2 グラフィックスを選択します。

  6. dialog gray ゲームオブジェクトで手順 4 から 5 を繰り返します。

  7. Animator コンポーネント を dialog および dialog gray ゲームオブジェクトに追加します。Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 Sprite Swap/Animation/Animators で Dialog アニメーターコントローラーアセット を探し、このアセットを Animator コンポーネントの Controller プロパティに割り当てます。

このサンプルでは、Sprite Library コンポーネントが Sprite Resolver コンポーネントと同じゲームオブジェクトに接続されていません。Sprite Resolver は、Sprite Library コンポーネントを、その Sprite Resolver があるゲームオブジェクトから開始してゲームオブジェクト階層を上に向かって走査します。これにより、Sprite Resolver コンポーネントがアタッチされている共通のルートゲームオブジェクトに Sprite Library コンポーネントをアタッチすることで、1 つまたは複数の Sprite Resolver で同じ Sprite Library コンポーネントを使用できます。

Part Swap

このサンプルは、Sprite Resolver データを変更することで、提供されている API を使用して、スプライトアセットをスワップする方法を示しています。2 Part Swap.unity シーンを開き、サンプルの動作を確認します。

さまざまな体の部位のドロップダウンを持つ騎士キャラクター。SpriteResolver のその部位の Label プロパティを変更することで、異なるキャラクター部位をスワップすることができます。

このシーンでは、各部位にスワップできる 3 つの異なる外観のオプションがあります。グラフィックスアセットは以下のとおりで、Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Sprites にあります。

  • Knight.psb
  • Skeleton.psb
  • Witch.psb

上記の 3 つのグラフィックスアセットすべてから作成されたスプライトを含む Sprite Library アセット が作成されます。カテゴリ はアクターの体の部位ごとに作成され、キャラクターの 3 つの異なるバージョンから派生した 3 つのエントリーがあります。このアセットは Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Sprite Library/Part Swap.spriteLib にあります。

Sprite Library コンポーネントをシーンの KnightRig ゲームオブジェクトにアタッチします。Part Swap.spriteLib アセットをその Sprite Library Asset プロパティに割り当てます。

KnightRig ゲームオブジェクトの下にあるすべてのスプライトレンダラーに Sprite Resolver コンポーネントを追加します。ゲームオブジェクトが表す体の部位に応じて、対応するゲームオブジェクトに一致するスプライトを割り当てます。例えば、KnightRig ゲームオブジェクトにアタッチされた Sprite Resolver に、'Body' カテゴリにあるスプライトの 1 つを選択するなどします。

この設定では、アクターの任意の部位を別のスプライトに個別にスワップできます。

Swap Part スクリプト

SwapPart という名前のカスタム MonoBehaviour スクリプトが KnightRig ゲームオブジェクトにアタッチされています。このスクリプトは Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Scripts/Runtime/SwapPart.cs にあります。

このスクリプトは、スワップ可能なスプライトを取得するために Sprite Library コンポーネントへの参照を保持しています。また、Sprite Resolver コンポーネントによって変更可能な、Sprite Library 内のスプライトのカテゴリを表すデータの配列を保持しています。

Swap Part スクリプトは開始時に、Sprite Library コンポーネントが使用する Sprite Library アセットの取得を試みます。

var libraryAsset = spriteLibrary.spriteLibraryAsset;

この Sprite Library アセットから、カテゴリに含まれるエントリーとラベル名を取得します。

var labels = libraryAsset.GetCategoryLabelNames(swapOption.category);

これはその後、UI ドロップダウンリストに入力するために使用されます。

UI ドロップダウンリストの値が変更されると、関連するスプライトを使用するように Sprite Resolver コンポーネントが設定されます。

swapOption.spriteResolver.SetCategoryAndLabel(swapOption.category, swapOption.dropdown.options[x].text);

Full Skin Swap

このサンプルは、Sprite Library コンポーネントが参照する Sprite Library アセット を変更することで、提供されている API を使用してスプライトの外観をスワップする方法を示します。3 Full Swap.unity シーンを開き、サンプルの動作を確認します。

騎士、オオカミ、魔女を切り替えるドロップダウンを持つ騎士キャラクター。SpriteLibrary で使用されている SpriteLibraryAsset を変更することで、キャラクターの外観全体をスワップできます。

このシーンには、スワップ可能な 3 つの異なる外観アセットオプションがあります。これらのアセットは以下のとおりで、Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Sprites にあります。

  • Knight.psb
  • Wolf.psb
  • Witch.psb

Sprite Library アセットは、カテゴリ、エントリー、ラベル名は同じですが、選択されているスプライトが異なります。これらのアセットは以下のとおりで、Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Sprite Library にあります。

  • Knight.spriteLib
  • Wolf.spriteLib
  • Witch.spriteLib

Sprite Library コンポーネントを KnightRig ゲームオブジェクトにアタッチします。Knight.spriteLib アセットをその Sprite Library Asset プロパティに割り当てます。

KnightRig ゲームオブジェクトの下にある各スプライトレンダラーに Sprite Resolver コンポーネントを追加します。各 Sprite Resolver に、アタッチ先の体の部位に対応するスプライトを割り当てます。例えば、torso ゲームオブジェクトにアタッチされた Sprite Resolver に torso スプライトを選択します。

Swap Full Skin スクリプト

SwapFullSkin という名前のカスタム MonoBehaviour スクリプトが KnightRig ゲームオブジェクトにアタッチされています。このスクリプトは Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Scripts/Runtime/SwapFullSkin.cs にあります。

UI ドロップダウンリストの値が変更されると、このコンポーネントは Sprite Library コンポーネントで関連する Sprite Library アセットが使用されるように設定します。

spriteLibraryTarget.spriteLibraryAsset = spriteLibraries[value];

DLC Swap

このサンプルは、提供されている API を使用して、Sprite Library コンポーネントが参照する Sprite Library アセットを変更することで、スプライトの外観をスワップする方法を示しています。このサンプルは、Full Skin Swap サンプルをベースに構築されています。

Full Skin Swap の方法との違いは、Sprite Library アセットがランタイムに アセットバンドル からロードされ、後で Sprite Library コンポーネントに追加されることです。4 DLC Swap.unity シーンを開き、サンプルの動作を確認します。

スキンを選択するドロップダウンを持つ 2 人の騎士キャラクター。これらのキャラクターには、追加の外観を含むダウンロードコンテンツがあります。これは、アセットバンドル内の Sprite Library アセットを後でロードするためにエクスポートすることで実現できます。

アセットバンドルが正しく機能するように、Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Sprite Library 内の Skeleton.spriteLib アセットに、対応するアセットバンドルタグのラベルが付いていることを確認します。

Load Swap DLC スクリプト

LoadSwapDLC という名前のカスタム MonoBehaviour スクリプトが Load DLC ゲームオブジェクトにアタッチされています。このスクリプトは Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Scripts/Runtime/LoadSwapDLC.cs にあります。

スクリプトは DLC がロードされたときに開始され、アセットバンドルをスキャンして Sprite Library アセットを探します。Sprite Library アセットがロードされると、Full Skin Swap サンプルからこれらのエントリーが SwapFullSkin スクリプトに追加されます。