{"id":17307,"date":"2018-08-27T18:15:33","date_gmt":"2018-08-27T09:15:33","guid":{"rendered":"https:\/\/cg-method.com\/?p=17307"},"modified":"2026-01-04T20:48:10","modified_gmt":"2026-01-04T11:48:10","slug":"unity-ui-shader","status":"publish","type":"post","link":"https:\/\/cg-method.com\/unity\/unity-ui-shader\/","title":{"rendered":"Unity\u2502UI\u5236\u4f5c\u306b\u5f79\u306b\u7acb\u3064\u30b7\u30a7\u30fc\u30c0\u30fc6\u9078\u2502uGUI"},"content":{"rendered":"\n

Unity\u306eUI\u5236\u4f5c\u3067\u4f7f\u3048\u308b\u30b7\u30a7\u30fc\u30c0\u30fc\u3092\u307e\u3068\u3081\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\u30bf\u30c3\u30c1\u6642\u306e\u660e\u308b\u3055\u5909\u66f4\u3084Disable\u8868\u73fe\u306a\u3069\u3001\u5b9f\u7528\u7684\u306a\u30b7\u30a7\u30fc\u30c0\u30fc\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u30b9\u30d7\u30e9\u30a4\u30c8\u3092\u660e\u308b\u304f\u3057\u305f\u308a\u6697\u304f\u3057\u305f\u308a\u3059\u308b\u30b7\u30a7\u30fc\u30c0\u30fc<\/h2>\n\n\n\n

UI\u3092\u30bf\u30c3\u30c1\u3057\u305f\u6642\u306b\u660e\u308b\u304f\u3059\u308b\u306a\u3069\u306e\u8868\u73fe\u3067\u4f7f\u3048\u307e\u3059\u3002<\/p>\n\n\n\n

\u624b\u9806<\/h3>\n\n\n\n
    \n
  1. Unity\u306e\u30d3\u30eb\u30c8\u30a4\u30f3\u30b7\u30a7\u30fc\u30c0\u30fc\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/li>\n\n\n\n
  2. Sprites-Default.shader\u3092\u63a2\u3057\u3066Unity\u3078\u30b3\u30d4\u30fc<\/li>\n\n\n\n
  3. \u30b7\u30a7\u30fc\u30c0\u30fc\u540d\u3092\u5909\u66f4<\/li>\n\n\n\n
  4. \u30b3\u30fc\u30c9\u3092\u4fee\u6b63<\/li>\n<\/ol>\n\n\n\n

    \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\uff1ahttps:\/\/unity3d.com\/jp\/get-unity\/download\/archive<\/a><\/p>\n\n\n\n

    \u30b7\u30a7\u30fc\u30c0\u30fc\u540d\u306e\u5909\u66f4\uff1a<\/p>\n\n\n\n

    \/\/ \u5909\u66f4\u524d\nShader "Sprites\/Default"\n\/\/ \u5909\u66f4\u5f8c\nShader "Sprites\/Default_Custom"<\/code><\/pre><\/div>\n\n\n\n
    \u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u30b7\u30a7\u30fc\u30c0\u30fc\u306e\u4fee\u6b63\uff1a<\/p>\n\n\n\n
    fixed4 frag(v2f IN) : SV_Target\n{\n    fixed4 c = SampleSpriteTexture(IN.texcoord) * IN.color;\n    c.rgb = c.rgb * 2 + max(fixed3(0,0,0), IN.color.rgb - 0.5) * 2;\n    c.rgb *= c.a;\n    return c;\n}<\/code><\/pre><\/div>\n\n\n\n
    \"\u30de\u30c6\u30ea\u30a2\u30eb\u306e\u8a2d\u5b9a\"<\/figure>\n\n\n\n
    uGUI\u306eImage\u306b\u30de\u30c6\u30ea\u30a2\u30eb\u3092\u30a2\u30b5\u30a4\u30f3\u3057\u307e\u3059\u3002\u4e2d\u9593\u306e\u30b0\u30ec\u30fc\uff08RGB 128\uff09\u304c\u30c7\u30d5\u30a9\u30eb\u30c8\u72b6\u614b\u3067\u3059\u3002<\/p>\n\n\n\n
    \"\u660e\u308b\u3055\u5909\u66f4\u306e\u30c6\u30b9\u30c8\"<\/figure>\n\n\n\n
    \u53c2\u8003\uff1ahttps:\/\/qiita.com\/mache\/items\/fa664d5605ee057a80ce<\/a><\/p>\n\n\n\n
    \u30b0\u30ec\u30fc\u30b9\u30b1\u30fc\u30eb\uff08\u767d\u9ed2\uff09\u306b\u3059\u308b\u30b7\u30a7\u30fc\u30c0\u30fc<\/h2>\n\n\n\n
    \u30bf\u30c3\u30d7\u3057\u3066\u3082\u6a5f\u80fd\u3057\u306a\u3044\u5834\u6240\u3092Disable\u8868\u793a\u3059\u308b\u3068\u304d\u306b\u4fbf\u5229\u3067\u3059\u3002<\/p>\n\n\n\n
    \u624b\u9806<\/h3>\n\n\n\n
      \n
    1. \u4e0b\u8a18\u30b5\u30a4\u30c8\u304b\u3089\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc\u3057\u3066\u30b7\u30a7\u30fc\u30c0\u30fc\u3092\u4f5c\u6210\uff08Grayscale.shader\uff09<\/li>\n\n\n\n
    2. \u30de\u30c6\u30ea\u30a2\u30eb\u3092\u4f5c\u6210\u3057\u3066\u30b7\u30a7\u30fc\u30c0\u30fc\u3092\u30a2\u30b5\u30a4\u30f3\uff08Grayscale.mat\uff09<\/li>\n\n\n\n
    3. \u30b0\u30ec\u30fc\u30b9\u30b1\u30fc\u30eb\u306b\u3057\u305f\u3044Image\u306eMaterial\u306b\u30a2\u30b5\u30a4\u30f3<\/li>\n<\/ol>\n\n\n\n
      \u53c2\u8003\uff1ahttps:\/\/d.hatena.ne.jp\/nakamura001\/20140421\/1398083771<\/a><\/p>\n\n\n\n
      \"\u30b0\u30ec\u30fc\u30b9\u30b1\u30fc\u30eb\u30de\u30c6\u30ea\u30a2\u30eb\"<\/figure>\n\n\n\n
      \"\u30b0\u30ec\u30fc\u30b9\u30b1\u30fc\u30eb\u306e\u7d50\u679c\"<\/figure>\n\n\n\n
      \u5358\u8272\u30d9\u30bf\u5857\u308a\u3059\u308b\u30b7\u30a7\u30fc\u30c0\u30fc<\/h2>\n\n\n\n
      \u30b7\u30eb\u30a8\u30c3\u30c8\u8868\u73fe\u3084\u30d5\u30e9\u30c3\u30c8\u30c7\u30b6\u30a4\u30f3\u3067\u8272\u3092\u4ed8\u3051\u308b\u3068\u304d\u306b\u4fbf\u5229\u3067\u3059\u3002<\/p>\n\n\n\n
      \u624b\u9806<\/h3>\n\n\n\n
        \n
      1. \u4e0b\u8a18URL\u304b\u3089\u30d9\u30fc\u30b9\u3068\u306a\u308b\u30b7\u30a7\u30fc\u30c0\u30fc\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/li>\n\n\n\n
      2. \u30b3\u30fc\u30c9\u30926\u7b87\u6240\u4fee\u6b63<\/li>\n\n\n\n
      3. \u30de\u30c6\u30ea\u30a2\u30eb\u3092\u4f5c\u6210\u3057\u3066\u30a2\u30b5\u30a4\u30f3<\/li>\n<\/ol>\n\n\n\n
        \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\uff1ahttps:\/\/github.com\/mike-neko\/SpriteShaderSample\/blob\/master\/Assets\/Shaders\/SpriteBetaMask.shader<\/a><\/p>\n\n\n\n
        \u4fee\u6b63\u7b87\u6240\uff08\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\u307e\u305f\u306f\u5909\u66f4\uff09\uff1a<\/p>\n\n\n\n
        \/\/[MaterialToggle] _MaskOn ("Mask On", Float) = 0\n\/\/_Color ("Tint", Color) = (1,1,1,1)\n\/\/[MaterialToggle] PixelSnap ("Pixel snap", Float) = 0\n\/\/fixed4 _Color;\nOUT.color = IN.color; \/\/* _Color;\nfixed4 m = lerp(c, _MaskColor, 1);<\/code><\/pre><\/div>\n\n\n\n
        \"\u30b5\u30f3\u30d7\u30eb\u753b\u50cf\"<\/figure>\n\n\n\n
        \"\u5358\u8272\u30d9\u30bf\u5857\u308a\u306e\u7d50\u679c\"<\/figure>\n\n\n\n
        \u8272\u76f8\u3092\u5909\u66f4\u3059\u308b\u30b7\u30a7\u30fc\u30c0\u30fc<\/h2>\n\n\n\n
        Image\u306eColor\u306f\u52a0\u7b97\u8a08\u7b97\u306e\u305f\u3081\u8272\u76f8\u5909\u66f4\u304c\u3067\u304d\u307e\u305b\u3093\u3002\u3053\u306e\u30b7\u30a7\u30fc\u30c0\u30fc\u3092\u4f7f\u3048\u3070UI\u30d1\u30fc\u30c4\u306e\u8272\u76f8\u3092\u5909\u66f4\u3067\u304d\u3001\u30d1\u30fc\u30c4\u6570\u3092\u6e1b\u3089\u305b\u308b\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
        \u624b\u9806<\/h3>\n\n\n\n
          \n
        1. \u4e0b\u8a18\u304b\u3089HsvUI.shader\u3068UIHue.cs\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/li>\n\n\n\n
        2. Unity\u306eAssets\u3078\u914d\u7f6e<\/li>\n\n\n\n
        3. Image\u306bUIHue.cs\u3092\u30a2\u30bf\u30c3\u30c1\uff08\u81ea\u52d5\u3067\u30de\u30c6\u30ea\u30a2\u30eb\u3082\u30a2\u30b5\u30a4\u30f3\u3055\u308c\u308b\uff09<\/li>\n\n\n\n
        4. \u30b9\u30e9\u30a4\u30c0\u30fc\u3067\u5024\u3092\u8abf\u6574<\/li>\n\n\n\n
        5. \u5024\u304c\u6c7a\u307e\u3063\u305f\u3089\u30b9\u30af\u30ea\u30d7\u30c8\u3092Remove\uff08\u8ca0\u8377\u8efd\u6e1b\u306e\u305f\u3081\uff09<\/li>\n<\/ol>\n\n\n\n
          \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\uff1ahttps:\/\/qiita.com\/Teach\/items\/52883127033885a95e82<\/a><\/p>\n\n\n\n
          \"\u8272\u76f8\u5909\u66f4\u30b7\u30a7\u30fc\u30c0\u30fc\u306e\u8a2d\u5b9a\"<\/figure>\n\n\n\n
          \"\u8272\u76f8\u5909\u66f4\u306e\u7d50\u679c\"<\/figure>\n\n\n\n
          \u753b\u50cf\u3092\u30bf\u30a4\u30ea\u30f3\u30b0\u3057\u3066\u30de\u30b9\u30af\u3067\u533a\u5207\u308b\u30b7\u30a7\u30fc\u30c0\u30fc<\/h2>\n\n\n\n
          \u659c\u7dda\u306e\u5f71\u306a\u3069\u3001\u30d1\u30bf\u30fc\u30f3\u3092\u30bf\u30a4\u30ea\u30f3\u30b0\u3057\u3066\u30de\u30b9\u30af\u3067\u5f62\u3092\u6574\u3048\u308b\u8868\u73fe\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
          \u624b\u9806<\/h3>\n\n\n\n
            \n
          1. \u30dc\u30fc\u30c0\u30fc\u306e\u30c6\u30af\u30b9\u30c1\u30e3\u3092\u4f5c\u6210\uff08\u6b63\u65b9\u5f62\u306b\u5341\u5b57\u306e\u30ac\u30a4\u30c9\u3092\u4f5c\u6210\u3057\u3001\u7aef\u306e\u30dd\u30a4\u30f3\u30c8\u306b\u30d1\u30b9\u3092\u6253\u3064\uff09<\/li>\n\n\n\n
          2. \u30bf\u30a4\u30ea\u30f3\u30b0\u30b7\u30a7\u30fc\u30c0\u30fc\u3092\u7528\u610f<\/li>\n\n\n\n
          3. \u30de\u30c6\u30ea\u30a2\u30eb\u3092\u4f5c\u6210\u3057\u3001UI\/TextureMask\u3092\u9078\u629e<\/li>\n\n\n\n
          4. \u30dc\u30fc\u30c0\u30fc\u3068\u30de\u30b9\u30af\u306e\u30c6\u30af\u30b9\u30c1\u30e3\u3092\u30a2\u30b5\u30a4\u30f3<\/li>\n\n\n\n
          5. Tiling\u306e\u5024\u3092\u8abf\u6574<\/li>\n<\/ol>\n\n\n\n
            \"\u30dc\u30fc\u30c0\u30fc\u30c6\u30af\u30b9\u30c1\u30e3\u306e\u4f5c\u6210\"<\/figure>\n\n\n\n
            \u203b\u30bf\u30a4\u30ea\u30f3\u30b0\u3059\u308b\u753b\u50cf\u306eTexture Type\u306f\u300cDefault\u300d\u306b\u8a2d\u5b9a<\/p>\n\n\n\n
            \u203b\u30de\u30b9\u30af\u53cd\u8ee2\u3057\u305f\u3044\u5834\u5408\uff1ac.a *= opacity;<\/code>\u3092c.a *= 1-opacity;<\/code>\u306b\u5909\u66f4<\/p>\n\n\n\n
            \"\u30de\u30c6\u30ea\u30a2\u30eb\u306e\u8a2d\u5b9a\"<\/figure>\n\n\n\n
            \"\u30bf\u30a4\u30ea\u30f3\u30b0\u306e\u7d50\u679c\"<\/figure>\n\n\n\n
            \u30d6\u30e9\u30fc\u3092\u304b\u3051\u308b\u30b7\u30a7\u30fc\u30c0\u30fc<\/h2>\n\n\n\n
            \u753b\u50cf\u3092\u307c\u304b\u3059\u30b7\u30a7\u30fc\u30c0\u30fc\u3067\u3059\u3002\u30ab\u30e1\u30e9\u306b\u30a2\u30bf\u30c3\u30c1\u3059\u308bImage Effect\u4ee5\u5916\u306e\u65b9\u6cd5\u3067\u3001\u80cc\u666f\u753b\u50cf\u3092\u307c\u304b\u3059\u8868\u73fe\u306a\u3069\u306b\u4f7f\u3048\u307e\u3059\u3002<\/p>\n\n\n\n
            \"\u30d6\u30e9\u30fc\u306e\u7d50\u679c\"<\/figure>\n\n\n\n
            \u30de\u30c6\u30ea\u30a2\u30eb\u3092\u4f5c\u6210\u3057\u3066\u30a2\u30b5\u30a4\u30f3\u3057\u3001Distance\u306e\u5024\u3067\u30dc\u30b1\u5177\u5408\u3092\u8abf\u6574\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
            Shader "Unlit\/Transparent Colored Blurred"\n{\n    Properties\n    {\n        _MainTex ("Base (RGB), Alpha (A)", 2D) = "white" {}\n        _Distance ("Distance", Float) = 0.015\n    }\nSubShader\n{\n    LOD 100\n    Tags\n    {\n        "Queue" = "Transparent"\n        "IgnoreProjector" = "True"\n        "RenderType" = "Transparent"\n    }\n\n    Cull Off\n    Lighting Off\n    ZWrite Off\n    Fog { Mode Off }\n    Offset -1, -1\n    Blend SrcAlpha OneMinusSrcAlpha\n\n    Pass\n    {\n        CGPROGRAM\n        #pragma vertex vertexProgram\n        #pragma fragment fragmentProgram\n        #include "UnityCG.cginc"\n\n        struct appdata_t\n        {\n            float4 vertex : POSITION;\n            float2 textureCoordinate : TEXCOORD0;\n            fixed4 color : COLOR;\n        };\n\n        struct vertexToFragment\n        {\n            float4 vertex : SV_POSITION;\n            half2 textureCoordinate : TEXCOORD0;\n            fixed4 color : COLOR;\n        };\n\n        sampler2D _MainTex;\n        float4 _MainTex_ST;\n        float _Distance;\n\n        vertexToFragment vertexProgram(appdata_t vertexData)\n        {\n            vertexToFragment output;\n            output.vertex = UnityObjectToClipPos(vertexData.vertex);\n            output.textureCoordinate = TRANSFORM_TEX(vertexData.textureCoordinate, _MainTex);\n            output.color = vertexData.color;\n            return output;\n        }\n\n        fixed4 fragmentProgram(vertexToFragment input) : COLOR\n        {\n            float distance = _Distance;\n            fixed4 computedColor = tex2D(_MainTex, input.textureCoordinate) * input.color;\n            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance, input.textureCoordinate.y + distance)) * input.color;\n            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance, input.textureCoordinate.y)) * input.color;\n            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x, input.textureCoordinate.y + distance)) * input.color;\n            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance, input.textureCoordinate.y - distance)) * input.color;\n            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x + distance, input.textureCoordinate.y - distance)) * input.color;\n            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance, input.textureCoordinate.y + distance)) * input.color;\n            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x - distance, input.textureCoordinate.y)) * input.color;\n            computedColor += tex2D(_MainTex, half2(input.textureCoordinate.x, input.textureCoordinate.y - distance)) * input.color;\n            computedColor = computedColor \/ 9;\n            return computedColor;\n        }\n        ENDCG\n    }\n}\n}<\/code><\/pre><\/div>\n\n\n\n
            \u307e\u3068\u3081<\/h2>\n\n\n\n
              \n
            • \u660e\u308b\u3055\u5909\u66f4\u30b7\u30a7\u30fc\u30c0\u30fc\uff1a\u30bf\u30c3\u30c1\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u306b\u4f7f\u3048\u308b<\/li>\n\n\n\n
            • \u30b0\u30ec\u30fc\u30b9\u30b1\u30fc\u30eb\u30b7\u30a7\u30fc\u30c0\u30fc\uff1aDisable\u8868\u73fe\u306b\u6700\u9069<\/li>\n\n\n\n
            • \u5358\u8272\u30d9\u30bf\u5857\u308a\u30b7\u30a7\u30fc\u30c0\u30fc\uff1a\u30b7\u30eb\u30a8\u30c3\u30c8\u3084\u30d5\u30e9\u30c3\u30c8\u30c7\u30b6\u30a4\u30f3\u306b<\/li>\n\n\n\n
            • \u8272\u76f8\u5909\u66f4\u30b7\u30a7\u30fc\u30c0\u30fc\uff1a\u30d1\u30fc\u30c4\u306e\u30d0\u30ea\u30a8\u30fc\u30b7\u30e7\u30f3\u4f5c\u6210\u306b\u4fbf\u5229<\/li>\n\n\n\n
            • \u30bf\u30a4\u30ea\u30f3\u30b0\uff0b\u30de\u30b9\u30af\u30b7\u30a7\u30fc\u30c0\u30fc\uff1a\u30d1\u30bf\u30fc\u30f3\u80cc\u666f\u306e\u8868\u73fe\u306b<\/li>\n\n\n\n
            • \u30d6\u30e9\u30fc\u30b7\u30a7\u30fc\u30c0\u30fc\uff1a\u80cc\u666f\u307c\u304b\u3057\u306a\u3069\u306e\u6f14\u51fa\u306b<\/li>\n<\/ul>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
              Unity\u306eUI\u5236\u4f5c\u3067\u4f7f\u3048\u308b\u30b7\u30a7\u30fc\u30c0\u30fc\u3092\u307e\u3068\u3081\u307e\u3057\u305f\u3002 \u30bf\u30c3\u30c1\u6642\u306e\u660e\u308b\u3055\u5909\u66f4\u3084Disable\u8868\u73fe\u306a\u3069\u3001\u5b9f\u7528\u7684\u306a\u30b7\u30a7\u30fc\u30c0\u30fc\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002 \u30b9\u30d7\u30e9\u30a4\u30c8\u3092\u660e\u308b\u304f\u3057\u305f\u308a\u6697\u304f\u3057\u305f\u308a\u3059\u308b\u30b7\u30a7\u30fc\u30c0\u30fc UI\u3092\u30bf\u30c3\u30c1\u3057\u305f\u6642\u306b\u660e\u308b\u304f\u3059\u308b\u306a\u3069 […]<\/p>\n","protected":false},"author":1,"featured_media":21692,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","footnotes":""},"categories":[20],"tags":[],"class_list":["post-17307","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"_links":{"self":[{"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/posts\/17307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/comments?post=17307"}],"version-history":[{"count":3,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/posts\/17307\/revisions"}],"predecessor-version":[{"id":21643,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/posts\/17307\/revisions\/21643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/media\/21692"}],"wp:attachment":[{"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/media?parent=17307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/categories?post=17307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/tags?post=17307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}