質問する

SpriteStudioオブジェクトをマスクする方法について

0 支持
154 閲覧
(130 ポイント) Q&A
Unity上で生成したScript_Sprite Studio 6_Rootオブジェクトを四角形系のUI上に表示を行い、そのUIの範囲を超えた場合にマスクを行う機能はマテリアルまたはこのスクリプトのフラグに備わっているのでしょうか。

実現したい機能に類似するものとしてUnityのスクロールビューに近いことができればと思っております。もちろんこちらを実現するためにはUnityのコンポーネント(MaskまたはRectMask2Dなど)とマテリアルのシェーダーにマスクする機能が存在するために実現はできるようになっております。
このページをシェアする
Facebookでシェア Twitterでシェア

回答 1

+1 支持
(5.0k ポイント)
編集

BRAK 様

お世話になっております。SS6Player for Unity開発担当です。

いくつかの実装の方法が思いつきますが、標準的かと思われる方法は2種類あります。
※一番末尾でも書いてありますが……恐らくは下記の内の「2」の方法が一番簡便かと思われます。

1.

SpriteStudioの「マスク」機能を使用して指定の範囲をマスクすることとなります。

ただ、こちらの方法は、どうしてもSpriteStudioの機能となりますため、動的に決定されるメニュー内容などを扱う場合に、データ的に一工夫が必要になる可能性があります。

例えば……

  • スクロールビュー自体のデータをマスクごとSpriteStudioのアニメーションデータ（SSAE）とした上で
  • それらのビューに表示される個々のアイコン群を（SpriteStudioの）「インスタンス」機能で（同じプロジェクト中の別のアイコン専用のアニメーションデータを呼び出す形で）配置しておき
  • Unity上で各「インスタンス」（呼び出されている子アニメーション）群を動的に入れ替える（そういった処理関数は設置されています）

と言った形が代表的な（1の）手段になります。

2.

もう少しUnityの機能を使用した形で「SpriteStudioで作ったアニメーション画像（アイコンやUI土台など）を使用したい」……という場合には

SpriteStudioで作ったアイコンなどのアニメーションデータを、Unity-UI（Canvas）上に変換する（インポート時点での）専用モードがあります。

こちらは「SpriteStudioのデータを、（SS6Player for Unity独自のデータ形式ではなく）Canvasの描画データに変換する」というインポートモードです。

こちらですと、「各メニューのアイコン群」や「UIの土台」などだけを別々にSpriteSutidoのデータで作成して、メニューや描画の制御などはUnityのUI（uGUI）上の機能でそのまま扱うことができる……というメリットがあります。

  • UnityからSpriteStudioのデータをインポートする際（上部メニューバーから[Tools]-[SpriteStudio6]-[Importer]を選択した時）に、出てくるウィンドウの最上部に「Import Mode」の項目がありますので、こちらをプルダウンで「Convert To Unity-UI」に設定します。
  • 通常のインポート時と同様に、各種インポート内容を設定して・UnityにSpriteStudioのデータをインポートすると、インポート先のフォルダにCanvas用の描画データ群（若干スクリプトで拡張してあります）がインポートされます。

こちらの方法のドキュメントは下記になります。

https://github.com/SpriteStudio/SS6PlayerForUnity/wiki/%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E6%89%8B%E9%A0%86#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88convert-to-unity-ui%E3%83%A2%E3%83%BC%E3%83%89ver210%E4%BB%A5%E9%99%8D

また、このUnity-UIモードでのインポートの場合には、SpriteStudio上で使用できるアニメーションデータ（キーフレーム種類やパーツの合成方法）に制限が出ますが、その解説は下記になります。

https://github.com/SpriteStudio/SS6PlayerForUnity/wiki/%E3%81%94%E6%B3%A8%E6%84%8F#Caution-Convert-To-Unity-UI

※一応複数のセルマップで構成されるアニメーションには対応はしてありますが、色々なことを考えるとあまり複雑なセルマップ構造は推奨していませんので、できるだけ少ないセルマップ数に（できれば1つ）していただけますと簡便かと思われます。

表示時に関する解説は下記になります。

https://github.com/SpriteStudio/SS6PlayerForUnity/wiki/%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%82%BF%E3%81%AE%E8%A9%B3%E7%B4%B0%E8%A7%A3%E8%AA%AC%EF%BC%88%E3%80%8CUnity-UI%E3%80%8D%E3%83%A2%E3%83%BC%E3%83%89%EF%BC%89#After-Put-Animation

こちらのモードは、アニメーションのデータもAnimationClipに落ちますので、状態遷移もAnimatorを使用して行う形になります。

※UnityのUI機能を使用しますので、ひょっとするとこちらの方がご希望の実装への事前に把握するべき情報の量などが少なくて済むかと思われます。

それ以外での方法となると、若干「複雑な」方法を採る必要があります。

SS6Player for Unityの通常のシェーダにおいてピクセルごとのマスクに近い処理を行うには……具体的には「Zバッファでの深度チェック」か「ステンシルでのステンシルチェック」のどちらかを使用することで（上記以外の方法で）可能ではあります。

a)

Zバッファについては、SS6Player for Unityのシェーダ自体が、元々Zバッファを「LessEqual（以下）」で判定する初期設定になっています（これはUnityの3Dシーン内にSS6Player for Unityの描画オブジェクトを配置できるようになっている都合からです）。

つまり、ご希望のUIをマスクする表示する前に、Zバッファを既定の深度値で塗りつぶす（そういう描画オブジェクトをUnityの描画機能などで設置する）ことによってマスキングの代わりを行うことが可能です。

b)

同様にステンシルバッファを事前にフィルする方法で、行う方法は（シェーダなどの構造やフィル先がZバッファではなくステンシルバッファである点……が異なるだけで）aのZバッファのフィルと同じ処置になります。

フィルする際に（フィルする時のマテリアルで）ステンシルテストのパス後を「Invert（反転）」するか「Decrement（減算）」するかで、複数枚数のマスクを重ねた場合の挙動が変わりますが……SS6Player for Unityの描画シェーダ側では（ステンシルマスクの実装として）ステンシルの判定式は「Equal」・参照値は「0」で判定していますので、ステンシルバッファ値が0の範囲のみ描画が行われます。（これはSS6Player for UnityでのSpriteStudioのマスク機能の描画実装そのもので、ステンシルの制御をアニメーションデータ内で行うか・外で行うか……の違いなだけです）

……という（a/bの）2種類の動的なマスキングの方法がありますが……こちらはかなりテクニカルに過ぎるかと思いますので、現時点ではあまり推奨しません（もしそういった実装が必要であれば、別途にご質問いただければ、より精細な情報を提供できるかとは思います）。

恐らくご質問の内容から推測するに……「Convert To Unity-UI」モードを使用する（上記の「2」の方法）のが一番目的に近いのではないかと思われます（難点としては、使用可能なアニメーションのキーデータなどに制限が付く点ではあります）。

ご検討いただけますと助かります。

また、開発の一助となれば幸いです。

何卒今後ともよろしくお願いいたします。

(130 ポイント)
ご回答ありがとうございます。

非常に助かります。
Snow Theme by Q2A Market
Powered by Question2Answer
...