【Unity】NGUIのマスク処理をCustomShaderに適応させる

  • |
【Unity】NGUIのマスク処理をCustomShaderに適応させる
   

自作をしたShaderをNGUIで利用する時には色々注意点があります。
NGUI側で行っている特別な処理にShaderを対応をさせる必要があるのですが、Webを見てもなかなか思ったような情報が載っていなくて困りました。
今回は、このNGUIとCustomShaderについてブログに書いていきたいと思います。

【Unity】NGUIのマスク処理をCustomShaderで行う

特に特別な処理をしない場合、そのままCustomShadeを使っても問題ありませんでしたが、特別の処理を自作Shaderをつかって行うと思ったような挙動になりませんでした。

SortClip

マスク処理に使うの時にUIPanelの「sortClip」を使ったのですが、自作Shaderを使うと上手く動きませんでした。
どうも、UIPanel配下のShaderがNGUI側で書き換わっているようです。
2017-8-1

解決策は、別途Shaderを用意してあげることです。
NGUIのShaderをよく見てみると、そのヒントがありました。
2017 8 1 01

使いたいShaderをコピーをして 後ろに「1」をつければ良いのです。
これで自作Shaderを動かすことができます。

マスク処理

Shaderは無事動くようになったのですが、それだけでは駄目です。
このままだとマスク処理が動きません。

こちらに関してはShaderにマスク用の記述を書き加えないといけません。

// 追加プロパティ
float4 _ClipRange0 = float4(0.0, 0.0, 1.0, 1.0);
float2 _ClipArgs0 = float2(1000.0, 1000.0);

// 頂点シェーダー
o.worldPos = v.vertex.xy * _ClipRange0.zw + _ClipRange0.xy;

// フラグメントシェーダー
float2 factor = (float2(1.0, 1.0) - abs(IN.worldPos)) * _ClipArgs0;
half4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
col.a *= clamp( min(factor.x, factor.y), 0.0, 1.0);

詳しくは「 Unlit/Transparent Colored 1」を参考にしていただきたいのですが、頂点とフラグメントに記述を加えます。
処理は簡単でアルファをSortClipで設定してるマスクに合わせて調整をしています。

こちらの記述を追加してあげると上手くマスク処理が行われます。

複数のSortClipへの対応

単一のUIPanel(SortClip)だけですと、1つShaderを追加するだけでよいのですが、SortClipの処理が重なる場合は、別途Shaderを用意する必要があります。
同じように、Shaderの後ろに「2、3」とつけて上げ、Shaderに記述を追加するだけです。

記述に関しては「 Unlit/Transparent Colored 2」「 Unlit/Transparent Colored 3」を参考に書けば大丈夫だと思います。

最後に

NGUIに関しては、実は色々と制約があるので、色々と調整をして上げる必要があります。
今回初めて自作Shaderを作ったのですが、Shaderを作ることよりも、実際表示させるための実装もけっこう大変だと感じました。

UnityではじめるC# 基礎編UnityではじめるC# 基礎編
大槻有一郎,いたのくまんぼう

エムディエヌコーポレーション(MdN)
売り上げランキング : 19070

Amazonで詳しく見る

Related Posts Plugin for WordPress, Blogger...