这里先介绍下简单方便的做法,先看看效果:
具体做法:
- 首先把mask组件替换为rect mask 2D组件,因为mask的裁剪的原理是根据stencil buffer,而且只会裁剪子节点的UI,不会裁剪粒子。
- 创建一个空的gameobject,命名为MaskRect,添加sprite mask组件,并选择裁剪的sprite,把scale调整到scrollview content的区域大小。
- 每个item下面挂在粒子特效,并且设置粒子特效的mask属性为visible inside mask
- 然后拖动scrollview,你便会发现粒子特效和UI一块被裁剪了
以上粒子特效虽然成功裁剪,但是有一个问题,就是粒子特效裁剪区域不会自适应大小,如果屏幕分辨率发生变化,就得手动调节裁剪区域的大小。
更优雅的方式就是修改shader
修改shader的原理就是让可见区域的alpha为1,不可见修改为0。下面是常用的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;
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()
{
//-----------紧测试使用,实际项目中,自己通过管理类获取对应数值----------//
AdaptComp adaptRadio = FindObjectOfType<AdaptComp>();
top = GameObject.Find("Top").transform.position.y * adaptRadio.GetRadio();
bottom = GameObject.Find("Bottom").transform.position.y * adaptRadio.GetRadio();
///----------------------------------------------------------------------//
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);
}
}
3.注意这里的top和bottom的值一定要计算下,同比例的分辨率用款或者高计算当前缩放值,不同比例的分辨率,以宽适配就用宽来计算缩放,否则用高计算缩放值。不计算缩放裁剪区域上下会在不同分辨率有误差!这里给出adaptcomp的代码,挂在相应的Canvas下面即可!
adaptcomp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class AdaptComp:MonoBehaviour
{
/// <summary>
/// 制作标准分辨率,竖屏
/// </summary>
private const float STANDARD_W = 1080f;
private const float STANDARD_H = 1920f;
/// <summary>
/// 缩放系数
/// </summary>
private float scaleRatio = 1;
/// <summary>
/// 是否以高作为适配基准,如果以高为准,
/// Canvas scaler的match设置为1
/// 否则设置为0
/// </summary>
private bool adaptH = false;
private CanvasScaler mCanvasScaler;
void Awake()
{
mCanvasScaler = GetComponent<CanvasScaler>();
mCanvasScaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize;
mCanvasScaler.referenceResolution = new Vector2(STANDARD_W, STANDARD_H);
mCanvasScaler.screenMatchMode = CanvasScaler.ScreenMatchMode.MatchWidthOrHeight;
adaptH = STANDARD_H / STANDARD_W > Screen.height / (float)Screen.width;//谁变小就以谁为基准
mCanvasScaler.matchWidthOrHeight = adaptH ? 1 : 0;
}
public float GetRadio()
{
scaleRatio = adaptH ? Screen.height / STANDARD_H : Screen.width / STANDARD_W;
return scaleRatio;
}
}
看看不同分辨率下的裁剪效果:
10801920
10802160
768*1024