Unity可视化Shader工具ASE介绍——8、UI类型的特效Shader编写

2024-03-06 01:50
文章标签 工具 类型 介绍 ui 可视化 特效 编写 unity shader ase

本文主要是介绍Unity可视化Shader工具ASE介绍——8、UI类型的特效Shader编写，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

阿赵的Unity可视化Shader工具ASE介绍目录

Unity的UGUI图片特效角色闪卡效果

  大家好，我是阿赵。
  继续介绍Unity可视化Shader编辑插件ASE的使用。这次讲一下UI类特效Shader的写法。

一、例子说明

  这次编写一个Shader，给一张UGUI里面的图片增加一个闪卡的特效。
在这里插入图片描述

  然后还能保持UGUI图片的特性，能被mask裁剪
在这里插入图片描述在这里插入图片描述

  然后我们需要通过Image上的图片来读取角色的图片，通过Image的颜色来控制整体的颜色和闪卡的闪烁强度。
在这里插入图片描述

二、制作说明

1、读取Image的图片和颜色
  先创建一个UI类模板的ASE的Shader
在这里插入图片描述
在这里插入图片描述

  打开一些别人写好的UI类Shader，可以发现，一开始的属性都有这样的：

[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
_Color ("Tint", Color) = (1,1,1,1)

  那是不是可以认为，我们在创建一个TextureSample的节点叫做MainTex，然后再建一个Color节点就可以了呢？

1.MainTex的获取

  我们可以试一下
在这里插入图片描述

  当我建了一个TextureSample，并且打算起名叫做MainTex的时候，发现没有命名成功，并且右下角有个提示。
  那是因为，在UI类的Shader模板里面，MainTex这个名字已经被占用了，我们不能再使用这个名字。如果想使用MainTex，应该这样：
  搜索并创建Template Parameter节点：
在这里插入图片描述

  创建了之后，发现这个节点默认就是SpriteTexture，然后选择这个节点，看一下属性栏，会发现这个节点的属性名就是_MainTex。
在这里插入图片描述
在这里插入图片描述

  除了MainTex，还可以在属性栏里面选择其他类型的参数：
在这里插入图片描述
在这里插入图片描述

  我们已经拿到了MainTex了，它不是TextureSample，而是TextureObject，所以我们还要建一个TextureSample节点，来把它连到颜色去：
在这里插入图片描述

  保存shader，创建材质球，并把材质球拖到Image下面的Material上
在这里插入图片描述

  这时候应该可以看到图片正确的显示了
在这里插入图片描述

2.颜色的获取

  Image上面的图片，估计很多人第一印象是再建立一个Template Parameter节点，然后类型选中Tint颜色？很遗憾，并不是这样的。
  Image的颜色，其实是顶点颜色。
在这里插入图片描述

  测试一下，把顶点颜色和MainTex的颜色相乘
在这里插入图片描述

  这时候，调整Image的颜色，就可以改变图片的颜色了。
在这里插入图片描述

2、Flow节点的用法

  这一篇主要是讲UI模板的Shader 的，为了实现这个例子，做了一个闪卡特效。不过这个效果不是重点，所以我就比较快的介绍一下：
  ASE里面有一个叫做Flow的节点，可以用来做流动效果的：
在这里插入图片描述

  下面快速的连接一下：
在这里插入图片描述

  使用了2张贴图，一张是noiseTex噪声贴图，一张是normalTex法线贴图。
  根据Flow的输入参数，建了dir、strength、speed三个变量输入。
  得到了Flow流动的颜色之后，最后就是和原来的MainTex颜色叠加在一起就可以了
在这里插入图片描述

  看着好像很复杂，其实只是简单的rgb相乘，再通过Alpha控制一下范围。
  整个Shader的连线是这样：
在这里插入图片描述

  看着比较乱，下一篇找机会说一下怎么去整理这些节点。
  保存Shader，给材质球指定法线贴图和噪声贴图，并根据实际情况调整一下平铺次数
在这里插入图片描述

  这个时候，应该就能看到效果了
在这里插入图片描述

三、生成的Shader的特点

  打开生成的Shader代码看看，会发现有几个特点：
1、根据UIShader的特性，添加了蒙板和一些属性
在这里插入图片描述在这里插入图片描述

2、由于需要计算UI的Mask裁剪，所以计算了世界顶点坐标，然后通过裁剪来修改Alpha
在这里插入图片描述

3、生成的代码还算比较简洁，和自己手写的差别已经不大了，除了有比较多随机变量名。如果不是很介意的话，其实直接拿来使用都可以。
4、最后附上整个Shader的代码，可以在ASE里面查看：

// Made with Amplify Shader Editor
// Available at the Unity Asset Store - http://u3d.as/y3X 
Shader "UITest"
{Properties{[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}_Color ("Tint", Color) = (1,1,1,1)_StencilComp ("Stencil Comparison", Float) = 8_Stencil ("Stencil ID", Float) = 0_StencilOp ("Stencil Operation", Float) = 0_StencilWriteMask ("Stencil Write Mask", Float) = 255_StencilReadMask ("Stencil Read Mask", Float) = 255_ColorMask ("Color Mask", Float) = 15[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0_normalTex("normalTex", 2D) = "bump" {}_Size("Size", Range( 0 , 10)) = 1_noiseTex("noiseTex", 2D) = "white" {}_speed("speed", Float) = 1_dir("dir", Vector) = (0,-1,0,0)_strength("strength", Vector) = (1,1,0,0)[HideInInspector] _texcoord( "", 2D ) = "white" {}}SubShader{LOD 0Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane" "CanUseSpriteAtlas"="True" }Stencil{Ref [_Stencil]ReadMask [_StencilReadMask]WriteMask [_StencilWriteMask]CompFront [_StencilComp]PassFront [_StencilOp]FailFront KeepZFailFront KeepCompBack AlwaysPassBack KeepFailBack KeepZFailBack Keep}Cull OffLighting OffZWrite OffZTest [unity_GUIZTestMode]Blend SrcAlpha OneMinusSrcAlphaColorMask [_ColorMask]Pass{Name "Default"CGPROGRAM#pragma vertex vert#pragma fragment frag#pragma target 3.0#include "UnityCG.cginc"#include "UnityUI.cginc"#pragma multi_compile __ UNITY_UI_CLIP_RECT#pragma multi_compile __ UNITY_UI_ALPHACLIP#include "UnityShaderVariables.cginc"#define ASE_NEEDS_FRAG_COLORstruct appdata_t{float4 vertex   : POSITION;float4 color    : COLOR;float2 texcoord : TEXCOORD0;UNITY_VERTEX_INPUT_INSTANCE_ID};struct v2f{float4 vertex   : SV_POSITION;fixed4 color    : COLOR;half2 texcoord  : TEXCOORD0;float4 worldPosition : TEXCOORD1;UNITY_VERTEX_INPUT_INSTANCE_IDUNITY_VERTEX_OUTPUT_STEREO};uniform fixed4 _Color;uniform fixed4 _TextureSampleAdd;uniform float4 _ClipRect;uniform sampler2D _MainTex;uniform sampler2D _noiseTex;uniform sampler2D _normalTex;uniform float4 _normalTex_ST;uniform float _Size;uniform float2 _dir;uniform float2 _strength;uniform float _speed;uniform float4 _MainTex_ST;v2f vert( appdata_t IN  ){v2f OUT;UNITY_SETUP_INSTANCE_ID( IN );UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);UNITY_TRANSFER_INSTANCE_ID(IN, OUT);OUT.worldPosition = IN.vertex;OUT.worldPosition.xyz +=  float3( 0, 0, 0 ) ;OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);OUT.texcoord = IN.texcoord;OUT.color = IN.color * _Color;return OUT;}fixed4 frag(v2f IN  ) : SV_Target{float2 texCoord13 = IN.texcoord.xy * float2( 1,1 ) + float2( 0,0 );float2 uv_normalTex = IN.texcoord.xy * _normalTex_ST.xy + _normalTex_ST.zw;float2 temp_output_4_0_g2 = (( ( float3( texCoord13 ,  0.0 ) * UnpackNormal( tex2D( _normalTex, uv_normalTex ) ) ).xy / _Size )).xy;float2 temp_output_41_0_g2 = ( _dir + 0.5 );float2 temp_output_17_0_g2 = _strength;float mulTime22_g2 = _Time.y * _speed;float temp_output_27_0_g2 = frac( mulTime22_g2 );float2 temp_output_11_0_g2 = ( temp_output_4_0_g2 + ( temp_output_41_0_g2 * temp_output_17_0_g2 * temp_output_27_0_g2 ) );float2 temp_output_12_0_g2 = ( temp_output_4_0_g2 + ( temp_output_41_0_g2 * temp_output_17_0_g2 * frac( ( mulTime22_g2 + 0.5 ) ) ) );float3 lerpResult9_g2 = lerp( UnpackNormal( tex2D( _noiseTex, temp_output_11_0_g2 ) ) , UnpackNormal( tex2D( _noiseTex, temp_output_12_0_g2 ) ) , ( abs( ( temp_output_27_0_g2 - 0.5 ) ) / 0.5 ));float2 uv_MainTex = IN.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;float4 tex2DNode3 = tex2D( _MainTex, uv_MainTex );float3 appendResult27 = (float3(tex2DNode3.rgb));float3 appendResult28 = (float3(IN.color.rgb));float4 appendResult22 = (float4(( ( lerpResult9_g2 * IN.color.a ) + ( appendResult27 * appendResult28 ) ) , tex2DNode3.a));half4 color = appendResult22;#ifdef UNITY_UI_CLIP_RECTcolor.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);#endif#ifdef UNITY_UI_ALPHACLIPclip (color.a - 0.001);#endifreturn color;}ENDCG}}CustomEditor "ASEMaterialInspector"}
/*ASEBEGIN
Version=18500
259;12;1661;1007;2369.394;1093.456;2.028551;True;True
Node;AmplifyShaderEditor.TextureCoordinatesNode;13;-1598.555,-479.9796;Inherit;False;0;-1;2;3;2;SAMPLER2D;;False;0;FLOAT2;1,1;False;1;FLOAT2;0,0;False;5;FLOAT2;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.TemplateShaderPropertyNode;2;-1023.386,50.42144;Inherit;False;0;0;_MainTex;Shader;0;5;SAMPLER2D;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.SamplerNode;14;-1576.524,-302.3614;Inherit;True;Property;_normalTex;normalTex;0;0;Create;True;0;0;False;0;False;-1;0bebe40e9ebbecc48b8e9cfea982da7e;0bebe40e9ebbecc48b8e9cfea982da7e;True;0;True;bump;Auto;True;Object;-1;Auto;Texture2D;8;0;SAMPLER2D;;False;1;FLOAT2;0,0;False;2;FLOAT;0;False;3;FLOAT2;0,0;False;4;FLOAT2;0,0;False;5;FLOAT;1;False;6;FLOAT;0;False;7;SAMPLERSTATE;;False;5;FLOAT3;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.VertexColorNode;4;-704.494,288.5937;Inherit;False;0;5;COLOR;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.SimpleMultiplyOpNode;18;-1240.182,-471.6718;Inherit;False;2;2;0;FLOAT2;0,0;False;1;FLOAT3;0,0,0;False;1;FLOAT3;0
Node;AmplifyShaderEditor.TexturePropertyNode;19;-1079.893,-642.5373;Inherit;True;Property;_noiseTex;noiseTex;4;0;Create;True;0;0;False;0;False;e28dc97a9541e3642a48c0e3886688c5;cd460ee4ac5c1e746b7a734cc7cc64dd;False;white;Auto;Texture2D;-1;0;2;SAMPLER2D;0;SAMPLERSTATE;1
Node;AmplifyShaderEditor.SamplerNode;3;-806.93,36.96289;Inherit;True;Property;_TextureSample0;Texture Sample 0;0;0;Create;True;0;0;False;0;False;-1;None;None;True;0;False;white;Auto;False;Object;-1;Auto;Texture2D;8;0;SAMPLER2D;;False;1;FLOAT2;0,0;False;2;FLOAT;0;False;3;FLOAT2;0,0;False;4;FLOAT2;0,0;False;5;FLOAT;1;False;6;FLOAT;0;False;7;SAMPLERSTATE;;False;5;COLOR;0;FLOAT;1;FLOAT;2;FLOAT;3;FLOAT;4
Node;AmplifyShaderEditor.Vector2Node;15;-1132.393,-263.3424;Inherit;False;Property;_strength;strength;7;0;Create;True;0;0;False;0;False;1,1;1,1;0;3;FLOAT2;0;FLOAT;1;FLOAT;2
Node;AmplifyShaderEditor.Vector2Node;17;-1152.206,-374.9799;Inherit;False;Property;_dir;dir;6;0;Create;True;0;0;False;0;False;0,-1;0,-1;0;3;FLOAT2;0;FLOAT;1;FLOAT;2
Node;AmplifyShaderEditor.RangedFloatNode;16;-1040.738,-127.9429;Inherit;False;Property;_speed;speed;5;0;Create;True;0;0;False;0;False;1;1;0;0;0;1;FLOAT;0
Node;AmplifyShaderEditor.DynamicAppendNode;27;-483.9323,32.2692;Inherit;False;FLOAT3;4;0;FLOAT3;0,0,0;False;1;FLOAT;0;False;2;FLOAT;0;False;3;FLOAT;0;False;1;FLOAT3;0
Node;AmplifyShaderEditor.FunctionNode;12;-799.0388,-335.9053;Inherit;False;Flow;1;;2;acad10cc8145e1f4eb8042bebe2d9a42;2,50,1,51,1;5;5;SAMPLER2D;;False;2;FLOAT2;0,0;False;18;FLOAT2;0,0;False;17;FLOAT2;1,1;False;24;FLOAT;0.2;False;1;FLOAT3;0
Node;AmplifyShaderEditor.DynamicAppendNode;28;-487.0394,256.8657;Inherit;False;FLOAT3;4;0;FLOAT3;0,0,0;False;1;FLOAT;0;False;2;FLOAT;0;False;3;FLOAT;0;False;1;FLOAT3;0
Node;AmplifyShaderEditor.SimpleMultiplyOpNode;21;-458.0888,-109.1593;Inherit;False;2;2;0;FLOAT3;0,0,0;False;1;FLOAT;0;False;1;FLOAT3;0
Node;AmplifyShaderEditor.SimpleMultiplyOpNode;5;-299.8992,74.58842;Inherit;False;2;2;0;FLOAT3;0,0,0;False;1;FLOAT3;0,0,0;False;1;FLOAT3;0
Node;AmplifyShaderEditor.SimpleAddOpNode;26;-144.8332,3.467314;Inherit;False;2;2;0;FLOAT3;0,0,0;False;1;FLOAT3;0,0,0;False;1;FLOAT3;0
Node;AmplifyShaderEditor.DynamicAppendNode;22;-26.98483,138.3909;Inherit;False;COLOR;4;0;FLOAT3;0,0,0;False;1;FLOAT;0;False;2;FLOAT;0;False;3;FLOAT;0;False;1;COLOR;0
Node;AmplifyShaderEditor.TemplateMultiPassMasterNode;0;222.6413,-34.4096;Float;False;True;-1;2;ASEMaterialInspector;0;4;UITest;5056123faa0c79b47ab6ad7e8bf059a4;True;Default;0;0;Default;2;True;2;5;False;-1;10;False;-1;0;1;False;-1;0;False;-1;False;False;False;False;False;False;False;False;True;2;False;-1;True;True;True;True;True;0;True;-9;False;False;False;True;True;0;True;-5;255;True;-8;255;True;-7;0;True;-4;0;True;-6;1;False;-1;1;False;-1;7;False;-1;1;False;-1;1;False;-1;1;False;-1;True;2;False;-1;True;0;True;-11;False;True;5;Queue=Transparent=Queue=0;IgnoreProjector=True;RenderType=Transparent=RenderType;PreviewType=Plane;CanUseSpriteAtlas=True;False;0;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;False;True;2;0;;0;0;Standard;0;0;1;True;False;;False;0
WireConnection;18;0;13;0
WireConnection;18;1;14;0
WireConnection;3;0;2;0
WireConnection;27;0;3;0
WireConnection;12;5;19;0
WireConnection;12;2;18;0
WireConnection;12;18;17;0
WireConnection;12;17;15;0
WireConnection;12;24;16;0
WireConnection;28;0;4;0
WireConnection;21;0;12;0
WireConnection;21;1;4;4
WireConnection;5;0;27;0
WireConnection;5;1;28;0
WireConnection;26;0;21;0
WireConnection;26;1;5;0
WireConnection;22;0;26;0
WireConnection;22;3;3;4
WireConnection;0;0;22;0
ASEEND*/
//CHKSM=3AEED58159A9C53960F5E6D1BBE33889B74E67E4

这篇关于Unity可视化Shader工具ASE介绍——8、UI类型的特效Shader编写的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/778481。

相关文章

使用jenv工具管理多个JDK版本的方法步骤

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,：本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的？二、jenv的核心功能（一）管理多个Java版本（二）支持插件扩展（三）环境隔
阅读更多...
MybatisPlus service接口功能介绍

MybatisPlus service接口功能介绍

《MybatisPlusservice接口功能介绍》：本文主要介绍MybatisPlusservice接口功能介绍,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录Service接口基本用法进阶用法总结：Lambda方法Service接口基本用法MyBATisP
阅读更多...
Python使用smtplib库开发一个邮件自动发送工具

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件
阅读更多...
MySQL复杂SQL之多表联查/子查询详细介绍(最新整理)

MySQL复杂SQL之多表联查/子查询详细介绍(最新整理)

《MySQL复杂SQL之多表联查/子查询详细介绍(最新整理)》掌握多表联查(INNERJOIN,LEFTJOIN,RIGHTJOIN,FULLJOIN)和子查询（标量、列、行、表子查询、相关/非相关、... 目录第一部分：多表联查 (JOIN Operations)1. 连接的类型 (JOIN Types)
阅读更多...
CnPlugin是PL/SQL Developer工具插件使用教程

CnPlugin是PL/SQL Developer工具插件使用教程

《CnPlugin是PL/SQLDeveloper工具插件使用教程》：本文主要介绍CnPlugin是PL/SQLDeveloper工具插件使用教程,具有很好的参考价值,希望对大家有所帮助,如有错... 目录PL/SQL Developer工具插件使用安装拷贝文件配置总结PL/SQL Developer工具插
阅读更多...
python编写朋克风格的天气查询程序

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt
阅读更多...
Python数据分析与可视化的全面指南(从数据清洗到图表呈现)

Python数据分析与可视化的全面指南(从数据清洗到图表呈现)

《Python数据分析与可视化的全面指南(从数据清洗到图表呈现)》Python是数据分析与可视化领域中最受欢迎的编程语言之一,凭借其丰富的库和工具,Python能够帮助我们快速处理、分析数据并生成高质... 目录一、数据采集与初步探索二、数据清洗的七种武器1. 缺失值处理策略2. 异常值检测与修正3. 数据
阅读更多...
MyBatis编写嵌套子查询的动态SQL实践详解

MyBatis编写嵌套子查询的动态SQL实践详解

《MyBatis编写嵌套子查询的动态SQL实践详解》在Java生态中,MyBatis作为一款优秀的ORM框架,广泛应用于数据库操作,本文将深入探讨如何在MyBatis中编写嵌套子查询的动态SQL,并结... 目录一、Myhttp://www.chinasem.cnBATis动态SQL的核心优势1. 灵活性与可
阅读更多...
java中BigDecimal里面的subtract函数介绍及实现方法

java中BigDecimal里面的subtract函数介绍及实现方法

《java中BigDecimal里面的subtract函数介绍及实现方法》在Java中实现减法操作需要根据数据类型选择不同方法,主要分为数值型减法和字符串减法两种场景,本文给大家介绍java中BigD... 目录Java中BigDecimal里面的subtract函数的意思？一、数值型减法（高精度计算）1.
阅读更多...
Pytorch介绍与安装过程

Pytorch介绍与安装过程

《Pytorch介绍与安装过程》PyTorch因其直观的设计、卓越的灵活性以及强大的动态计算图功能,迅速在学术界和工业界获得了广泛认可,成为当前深度学习研究和开发的主流工具之一,本文给大家介绍Pyto... 目录1、Pytorch介绍1.1、核心理念1.2、核心组件与功能1.3、适用场景与优势总结1.4、优
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2