블로그 이미지
Every unexpected event is a path to learning for you. blueasa

카테고리

분류 전체보기 (2797)
Unity3D (853)
Programming (479)
Server (33)
Unreal (4)
Gamebryo (56)
Tip & Tech (185)
협업 (61)
3DS Max (3)
Game (12)
Utility (68)
Etc (98)
Link (32)
Portfolio (19)
Subject (90)
iOS,OSX (55)
Android (14)
Linux (5)
잉여 프로젝트 (2)
게임이야기 (3)
Memories (20)
Interest (38)
Thinking (38)
한글 (30)
PaperCraft (5)
Animation (408)
Wallpaper (2)
재테크 (18)
Exercise (3)
나만의 맛집 (3)
냥이 (10)
육아 (16)
Total
Today
Yesterday


Unlit - Transparent Colored GrayScale.zip




NGUI의 ScrollView 안에 있는 오브젝트의 UITexture에 GrayScale을 적용하려고 아래 [참고]의 쉐이더를 썼는데


제대로 안되길래 보니 Clipping 개수에 따른 추가 쉐이더가 없어서 겸사겸사 만들어서 올려 놓음.



[참고] http://blueasa.tistory.com/1807

반응형
Posted by blueasa
, |
NGUI가 기본적으로 Sprite의 회색처리와 Bright처리를 지원하지 않아서
그동안 회색 처리된 이미지와 Bright처리된 이미지를 별도로 사용하다가,
도저히 노가다와 용량문제로 안되겠어서 구글링의 도움으로 여러 글을 참고로 만들어봤습니다.
NGUI스크립트를 일부 수정하셔야합니다. 
 
대략 다음 순서입니다.
스텝1. 새로운 쉐이더를 추가합니다.
스텝2. 만들어진 Atlas의 Material의 쉐이더를 추가한 쉐이더로 바꿉니다.
스텝3. UIAtlas의 코드를 수정합니다.
스텝4. UISprite의 코드를 수정합니다.
 
스텝1. 새로운 쉐이더 추가
NGUI/Resources/Shaders에 적당한 이름으로 저장합니다.
001Shader "Unlit/Transparent Colored (Gray)"
002{
003    Properties
004    {
005        _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
006        _EffectAmount ("Effect Amount", Range (0, 1)) = 0.0
007        _Intensity ("Intencity", float) = 1.0
008    }
009     
010    SubShader
011    {
012        LOD 100
013 
014        Tags
015        {
016            "Queue" "Transparent"
017            "IgnoreProjector" "True"
018            "RenderType" "Transparent"
019        }
020         
021        Cull Off
022        Lighting Off
023        ZWrite Off
024        Fog { Mode Off }
025        Offset -1, -1
026        Blend SrcAlpha OneMinusSrcAlpha
027 
028        Pass
029        {
030            CGPROGRAM
031                #pragma vertex vert
032                #pragma fragment frag
033                 
034                #include "UnityCG.cginc"
035     
036                struct appdata_t
037                {
038                    float4 vertex : POSITION;
039                    float2 texcoord : TEXCOORD0;
040                    fixed4 color : COLOR;
041                };
042     
043                struct v2f
044                {
045                    float4 vertex : SV_POSITION;
046                    half2 texcoord : TEXCOORD0;
047                    fixed4 color : COLOR;
048                };
049     
050                sampler2D _MainTex;
051                float4 _MainTex_ST;
052                fixed _EffectAmount;
053                half _Intensity;
054 
055                v2f vert (appdata_t v)
056                {
057                    v2f o;
058                    o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
059                    o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
060                    o.color = v.color;
061                    return o;
062                }
063                 
064                fixed4 frag (v2f i) : COLOR
065                {
066                    fixed4 col = tex2D(_MainTex, i.texcoord) * i.color;
067                    col.rgb = lerp(col.rgb, dot(col.rgb, float3(0.3, 0.59, 0.11)), _EffectAmount) * _Intensity;
068                    return col;
069                }
070            ENDCG
071        }
072    }
073 
074    SubShader
075    {
076        LOD 100
077 
078        Tags
079        {
080            "Queue" "Transparent"
081            "IgnoreProjector" "True"
082            "RenderType" "Transparent"
083        }
084         
085        Pass
086        {
087            Cull Off
088            Lighting Off
089            ZWrite Off
090            Fog { Mode Off }
091            Offset -1, -1
092            ColorMask RGB
093            AlphaTest Greater .01
094            Blend SrcAlpha OneMinusSrcAlpha
095            ColorMaterial AmbientAndDiffuse
096             
097            SetTexture [_MainTex]
098            {
099                Combine Texture * Primary
100            }
101        }
102    }
103}
 
