NGUI UISprite 회색처리하기 / 강조처리하기

NGUI가 기본적으로 Sprite의 회색처리와 Bright처리를 지원하지 않아서

그동안 회색 처리된 이미지와 Bright처리된 이미지를 별도로 사용하다가,
도저히 노가다와 용량문제로 안되겠어서 구글링의 도움으로 여러 글을 참고로 만들어봤습니다.
NGUI스크립트를 일부 수정하셔야합니다. 

 

대략 다음 순서입니다.
스텝1. 새로운 쉐이더를 추가합니다.
스텝2. 만들어진 Atlas의 Material의 쉐이더를 추가한 쉐이더로 바꿉니다.
스텝3. UIAtlas의 코드를 수정합니다.
스텝4. UISprite의 코드를 수정합니다.

 

스텝1. 새로운 쉐이더 추가

NGUI/Resources/Shaders에 적당한 이름으로 저장합니다.

001	Shader "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에 적당한 이름으로 저장합니다.

001	Shader "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