Spine-unity用アウトラインシェーダー

February 10th, 2020

spine-unityランタイムのすべてのシェーダーでアウトラインレンダリングをサポートできるようになったことを発表させていただきます！これにより、選択されたキャラクターや、Spineで動かしたUI要素やその他様々な要素の周りに色付きのアウトラインを表示することが簡単になります。

現在spine-unityランタイムに付属する各シェーダーは追加のOutlineセクションを提供するようになりました。マテリアルのOutlineパラメーターを有効にすると、そのシェーダーは自動的にSpine/shader_nameから新しいSpine/Outline/shader_nameシェーダーバリアントに切り替えられ、無効にすると元に戻ります。

別個のアウトラインシェーダーによりアウトラインが不要な場所でレンダーパスが無駄にならずドローコール バッチングに最適な状態を保ちます。

作成とアウトラインマテリアルの切り替え

アウトラインマテリアルを作成するために、まず最初にオリジナルのマテリアルを複製します。> 注意: これは通常のSkeletonRenderer, SkeletonAnimation や SkeletonMecanim使用する場合のスケルトンアセットの次にある *_Material が該当します。 SkeletonGraphic の場合はSkeletonGraphicDefaultです。

新しいマテリアルを選択してマテリアルインスペクターでOutlineプロパティを有効にします。マテリアルがそれぞれのアウトラインシェーダーバリアントに自動的に切り替わります。

アウトラインマテリアルの準備ができたので、通常通りSkeletonRenderer および SkeletonGraphicコンポーネントに割り当てることができます。

• SkeletonRendererについて、これはSkeletonRenderer.CustomMaterialOverrideを介して、またはSkeletonRendererCustomMaterialsコンポーネントを追加することで実行できます。
• SkeletonGraphicでは、SkeletonGraphic.material プロパティを直接設定できます。

スケルトンの上にマウスを置いたときに表示されるアウトラインの例をご覧になりたい場合は、このブログ投稿の最後にあるアウトラインシェーダーのシーン例セクションで説明されているシーン例をご覧ください。

メッシュとテクスチャアトラスの要件

アウトラインシェーダーがどのように動作しているか - 近辺のサンプリング

通常、 RegionAttachmentまたはMeshAttachment内の透明ピクセルは、フレームバッファーに寄与しません。アウトラインシェーダーでは、各透明ピクセルが、特定の距離でその近辺に不透明ピクセルがあるかどうかをテストします。ある場合、アウトラインの色が描画されます。

注意: 正しい描画順序を維持するには、影響を受けるスケルトンの追加のレンダリングパスが必要です。

イメージとテクスチャアトラス - パディングまたは余白を追加する

アタッチメントの境界にアウトラインカラーを表示した際に上のように表示されている場合、ほとんどの場合そのアウトラインに近いアトラス画像の領域がメッシュにより伸びてしまっています。

アトラスのエクスポート設定によりパディングを追加して、隣接するアウトラインに十分なスペースを残すことができます。また、パディングを増やす代わりに、空白の除去を無効にすることを検討するのも良いでしょう。

または、この問題が発生しなくなるまでアウトラインの幅を減らすという手もあります。

メッシュアタッチメント - アウトラインを途切れさせないようにスペースを空ける

このアウトラインはメッシュの境界内にのみ描画できます。もしあなたが上のように輪郭の一部が切れてしまっているイメージを見かけた場合、メッシュの境界線が画像の不透明なピクセルの周りをあまりにもタイトに囲んでしまっている状態になっている可能性があります。

この問題を解決するには、メッシュ頂点を外側に移動させて十分なスペース(下の緑色で表示)を確保します。画像の境界に余白を追加する必要もあるかもしれません。

または、この問題が発生しなくなるまでアウトラインの幅を減らすという手もあります。

アウトラインシェーダーのシーン例

現在spine-unityランタイムのパッケージに追加のシーン例Spine Examples/Other Examples/Outline Shadersを入れてあります。このシーンはマウスオーバーした際のアウトラインマテリアルの切り替えを行う方法を示しています。このサンプルシーンでは[UnityのEvent System]の[Event Trigger]コンポーネンツを使用してマウスポインターの入力イベントと終了イベントに反応します。

結論

これらspine-unityランタイムへの追加により色付きのアウトラインをスケルトンに簡単に追加できます。どうぞ遠慮なくSpineフォーラムであなたの考えや作品を共有してください！