스텝2. ​원하는 Atlas의 Material의 쉐이더를 방금 추가한 쉐이더로 바꿉니다.
 
스텝3. UIAtlas.cs의 코드를 수정합니다.
01[HideInInspector][SerializeField] Material material; // 이코드를 찾아서 밑에 코드를 추가합니다.
02[HideInInspector][SerializeField] Material materialGray;  // 추가
03[HideInInspector][SerializeField] Material materialBright; // 추가
04  
05  
06    // spriteMaterial을 수정합니다.
07    public Material spriteMaterial
08    {
09        get
10        {
11            return (mReplacement != null) ? mReplacement.spriteMaterial : material;
12        }
13        set
14        {
15            if (mReplacement != null)
16            {
17                mReplacement.spriteMaterial = value;
18            }
19            else
20            {
21                materialGray = null; // 추가됨
22                materialBright = null; // 추가됨
23                if (material == null)
24                {
25                    mPMA = 0;
26                    material = value;
27                }
28                else
29                {
30                    MarkAsChanged();
31                    mPMA = -1;
32                    material = value;
33                    MarkAsChanged();
34                }
35            }
36        }
37    }
38  
39    //추가
40    public Material spriteMaterialGrayscale {
41        get {
42            if (materialGray == null) {
43                materialGray = new Material(spriteMaterial);
44                materialGray.SetFloat("_EffectAmount", 1);
45            }
46            return materialGray;
47        }
48    }
49  
50    //추가
51    public Material spriteMaterialBright {
52        get {
53            if (materialBright == null) {
54                materialBright = new Material(spriteMaterial);
55                materialBright.SetFloat("_Intensity", 3);
56            }
57            return materialBright;
58        }
59    }
 
스텝4. UISprite.cs코드를 수정합니다.
01// 적당한 위치에 추가합니다.
02 [System.NonSerialized] bool isGray  = false; // 추가
03 [System.NonSerialized] bool isBright  = false; // 추가
04 
05 
06 // material getter를 수정합니다.
07 public override Material material {
08     get {
09         if (mAtlas == null) {
10             return null;
11         }
12         if (isGray) {
13             return mAtlas.spriteMaterialGrayscale;
14         }
15         if (isBright) {
16             return mAtlas.spriteMaterialBright;
17         }
18         return mAtlas.spriteMaterial;
19     }
20 }
21 
22// 추가합니다.
23 public void GrayScale(bool gray) {
24     isGray = gray;
25     if (panel != null) {
26         panel.RebuildAllDrawCalls();
27     }
28 }
29 
30// 추가합니다.
31 public void Bright(bool bright) {
32     isBright = bright;
33     if (panel != null) {
34         panel.RebuildAllDrawCalls();
35     }
36 }
 
여기까지 하셨으면 작업완료!
아래와 같이 회색처리 / Bright처리 가능합니다.
sprite.GrayScale(true);
sprite.Bright(true);NGUI가 기본적으로 Sprite의 회색처리와 Bright처리를 지원하지 않아서
그동안 회색 처리된 이미지와 Bright처리된 이미지를 별도로 사용하다가,
도저히 노가다와 용량문제로 안되겠어서 구글링의 도움으로 여러 글을 참고로 만들어봤습니다.
NGUI스크립트를 일부 수정하셔야합니다. 
 
대략 다음 순서입니다.
스텝1. 새로운 쉐이더를 추가합니다.
스텝2. 만들어진 Atlas의 Material의 쉐이더를 추가한 쉐이더로 바꿉니다.
스텝3. UIAtlas의 코드를 수정합니다.
스텝4. UISprite의 코드를 수정합니다.
 
