【uGUI用シェーダー】Deco-UI【Unity】

Deco-UIは簡単にゲームUIをモダンに盛れるUnity用のシェーダーです。シェーダーを適用するだけでボタンにパターンやアウトライン、アニメーションを付与することが出来ます。

詳細は以下のドキュメントを参考にしてください

https://docs.google.com/document/d/1zSJ7eDWiwYAeFNipvTWnms7DWq9ZWWBR504dZ-0RTuM/edit?usp=sharing

こんな人におすすめ！

・雑にUIの情報量を増やしたい

・フラットなUIでゲームを作っている

・ポップ/フューチャー/カワイイなテイストのコンテンツを作っている

Contents

Deco-UI

┣Shaders…シェーダーが入っているフォルダです

┣sample…サンプルシーンです

┣Textures…テクスチャの入ったフォルダです

┗Materials…サンプルマテリアルが入ったフォルダです

Usage

セットアップ

1. マテリアルを作成して、シェーダーを「UI/deco-UI」に設定

2. シェーダーの各種パラメータを設定

3. SpriteかuGUIのImageを作成

4. 好きなテクスチャをUIに設定し、諸々の設定をする

5. materialの部分に作成したマテリアルを設定

シェーダー・パラメータ

_IsSubColor…サブカラーを利用するかどうか

┣_SubColor…UIのサブカラーです(サブカラーを利用する場合のみ適用)

┃（以下の設定は自動的にサブカラーを決定する際のパラメータ）

┣_ContrastWeight…コントラストの変化量（大きいと暗くなる）

┗_ColorWeight…色相環での変化量（大きいほどHSVのHが変化する）

_Pattern…背景の模様

┣Stripe…ストライプ（縞模様）

┣Dot…水玉模様

┣Square…四角形

┣Diamond…ダイアモンド模様

┗None…特に模様無し　一色

_PatternSize…パターンの大きさです（大きいほど程細かく繰り返し構造が出ます）

_PatternRotate…パターンの回転

_PatternMoveDir…パターンの進行方向

_EdgeWidth…縁の太さです

_EdgeShining…縁にキラキラを与えることができます（注目させたいボタンなどに）

_ShiningSpeed…キラキラの回転速度です

その他のPropertiesは隠してあります。必要なら表示してください。

FAQ・上手く使うコツ

アウトラインが横に広がってしまう

　アウトラインはSpriteの縦横比が元画像の縦横比が等しい時に適切な大きさになった際に適切に表示されます。Spriteのサイズを適切に設定するか、SpriteEditorで適切なBorderを設定した上でImageのImageTypeをSlicedにしてください。

パターンのグラフィックがおかしい

　パターンのグラフィックがおかしい時は、ImageのTexCoordが飛び飛びに可能性があります。例えばImageTypeがSlicedのテクスチャについて、イメージのサイズが元のテクスチャよりも大きいとこのような状況が発生します（その場合テクスチャは一部がトリミングされる）。元のテクスチャの大きさを十分小さくするか、UIのサイズを十分大きくしましょう。

アウトラインが上手く出ない

あるピクセルがエッジかどうかを検出するのに周辺ピクセルの透明度を取得しています。UIの元となるテクスチャが、画像のキャンバスいっぱいに描画されているような場合は、周辺ピクセルが上手く取得出来ずにアウトラインの描画に失敗する場合があります。UIを画像のキャンバスいっぱいに書き込むのでは無く、ある程度マージンを持たせると上手くエッジが検出できます。

その他

不明な点などがあれば避雷(@lucknknock)などに気軽に連絡ください。

規約

許可事項

・改変とか

・Unity内での使用

・Unityでのビルド

・VRCのワールドに含める

・まぁ常識の範囲なら基本何やってもよいよ

禁止事項

・シェーダー、テクスチャそのものの2次配布

・迷惑行為等

著作権は製作者(避雷(@lucknknock))に帰属します。詳しいことはTwitterのDMなりでお問合せ下さい。