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フォーラムであなたの考えや作品を共有してください!