스텝1. 새로운 쉐이더 추가
NGUI/Resources/Shaders에 적당한 이름으로 저장합니다.
001Shader "Unlit/Transparent Colored (Gray)"
002{
003    Properties
004    {
005        _MainTex ("Base (RGB), Alpha (A)", 2D) = "black" {}
006        _EffectAmount ("Effect Amount", Range (0, 1)) = 0.0
007        _Intensity ("Intencity", float) = 1.0
008    }
009     
010    SubShader
011    {
012        LOD 100
013 
014        Tags
015        {
016            "Queue" "Transparent"
017            "IgnoreProjector" "True"
018            "RenderType" "Transparent"
019        }
020         
021        Cull Off
022        Lighting Off
023        ZWrite Off
024        Fog { Mode Off }
025        Offset -1, -1
026        Blend SrcAlpha OneMinusSrcAlpha
027 
028        Pass
029        {
030            CGPROGRAM
031                #pragma vertex vert
032                #pragma fragment frag
033                 
034                #include "UnityCG.cginc"
035     
036                struct appdata_t
037                {
038                    float4 vertex : POSITION;
039                    float2 texcoord : TEXCOORD0;
040                    fixed4 color : COLOR;
041                };
042     
043                struct v2f
044                {
045                    float4 vertex : SV_POSITION;
046                    half2 texcoord : TEXCOORD0;
047                    fixed4 color : COLOR;
048                };
049     
050                sampler2D _MainTex;
051                float4 _MainTex_ST;
052                fixed _EffectAmount;
053                half _Intensity;
054 
055                v2f vert (appdata_t v)
056                {
057                    v2f o;
058                    o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
059                    o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
060                    o.color = v.color;
061                    return o;
062                }
063                 
064                fixed4 frag (v2f i) : COLOR
065                {
066                    fixed4 col = tex2D(_MainTex, i.texcoord) * i.color;
067                    col.rgb = lerp(col.rgb, dot(col.rgb, float3(0.3, 0.59, 0.11)), _EffectAmount) * _Intensity;
068                    return col;
069                }
070            ENDCG
071        }
072    }
073 
074    SubShader
075    {
076        LOD 100
077 
078        Tags
079        {
080            "Queue" "Transparent"
081            "IgnoreProjector" "True"
082            "RenderType" "Transparent"
083        }
084         
085        Pass
086        {
087            Cull Off
088            Lighting Off
089            ZWrite Off
090            Fog { Mode Off }
091            Offset -1, -1
092            ColorMask RGB
093            AlphaTest Greater .01
094            Blend SrcAlpha OneMinusSrcAlpha
095            ColorMaterial AmbientAndDiffuse
096             
097            SetTexture [_MainTex]
098            {
099                Combine Texture * Primary
100            }
101        }
102    }
103}
 
스텝2. ​원하는 Atlas의 Material의 쉐이더를 방금 추가한 쉐이더로 바꿉니다.
 
스텝3. UIAtlas.cs의 코드를 수정합니다.
01[HideInInspector][SerializeField] Material material; // 이코드를 찾아서 밑에 코드를 추가합니다.
02[HideInInspector][SerializeField] Material materialGray;  // 추가
03[HideInInspector][SerializeField] Material materialBright; // 추가
04  
05  
06    // spriteMaterial을 수정합니다.
07    public Material spriteMaterial
08    {
09        get
10        {
11            return (mReplacement != null) ? mReplacement.spriteMaterial : material;
12        }
13        set
14        {
15            if (mReplacement != null)
16            {
17                mReplacement.spriteMaterial = value;
18            }
19            else
20            {
21                materialGray = null; // 추가됨
22                materialBright = null; // 추가됨
23                if (material == null)
24                {
25                    mPMA = 0;
26                    material = value;
27                }
28                else
29                {
30                    MarkAsChanged();
31                    mPMA = -1;
32                    material = value;
33                    MarkAsChanged();
34                }
35            }
36        }
37    }
38  
39    //추가
40    public Material spriteMaterialGrayscale {
41        get {
42            if (materialGray == null) {
43                materialGray = new Material(spriteMaterial);
44                materialGray.SetFloat("_EffectAmount", 1);
45            }
46            return materialGray;
47        }
48    }
49  
50    //추가
51    public Material spriteMaterialBright {
52        get {
53            if (materialBright == null) {
54                materialBright = new Material(spriteMaterial);
55                materialBright.SetFloat("_Intensity", 3);
56            }
57            return materialBright;
58        }
59    }
 
스텝4. UISprite.cs코드를 수정합니다.
01// 적당한 위치에 추가합니다.
02 [System.NonSerialized] bool isGray  = false; // 추가
03 [System.NonSerialized] bool isBright  = false; // 추가
04 
05 
06 // material getter를 수정합니다.
07 public override Material material {
08     get {
09         if (mAtlas == null) {
10             return null;
11         }
12         if (isGray) {
13             return mAtlas.spriteMaterialGrayscale;
14         }
15         if (isBright) {
16             return mAtlas.spriteMaterialBright;
17         }
18         return mAtlas.spriteMaterial;
19     }
20 }
21 
22// 추가합니다.
23 public void GrayScale(bool gray) {
24     isGray = gray;
25     if (panel != null) {
26         panel.RebuildAllDrawCalls();
27     }
28 }
29 
30// 추가합니다.
31 public void Bright(bool bright) {
32     isBright = bright;
33     if (panel != null) {
34         panel.RebuildAllDrawCalls();
35     }
36 }
 
여기까지 하셨으면 작업완료!
아래와 같이 회색처리 / Bright처리 가능합니다.
sprite.GrayScale(true);
sprite.Bright(true);



출처 : http://devkorea.co.kr/bbs/board.php?bo_table=m03_lecture&wr_id=3561

반응형
Posted by blueasa
, |