Unity特效(3) 图片翻转-Magesbox

2D游戏开发中，往往会使用翻转的图片（如下图），然而Transform的旋转并不能完成这一功能，那么什么办法将图片翻转呢？

1、编写Shader

下面的着色器代码使用了顶点/片元着色器处理图片翻转功能。这里定义3个属性，其中_MainTex代表图片贴图，_Hor代表是否启用水平翻转，_Ver代表是否启用垂直翻转。核心代码是“o.uv.x = (1-v.texcoord.x)*_Hor + v.texcoord.x*(1-_Hor)”和“o.uv.y = (1-v.texcoord.y)*_Ver + v.texcoord.y*(1-_Ver);”它们实现了UV坐标的变换。在o.uv.x的计算式中，如果_Hor为0，那么“o.uv.x = v.texcoord.x”即为原始UV，如果_Hor为1，由于纹理坐标被归一化到[0,1]的范围，那么“o.uv.x = 1-v.texcoord.x”即为翻转后的UV。

Shader "Lpy/ImageFlip" 
{
	Properties 
	{
		_MainTex ("Main Tex", 2D) = "white" {}
 
    	_Hor ("Is Horizontal Filp", Range (0, 1)) = 0
    	_Ver ("Is Vertical Filp", Range (0, 1)) = 0
	}
 
	SubShader 
	{
		Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
 
		Pass 
		{
			Tags { "LightMode"="ForwardBase" }
			ZTest off
			ZWrite Off
			Blend SrcAlpha OneMinusSrcAlpha
 
			CGPROGRAM
			#pragma vertex vert  
			#pragma fragment frag
			#include "UnityCG.cginc"
 
			sampler2D _MainTex;
			int _Hor;
			int _Ver;
			  
			struct a2v 
			{  
			    float4 vertex : POSITION; 
			    float2 texcoord : TEXCOORD0;
			};  
 
			struct v2f 
			{  
			    float4 pos : SV_POSITION;
			    float2 uv : TEXCOORD0;
			};  
 
			v2f vert (a2v v) 
			{  
				v2f o;  
				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);  
 
				o.uv.x = (1-v.texcoord.x)*_Hor + v.texcoord.x*(1-_Hor);
				o.uv.y = (1-v.texcoord.y)*_Ver + v.texcoord.y*(1-_Ver);
				return o;
			}  
 
			fixed4 frag (v2f i) : SV_Target 
			{
				fixed4 c = tex2D(_MainTex, i.uv);
				return c;
			}
			ENDCG
		}  
	}
	FallBack "Transparent/VertexLit"
}

2、使用材质

新建一个名为ImageFilp的材质，选择上述编写的shader，设置Is Horizontal Filp和Is Vertical Filp，如下图所示。

将刚创建的材质应用于图片上，即可看到翻转的效果。如下图所示。