shader实例：实现类似宝可梦 Pokemon 的战斗转场

好热哦

已于 2022-04-04 15:04:44 修改

阅读量3.2k

点赞数

分类专栏： Unity Shader 实例文章标签： unity shader UI Pokemon Transition

于 2022-04-03 19:47:49 首次发布

本文链接：https://blog.csdn.net/fjl2007/article/details/123942632

版权

本文介绍如何利用Unity的Shader制作类似宝可梦战斗转场的动画效果。通过控制灰度图的cutoff值，实现UI遮罩动画。提供完整的Unity Package，包含详细中文注解的Shader代码，用户只需导入package，调整材质属性即可实现。

摘要由CSDN通过智能技术生成

宝可梦游戏在进入战斗前会有类似这样转场动画。
请添加图片描述
例子中使用的纹理质量较差，边缘比较模糊，和shader无关。

这个UI是盖在所有UI最前面的。可以使用shader来完成这个工作，而不是复杂的动画。
请添加图片描述
使用一张这样的灰度图，用动画控制cutoff值来决定产生遮罩的像素从而产生动画。

Shader 代码如下：

Shader "UI/UITransitions"
{
	// 通过材质可以控制的变量，使用inspector设置
	Properties
	{
		_MainTex("Texture", 2D) = "white" {}
		_TransitionTex("Transition Texture", 2D) = "white" {}
		_Color("Screen Color", Color) = (1,1,1,1)
		_Cutoff("Cutoff", Range(0, 1)) = 0
		_Fade("Fade", Range(0, 1)) = 0
	}

	// 对应多个变体。如：一个subshader给pc用，另一个给手机用
	SubShader
	{
		// 不剪切背表面、不写z、ztest永远通过
		Cull Off ZWrite Off ZTest Always

		// 每个pass会渲染一次物体。如：一个pass处理平行光&#x