Scrollview在开发过程中非常常见,背包、成就、排行榜等一些功能都会遇到,平时的使用过程中可能还好,不会出太多问题,可是一旦策划要在里面的item上增加特效,问题就来了,因为粒子不会被裁切,导致滑动过程中出现问题。
美术给我的特效包含了多个内容,导致解决问题相当复杂
1.特效中有粒子,需要对粒子进行裁切
2.特效中有面片,用的meshrender
3.有的特效要求在图片后面,所以要调整特效和图片层级,这样一来新的问题出现了:图片无法被裁切
为了解决Scrollview的裁切问题我找了很多方法,也尝试了一些:
1.把组件的Mask改为Rect Mask 2D ,然后加上Sprite Mask物体,再修改粒子系统里的Masking属性。这个方法的确可以不使用代码就能裁切特效了,但是不够精准,并且在不同分辨率下如果UI面板大小有变动的话,也要进行相应修改,相当麻烦,而且只能解决问题1,其他效果不能裁切,pass。
2.增加一个相机,视口只拍你想要的区域,然后改变相机深度进行渲染。这种方法看似可行,不过我们的项目canvas使用了camera模式,只用单相机渲染,达不到想要的效果,pass。
3.还是增加一个相机,这次是用的RenderTexture和RawImage组合。然而这种方式拍出来的特效粒子特别模糊,画质感染,pass。
看来看去最好的方法还是还是要使用shader进行裁切了,原理十分简单,就是在shader传入相应的世界坐标,然后在像素里面判断这个像素点所在的世界坐标,如果不在范围内,就把它的Alpha值变为0,自然就不显示了。问题1和问题2中的shader直接修改,问题3的解决方法就是新建一个Material放在Image里面,照样进行裁切。
下面是常用的Addtive和AlphaBlended的Shader源码修改后的代码 可直接挂上去,按照这个方法可以对其他shader进行修改
Additive
Shader "Particles/MyAdditive" {
Properties{
_TintColor("Tint Color", Color) = (0.5,0.5,0.5,0.5)
_MainTex("Particle Texture", 2D) = "white" {}
_InvFade("Soft Particles Factor", Range(0.01,3.0)) = 1.0
//特效裁切修改-------
_MinX("MinX", Float) = -1000
_MaxX("MaxX", Float) = 1000
_MinY("MinY", Float) = -10
_MaxY("MaxY", Float) = 10
//------------------
}
Category{
Tags { "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" }
Blend SrcAlpha One
AlphaTest Greater .01
ColorMask RGB
Cull Off Lighting Off ZWrite Off Fog { Color(0,0,0,0) }
BindChannels {
Bind "Color", color
Bind "Vertex", vertex
Bind "TexCoord", texcoord
}
SubShader {
Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma fragmentoption ARB_precision_hint_fastest
#pragma multi_compile_particles
#include "UnityCG.cginc"
sampler2D _MainTex;
fixed4 _TintColor;
//特效裁切修改-------
float _MinX;
float _MaxX;
float _MinY;
float _MaxY;
//------------------
struct appdata_t {
float4 vertex : POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
};
struct v2f {
float4 vertex : POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
//特效裁切修改-------
float2 worldPos : TEXCOORD1;
//------------------
#ifdef SOFTPARTICLES_ON
float4 projPos : TEXCOORD2;
#endif
};
float4 _MainTex_ST;
v2f vert(appdata_t v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
#ifdef SOFTPARTICLES_ON
o.projPos = ComputeScreenPos(o.vertex);
COMPUTE_EYEDEPTH(o.projPos.z);
#endif
o.color = v.color;
o.texcoord = TRANSFORM_TEX(v.texcoord,_MainTex);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xy;
return o;
}
sampler2D _CameraDepthTexture;
float _InvFade;
fixed4 frag(v2f i) : COLOR
{
#ifdef SOFTPARTICLES_ON
float sceneZ = LinearEyeDepth(UNITY_SAMPLE_DEPTH(tex2Dproj(_CameraDepthTexture, UNITY_PROJ_COORD(i.projPos))));
float partZ = i.projPos.z;
float fade = saturate(_InvFade * (sceneZ - partZ));
i.color.a *= fade;
#endif
//特效裁切修改-------
//是否在区域内
bool inArea = i.worldPos.x >= _MinX && i.worldPos.x <= _MaxX && i.worldPos.y >= _MinY && i.worldPos.y <= _MaxY;
//------------------
return inArea ? 2.0f * i.color * _TintColor * tex2D(_MainTex, i.texcoord) : fixed4(0, 0, 0, 0);
}
ENDCG
}
}
SubShader {
Pass {
SetTexture[_MainTex] {
constantColor[_TintColor]
combine constant * primary
}
SetTexture[_MainTex] {
combine texture * previous DOUBLE
}
}
}
SubShader {
Pass {
SetTexture[_MainTex] {
combine texture * primary
}
}
}
}
}
AlphaBlended
Shader "Particles/MyAlphaBlended" {
Properties{
_TintColor("Tint Color", Color) = (0.5,0.5,0.5,0.5)
_MainTex("Particle Texture", 2D) = "white" {}
_InvFade("Soft Particles Factor", Range(0.01,3.0)) = 1.0
_MinX("MinX", Float) = -1000
_MaxX("MaxX", Float) = 1000
_MinY("MinY", Float) = -10
_MaxY("MaxY", Float) = 10
}
Category{
Tags { "Queue" = "Transparent" "IgnoreProjector" = "True" "RenderType" = "Transparent" "PreviewType" = "Plane" }
Blend SrcAlpha OneMinusSrcAlpha
Cull Off Lighting Off ZWrite Off Fog { Color(0,0,0,0) }
//AlphaTest Greater .01
ColorMask RGB
BindChannels {
Bind "Color", color
Bind "Vertex", vertex
Bind "TexCoord", texcoord
}
// ---- Fragment program cards
SubShader {
Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma fragmentoption ARB_precision_hint_fastest
#pragma multi_compile_particles
#include "UnityCG.cginc"
sampler2D _MainTex;
fixed4 _TintColor;
float _MinX;
float _MaxX;
float _MinY;
float _MaxY;
struct appdata_t {
float4 vertex : POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
};
struct v2f {
float4 vertex : POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
float2 worldPos : TEXCOORD1;
#ifdef SOFTPARTICLES_ON
float4 projPos : TEXCOORD2;
#endif
};
float4 _MainTex_ST;
v2f vert(appdata_t v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
#ifdef SOFTPARTICLES_ON
o.projPos = ComputeScreenPos(o.vertex);
COMPUTE_EYEDEPTH(o.projPos.z);
#endif
o.color = v.color;
o.texcoord = TRANSFORM_TEX(v.texcoord,_MainTex);
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xy;
return o;
}
sampler2D _CameraDepthTexture;
float _InvFade;
fixed4 frag(v2f i) : COLOR
{
#ifdef SOFTPARTICLES_ON
float sceneZ = LinearEyeDepth(UNITY_SAMPLE_DEPTH(tex2Dproj(_CameraDepthTexture, UNITY_PROJ_COORD(i.projPos))));
float partZ = i.projPos.z;
float fade = saturate(_InvFade * (sceneZ - partZ));
i.color.a *= fade;
#endif
//是否在区域内
bool inArea = i.worldPos.x >= _MinX && i.worldPos.x <= _MaxX && i.worldPos.y >= _MinY && i.worldPos.y <= _MaxY;
return inArea ? 2.0f * i.color * _TintColor * tex2D(_MainTex, i.texcoord) : fixed4(0, 0, 0, 0);
}
ENDCG
}
}
SubShader {
Pass {
SetTexture[_MainTex] {
constantColor[_TintColor]
combine constant * primary
}
SetTexture[_MainTex] {
combine texture * previous DOUBLE
}
}
}
SubShader {
Pass {
SetTexture[_MainTex] {
combine texture * primary
}
}
}
}
}
Shader准备好之后需要做的就是给这个Shader传递数值了
1.获取数值,这里并没有去进行什么计算,我直接在Viewport上挂了上下两个点,到时候直接用这两个物体的世界坐标Y值就行了,注意调整锚点方式,这样面对不同分辨率的情况,不管Canvas怎么变,我这里的的裁切范围总是确定的
2.传递数值,直接在特效上挂这个脚本,当特效生成的时候让它自己去寻找吧。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using GameFramework;
namespace Proj
{
public class Cut : MonoBehaviour
{
ParticleSystem[] particleSystems;
Image[] images;
MeshRenderer[] renders;
List<Material> m_materialList = new List<Material>();//存放需要修改Shader的Material
float top;
float bottom;
void Awake()
{
gameObject.SetActive(false);
Limit();
}
void Limit()
{
var ui = GameFrameEntry.GetModule<UIModule>().GetUI<UI.MainMenu.CardUI>();
if (ui != null)
{
top = ui.TopPosition;
bottom = ui.BottomPosition;
particleSystems = transform.GetComponentsInChildren<ParticleSystem>();
images = transform.GetComponentsInChildren<Image>();
renders = transform.GetComponentsInChildren<MeshRenderer>();
//获取所有需要修改shader的material
for (int i = 0; i < particleSystems.Length; i++)
{
Material[] mat = particleSystems[i].GetComponent<Renderer>().materials;//有的地方有多个材质 拖尾材质
for(int j=0;j<mat.Length;j++)
{
if (mat[j].name != "Default-Material (Instance)")
{
m_materialList.Add(mat[j]);
}
}
}
for(int i=0;i< images.Length;i++)
{
m_materialList.Add(images[i].material);
}
for (int i = 0; i < renders.Length; i++)
{
m_materialList.Add(renders[i].material);
}
//这里是竖版 所以对X轴没有做限制
for (int i = 0; i < m_materialList.Count; i++)
{
m_materialList[i].SetFloat("_MaxY", top);
m_materialList[i].SetFloat("_MinY", bottom);
}
}
gameObject.SetActive(true);
}
}
}
最后贴一个Image用于裁剪的Shader
Shader "Particles/UICut"
{
Properties{
_TintColor("Tint Color", Color) = (0.5,0.5,0.5,0.5)
_MainTex("Particle Texture (A = Transparency)", 2D) = "white" {}
_InvFade("Soft Particles Factor", Range(0.01,3.0)) = 1.0
_MinX("MinX", Float) = -1000
_MaxX("MaxX", Float) = 1000
_MinY("MinY", Float) = -10
_MaxY("MaxY", Float) = 10
}
Category{
Tags { "Queue" = "Transparent+300" "IgnoreProjector" = "True" "RenderType" = "Transparent" }
//Blend SrcAlpha One//注意这里的混合模式
Blend SrcAlpha OneMinusSrcAlpha
AlphaTest Greater .01
ColorMask RGB
Cull Off Lighting Off ZWrite Off Fog { Color(0,0,0,0) }
BindChannels {
Bind "Color", color
Bind "Vertex", vertex
Bind "TexCoord", texcoord
}
SubShader {
Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#pragma fragmentoption ARB_precision_hint_fastest
#pragma multi_compile_particles
#include "UnityCG.cginc"
sampler2D _MainTex;
fixed4 _TintColor;
float _MinX;
float _MaxX;
float _MinY;
float _MaxY;
struct appdata_t {
float4 vertex : POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
};
struct v2f {
float4 vertex : POSITION;
fixed4 color : COLOR;
float2 texcoord : TEXCOORD0;
//新增,记录顶点的世界坐标
float2 worldPos : TEXCOORD1;
//----end----
};
float4 _MainTex_ST;
v2f vert(appdata_t v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.color = v.color;
o.texcoord = v.texcoord;//TRANSFORM_TEX(v.texcoord,_MainTex);
//新增,计算顶点的世界坐标
o.worldPos = mul(unity_ObjectToWorld, v.vertex).xy;
//----end----
return o;
}
sampler2D _CameraDepthTexture;
float _InvFade;
fixed4 frag(v2f i) : COLOR
{
bool inArea = i.worldPos.x >= _MinX && i.worldPos.x <= _MaxX && i.worldPos.y >= _MinY && i.worldPos.y <= _MaxY;
//如果在裁剪框内return原本的效果,否则即隐藏
//return inArea ? 2.0f * i.color * _TintColor * tex2D(_MainTex, i.texcoord) : fixed4(0,0,0,0);
return inArea ? tex2D(_MainTex, i.texcoord)*i.color : fixed4(0, 0, 0, 0);
}
ENDCG
}
}
}
}