タップできるもくじ
CGブロガー
すいみん
Suimin
某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。
書籍：Unity デザイナーズ・バイブル
プロフィール詳細はこちら
UI制作に役に立つシェーダーまとめ
UnityのUI表現で使ったシェーダー記事をまとめました。
スプライトをシェーダーで明るくしたり暗くしたりする方法
昔使っていたスプライトをシェーダーで明るくしたり暗くしたりするシェーダー。
そもそも中身を知らないまま使っていたので、調べてみました。
※UIをタッチした時明るくするなどで使えます。
Sprites-Default.shaderを探し、Unityへコピー
`Shader “Sprites/Default”` → `Shader “Sprites/Default_Custom”`
fixed4 frag(v2f IN) : SV_Target
{
fixed4 c = SampleSpriteTexture (IN.texcoord) * IN.color;
c.rgb *= c.a;
return c;
}から下記のコードに変更
fixed4 frag(v2f IN) : SV_Target
{
fixed4 c = SampleSpriteTexture (IN.texcoord) * IN.color;
c.rgb = c.rgb*2+max(fixed3(0,0,0),IN.color.rgb-0.5)*2;
c.rgb *= c.a;
return c;
}
uGUIのImageを作成し、Materialに先程のシェーダーをつけたマテリアルをアサイン
中間のグレー(rgb128)の状態でデフォルトの状態となっています。
グレースケール（白黒）にするシェーダー
グレースケールするシェーダーの紹介です！
UIでタップしても機能しない場所はDisableにすると思いますが、その表現で役に立つと思います。
グレースケールするシェーダーのやり方
マテリアルを新規で作成して、Shaderを上記のものにアサイン（Grayscale.mat）
あとはグレースケールしたいImageのMaterialにGrayscale.matをアサインすればOK
単色ベタ塗りするシェーダー
単純に単色のシルエットにしたい時のシェーダー
またはフラットデザインなどで色を付けるときに便利そうです。
ベタ塗りする色だけ設定できるようにコードの6箇所を修正します。
//[MaterialToggle] _MaskOn ("Mask On", Float) = 0
//_Color ("Tint", Color) = (1,1,1,1)
//[MaterialToggle] PixelSnap ("Pixel snap", Float) = 0
//fixed4 _Color;
OUT.color = IN.color; //* _Color;
fixed4 m = lerp(c, _MaskColor, 1);
適当に画像を用意します。
マテリアルを作成、アサイン後、単色になりました！
色相を変更するシェーダー
Imageで色相変えたいと思いスクリプトを探したのですができなさそう（Colorは加算する計算）なので、色相を変更するシェーダーを探してみました。
色々試したのですが、数値入力よりスライダーで調整するタイプにしました。
うまく使いこなせばUIのパーツ数が減らせるかもしれません。
色相を変更するシェーダー
Unityを起動してAssetsへ。
ImageにUIHue.csをアタッチすれば、自動でマテリアルもアサインされます。
スライダーで値を調整。値が決まったらスクリプトをRemoveします（重そうなので）
画像を繰り返して(タイリング)マスクで区切るシェーダー
某ゲームの影に斜線が入っているUIを見て、真似してみました。
描画付加的に良くないですが、タイリングしてマスクで区切るシェダーを作成して、UIの下にずらして敷いています。
テクスチャをリピートしてマスクで区切る方法
・正方形に十字のガイドを作成
・端のポイントにパスを打って、ボーダー作成
※`c.a *= opacity;`→`c.a *= 1-opacity;`にするとマスク反転
参考記事のタイトルとURLを入力してください・マテリアルを作成 UI/TextureMaskを選択
・ボーダー（タイリングする画像のTexture Typeは**Defalt**）とマスクのテクスチャをそれぞれ当てはめる
・Tilingの値をお好みで増やす
※マスク画像は四隅が角丸のものを入れています。
GameObject>UI>Imageを作成して、Materialに先程のマテリアルをアサイン
普通にボーダー影を画像化した場合。
最終的にはこんな感じです！
ブラーをかけるシェーダー
画像をぼかすシェーダーです。
カメラにアタッチするイメージエフェクト以外にもぼかす方法があります。
背景画像をぼかす等の表現で使えると思います。
- サンプルを用意
-
マテリアルを作成、アサイン後、Distanceの値でボケ具合が調整できます。
Shader "Unlit/Transparent Colored Blurred"
{
Properties
{
_MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}
_Distance ("Distance", Float) = 0.015
}
SubShader
{
LOD 100
Tags
{
"Queue" = "Transparent"
"IgnoreProjector" = "True"
"RenderType" = "Transparent"
}
Cull Off
Lighting Off
ZWrite Off
Fog { Mode Off }
Offset -1, -1
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
\#pragma vertex vertexProgram
\#pragma fragment fragmentProgram
\#include "UnityCG.cginc"
struct appdata_t
{
float4 vertex : POSITION;
float2 textureCoordinate : TEXCOORD0;
fixed4 color : COLOR;
};
struct vertexToFragment
{
float4 vertex : SV_POSITION;
half2 textureCoordinate : TEXCOORD0;
fixed4 color : COLOR;
};
sampler2D _MainTex;
float4 _MainTex_ST;
float _Distance;
vertexToFragment vertexProgram (appdata_t vertexData)
{
vertexToFragment output;
output.vertex = UnityObjectToClipPos(vertexData.vertex);
output.textureCoordinate = TRANSFORM_TEX(vertexData.textureCoordinate, _MainTex);
output.color = vertexData.color;
return output;
}
fixed4 fragmentProgram (vertexToFragment input) : COLOR
{
float distance = _Distance;
fixed4 computedColor = tex2D(_MainTex, input.textureCoordinate) * input.color;
computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance , input.textureCoordinate.y + distance )) * input.color;
computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance , input.textureCoordinate.y)) * input.color;
computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x , input.textureCoordinate.y + distance )) * input.color;
computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance , input.textureCoordinate.y - distance )) * input.color;
computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance , input.textureCoordinate.y - distance )) * input.color;
computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance , input.textureCoordinate.y + distance )) * input.color;
computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance , input.textureCoordinate.y)) * input.color;
computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x , input.textureCoordinate.y - distance )) * input.color;
computedColor = computedColor / 9;
return computedColor;
}
ENDCG
Unityに関する参考記事・ツール・書籍のまとめ
Unityに関する記事を下記にまとめました。
