首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >零基础入门 29:贴图变灰

零基础入门 29:贴图变灰

作者头像
韩东吉
发布2018-10-19 16:59:36
6030
发布2018-10-19 16:59:36
举报

今天的内容不多,通常在游戏中,大家经常会遇到这样的需求,就是原本一个美术出来的图片,因为某种状态下,需要将他变成灰色代表当前禁用或者未激活一类的提示效果,那么,这个置灰应该如何做呢?

今天就来和大家分享一下,贴图变灰功能的制作

正题开始


下面两个对比图就是我们要实现的效果。

原图

置灰后的效果

那么应该如何实现呢?其实很简单

之前介绍的Ugui 里的Image组件,想必大家都还记得,它上面有一个Material材质球的框,可以用来选择要设置的材质球,我们这个变灰就是写一个Shader,来赋值给一个材质球,然后再把材质球,赋值给这个Image就大功告成了。

如上图所示,我创建一个文件夹,名为JiminMaterial,然后创建一个材质球名为JiminGray,在创建一个Shader文件,名为JiminGrayShader,然后一张资源图。

之后创建一个UGUI的image,在Image上将JiminGray的材质球赋值给Image组件即可完成。

通过上面的动图大家也可以看的出来,材质球对贴图的影响。

下面就是Shader的代码

Shader "Jimin/Gray"

{

Properties

{

[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}

_Color2 ("Tint2", Color) = (1,1,1,1)

// -- Add --

_GrayScale("GrayScale", Float) = 1

// -- Add

//Mask Support

_StencilComp ("Stencil Comparison", Float) = 8

_Stencil ("Stencil ID", Float) = 0

_StencilOp ("Stencil Operation", Float) = 0

_StencilWriteMask ("Stencil Write Mask", Float) = 255

_StencilReadMask ("Stencil Read Mask", Float) = 255

_ColorMask ("Color Mask", Float) = 15

//End

}

SubShader

{

Tags

{

"Queue"="Transparent"

"IgnoreProjector"="True"

"RenderType"="Transparent"

"PreviewType"="Plane"

"CanUseSpriteAtlas"="True"

}

Cull Off

Lighting Off

ZWrite Off

//ZTest [unity_GUIZTestMode]

Fog { Mode Off }

Blend SrcAlpha OneMinusSrcAlpha

Stencil

{

Ref [_Stencil]

Comp [_StencilComp]

Pass [_StencilOp]

ReadMask [_StencilReadMask]

WriteMask [_StencilWriteMask]

}

ColorMask [_ColorMask]

Pass

{

CGPROGRAM

#pragma vertex vert

#pragma fragment frag

#include "UnityCG.cginc"

struct appdata_t

{

float4 vertex : POSITION;

float4 color : COLOR;

float2 texcoord : TEXCOORD0;

};

struct v2f

{

float4 vertex : SV_POSITION;

fixed4 color : COLOR;

half2 texcoord : TEXCOORD0;

};

fixed4 _Color2;

v2f vert(appdata_t IN)

{

v2f OUT;

OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);

OUT.texcoord = IN.texcoord;

#ifdef UNITY_HALF_TEXEL_OFFSET

OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);

#endif

return OUT;

}

sampler2D _MainTex;

fixed _GrayScale;

fixed4 frag(v2f IN) : SV_Target

{

half4 color = tex2D(_MainTex, IN.texcoord);

half c = color.r * 0.3 + color.g * 0.52 + color.b * 0.18;

color.r = color.g = color.b = c * _GrayScale;

return color * _Color2;

}

ENDCG

}

}

}

好了,这回今后大家有这样的需求,都可以按照上面的方式去做啦。

今天的内容很短,也很简单,但是项目里确实必不可少的。

大家下期见哈~

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-09-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 韩东吉的Unity杂货铺 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档