自作をしたShaderをNGUIで利用する時には色々注意点があります。 NGUI側で行っている特別な処理にShaderを対応をさせる必要があるのですが、Webを見てもなかなか思ったような情報が載っていなくて困りました。 今回は、このNGUIとCustomShaderについてブログに書いていきたいと思います。
【Unity】NGUIのマスク処理をCustomShaderで行う
特に特別な処理をしない場合、そのままCustomShadeを使っても問題ありませんでしたが、特別の処理を自作Shaderをつかって行うと思ったような挙動になりませんでした。
SortClip
マスク処理に使うの時にUIPanelの「sortClip」を使ったのですが、自作Shaderを使うと上手く動きませんでした。
どうも、UIPanel配下のShaderがNGUI側で書き換わっているようです。
解決策は、別途Shaderを用意してあげることです。 NGUIのShaderをよく見てみると、そのヒントがありました。
使いたいShaderをコピーをして 後ろに「１」をつければ良いのです。 これで自作Shaderを動かすことができます。
マスク処理
Shaderは無事動くようになったのですが、それだけでは駄目です。 このままだとマスク処理が動きません。こちらに関してはShaderにマスク用の記述を書き加えないといけません。
[c] // 追加プロパティ 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); [/c]
詳しくは「 Unlit/Transparent Colored 1」を参考にしていただきたいのですが、頂点とフラグメントに記述を加えます。 処理は簡単でアルファをSortClipで設定してるマスクに合わせて調整をしています。
こちらの記述を追加してあげると上手くマスク処理が行われます。
複数のSortClipへの対応
単一のUIPanel(SortClip）だけですと、１つShaderを追加するだけでよいのですが、SortClipの処理が重なる場合は、別途Shaderを用意する必要があります。 同じように、Shaderの後ろに「２、３」とつけて上げ、Shaderに記述を追加するだけです。記述に関しては「 Unlit/Transparent Colored 2」「 Unlit/Transparent Colored 3」を参考に書けば大丈夫だと思います。
最後に
NGUIに関しては、実は色々と制約があるので、色々と調整をして上げる必要があります。 今回初めて自作Shaderを作ったのですが、Shaderを作ることよりも、実際表示させるための実装もけっこう大変だと感じました。 | UnityではじめるC# 基礎編 大槻有一郎,いたのくまんぼう エムディエヌコーポレーション（MdN） 売り上げランキング : 19070 Amazonで詳しく見る |
