使用
1.将ChunkDisappearImage挂在一个空GameObject上。
2.将ChunkDisappearImage的Material设为ChunkDisappearImageMaterial。
3.设置RectTransform的宽、高、缩放、旋转等参数。设置ChunkDisappearImage的参数。
Speed: 小方块移动的速度。
TargetX,TargetY: 每个小方块移动的终点坐标。
SubRectX,SubRectY: 每个小方块的长宽。
Interval: 每个小方块开始移动时间的间隔。
SpeedArg: 距离越远的方块是否运行越快,_SpeedArg为1时,所有方块运行速度基本相同,值越小,距离越远的方块运行的越快。
ps:目标点的坐标,小方块的宽高都是Image对象为父节点的本地坐标。
实现主要分为三个步骤:
1.修改image的mesh。
2.将与运动相关的参数传入shader中。
3.在移动结束后将mesh恢复为普通的image的shader。
Image的默认mesh:
拆分后的mesh: 以拆分为四块为例
将mesh拆分为很多个小矩形后,还得想办法告诉shader每个顶点是属于那个矩形的,才能以此为依据进行矩形的移动。 2.如何告诉shader每个顶点是属于哪个矩形的。 public partial struct UIVertex { public Vector3 position; public Vector3 normal; public Vector4 tangent; public Color32 color; public Vector2 uv0; public Vector2 uv1; public Vector2 uv2; public Vector2 uv3;
可以看下描述一个UI顶点的结构体中都包含了哪些字段,UGUI中只用到了position,color,uv0这三个字段。
这代表我们可以使用剩余的字段传我们需要的额外信息,这里选择使用uv1字段将每个矩形的左下角的点作为矩形的位置信息传入shader,在shader中,以此为基础进行小矩形块的移动。
注意:
①不能用normal和tangent,因为UGUI在渲染时,传入shader中的position不是传入VertexHelper时的原始值,而是该点在根canvas上的坐标,同理,normal,tangent也做了相应的变换。不是原始值了。
所以在传额外信息的时候要用uv1、uv2、uv3字段,这三个字段不会随点的移动、旋转、缩放而改变。
②由于unity高版本在ugui渲染时做了优化,在默认情况下只会将position、color、uv0三个字段传入shader,所以需要手动将uv1设为生效才行。
image的模型矩阵:
canvas的模型矩阵:
由于矩阵满足结合律,所以用用canvas的模型矩阵的逆乘以image的模型矩阵会将canvas的模型矩阵消掉,也就是image坐标->canvas坐标的模型矩阵:
用这个矩阵乘上image上的本地坐标就可以算出对应的canvas上的坐标。 开始时间和结束时间的计算