CG・映像デザイナー技術ブログ

【Unity】UI制作に役に立つシェーダー6選[uGUI]

eyecatch-unity-ui-shader

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

UI制作に役に立つシェーダーまとめ

UnityのUI表現で使ったシェーダー記事をまとめました。

スプライトをシェーダーで明るくしたり暗くしたりする方法

昔使っていたスプライトをシェーダーで明るくしたり暗くしたりするシェーダー。
そもそも中身を知らないまま使っていたので、調べてみました。

※UIをタッチした時明るくするなどで使えます。

STEP.1
ビルトインシェーダーをダウンロード
STEP.2
シェーダーをコピー

Sprites-Default.shaderを探し、Unityへコピー

STEP.3
シェーダー名の変更

`Shader “Sprites/Default”` → `Shader “Sprites/Default_Custom”`

STEP.3
一箇所コードの追加
         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;
}

STEP.2
マテリアルのアサイン

uGUIのImageを作成し、Materialに先程のシェーダーをつけたマテリアルをアサイン

中間のグレー(rgb128)の状態でデフォルトの状態となっています。

グレースケール(白黒)にするシェーダー

グレースケールするシェーダーの紹介です!

UIでタップしても機能しない場所はDisableにすると思いますが、その表現で役に立つと思います。

グレースケールするシェーダーのやり方

STEP.1
シェーダーを作成

下記のサイトからコードをコピーしてシェーダーを作成(Grayscale.shader)

参考 >Sprite をグレースケールで描画するシェーダを作りました強火で進め
STEP.2
マテリアルにアサイン

マテリアルを新規で作成して、Shaderを上記のものにアサイン(Grayscale.mat)

STEP.3
イメージにアサイン

あとはグレースケールしたいImageのMaterialにGrayscale.matをアサインすればOK

単色ベタ塗りするシェーダー

単純に単色のシルエットにしたい時のシェーダー
またはフラットデザインなどで色を付けるときに便利そうです。

STEP.1
ダウンロード

下記のURLからベースとなるシェーダーをダウンロード

参考 SpriteBetaMask.shadergithub
STEP.2
コード修正

ベタ塗りする色だけ設定できるようにコードの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);
STEP.3
サンプル画像を用意

適当に画像を用意します。

STEP.4
マテリアルをアサイン

マテリアルを作成、アサイン後、単色になりました!

色相を変更するシェーダー

Imageで色相変えたいと思いスクリプトを探したのですができなさそう(Colorは加算する計算)なので、色相を変更するシェーダーを探してみました。

色々試したのですが、数値入力よりスライダーで調整するタイプにしました。

うまく使いこなせばUIのパーツ数が減らせるかもしれません。

色相を変更するシェーダー

STEP.1
ダウンロード

下記からHsvUI.shaderとUIHue.csをダウンロード

参考 画像の色相を変更するQiita
STEP.2
アサイン

Unityを起動してAssetsへ。

ImageにUIHue.csをアタッチすれば、自動でマテリアルもアサインされます。

STEP.2
調整

スライダーで値を調整。値が決まったらスクリプトをRemoveします(重そうなので)

画像を繰り返して(タイリング)マスクで区切るシェーダー

某ゲームの影に斜線が入っているUIを見て、真似してみました。

描画付加的に良くないですが、タイリングしてマスクで区切るシェダーを作成して、UIの下にずらして敷いています。

テクスチャをリピートしてマスクで区切る方法

STEP.1
ボーダーのテクスチャ作成

・正方形に十字のガイドを作成
・端のポイントにパスを打って、ボーダー作成

STEP.2
シェーダーの用意

※`c.a *= opacity;`→`c.a *= 1-opacity;`にするとマスク反転

参考記事のタイトルとURLを入力してください
STEP.3
マテリアルの作成

・マテリアルを作成 UI/TextureMaskを選択
・ボーダー(タイリングする画像のTexture Typeは**Defalt**)とマスクのテクスチャをそれぞれ当てはめる
・Tilingの値をお好みで増やす

※マスク画像は四隅が角丸のものを入れています。

STEP.4
マテリアルをアサイン

GameObject>UI>Imageを作成して、Materialに先程のマテリアルをアサイン

STEP.5
結果

普通にボーダー影を画像化した場合。

最終的にはこんな感じです!

ブラーをかけるシェーダー

画像をぼかすシェーダーです。
カメラにアタッチするイメージエフェクト以外にもぼかす方法があります。

背景画像をぼかす等の表現で使えると思います。

  1. サンプルを用意

  2. マテリアルを作成、アサイン後、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


assistant すいみん

アニメーション制作に関するシェーダーは下記の記事にまとめました!
eyecatch-unity-animation-shader 【Unity】アニメーション制作に役に立つシェーダー5選

以上、すいみん(@cg_method)でした!