uGUIのデフォルトシェーダーを編集して表裏があるカードを作ろう - デザイン開発誌 #4 -
こんにちは、下原です。
Beyond the filed では、画面上の各要素をuGUIで作成しています。
プレイヤーが操作するカードはイコールでUIでもあるので、uGUIでの作成になるのですが、そこで問題となるのがカードの裏面です。
カードゲームを作る上でuGUIの問題
TCGのカードは当然裏面は固定のデザイン、もしくはスリーブになっていますよね。
ですが、これをuGUIでやろうとすると↓のように表裏同じ表示になってしまいます。
これはuGUIのデフォルトシェーダーが両面を描画する設定になっているからです。uGUIのImageを作成するとマテリアルは空になっているのですが、実はデフォルトのビルドインシェーダーが割り当てられています。
このuGUIのデフォルトシェーダーが両面を描画する設定になっているため、表裏同じ表示がされるようになっています。
これをシェーダーを編集して、裏面は表示しない設定にします。
ビルドインシェーダーをDL
まずはUnityのダウンロードアーカイブから、使用しているバージョンのビルドインシェーダーをDLします。
UI-Defaultシェーダーを編集する

この中にある「UI-Default」シェーダーを編集します。このファイルをVisual Studioなどで開きます。
書き換えるのは実はたったの一行。
Cull off
ここを以下のように書き換えます。
Cull Back
Cullといのはカリングのことを指しており、「間引く」という意味があります。
Unityにおけるカリングというのは、「負荷を下げるために描画しない」設定になります。
シェーダーの中のCullはフェースの描画設定で、設定は以下の３つ。
- Cull Back（裏面非表示）
- Cull Front（表面非表示）
- Cull off（非表示にしない。両面表示）
フェースというのは3DCGの頂点・エッジ・フェースのフェースです。Unity上ではuGUIも3Dの描画と同じルールでできています。uGUIの画像は４つの頂点の板ポリでできています。
書き換えたらシェーダーを保存するのですが、そのままだとデフォルトシェーダーと同じ名前になってしまうため、シェーダーの一番最初に書かれている以下の行を、
Shader "UI/Default"
以下のようにリネームしておきます。
Shader "UI/Cull-Back"
カードに割り当てる
できたシェーダーをUnityプロジェクトに入れます。マテリアルを作成し、編集したシェーダーを割り当てます。このマテリアルを裏面表示したくないuGUIに割り当てます。
これで表裏のあるカードができました。
ちなみにTextMeshProのシェーダーもCull Backに変更しています。
