SpriteRenderer的Shader实现Image的Filled(一)

本Shader基于unity5.4.4的SpriteDefault

1、首先说一下原理

因为UV是0-1之间的值,可以根据UV点的位置判断当前点是否显示,Horizontal根据x的值和FillAmount比较,比FillAmount小的显示,比FillAmount大的不显示,如图2当FillAmount为0.5时左侧显示,右侧的不显示。Vertical则根据y进行比较

SpriteRenderer的Shader实现Image的Filled(一)_第1张图片
(图1)


SpriteRenderer的Shader实现Image的Filled(一)_第2张图片
(图2)

2、具体介绍Shader实现

首先增加三个属性,可以让你外部修改属性的值

Properties

{

……

///1:横向;2:纵向;

_FillMethod ("FillMethod", Int) = 1

//1Method(1:从左到右显示;2:从右到左显示)

//2Method(1:从下到上显示;2:从上到下显示)

_FillOrigin ("FillOrigin", Int) = 1

_FillAmount ("FillAmount", Range(0,1)) = 1

}

为了能再CG代码中使用这三个声明的属性,我们还要再代码中提前定义三个变量

Pass

{

fixed4 _Color;

int _FillMethod;

int _FillOrigin;

fixed _FillAmount;

}

fixed4 SampleSpriteTexture (float2 uv)

{

///这句话的理解,取得_MainTex(要显示的图片)上的uv(当前点)点处的颜色值

fixed4 color = tex2D (_MainTex, uv);

#if ETC1_EXTERNAL_ALPHA

// get the color from an external texture (usecase: Alpha support for ETC1 on android)

color.a = tex2D (_AlphaTex, uv).r;

#endif //ETC1_EXTERNAL_ALPHA

if(1 == _FillMethod)

{

if(1 == _FillOrigin && uv.x>_FillAmount)

{

discard;

}

else if(2 == _FillOrigin && uv.x<(1-_FillAmount))

{

discard;

}

}

else if(2 == _FillMethod)

{

if(1 == _FillOrigin && uv.y>_FillAmount)

{

discard;

}

else if(2 == _FillOrigin && uv.y<(1-_FillAmount))

{

discard;

}

}

return color;

}


最后附上完整Shader文件

你可能感兴趣的:(SpriteRenderer的Shader实现Image的Filled(一))