Unity3d如何实现UGUI.Text的UV流动效果

一.实现简单的Text+贴图效果

我们先效果如下：

原理：

UGUI的Text和Image本身就支持Material，我们添加PositionAsUV组件，让Text识别到UV变化就行，然后接下来就是我们给材质添加一张贴图就行了。

1.创建一个Text文本框，调整合适的大小，填写测试文字
2.添加Position As UV1组件,给Text加材质比加组件
3.创建Material材质，附加shader:UI/Unlit/Text Detail
4.给Text的Material属性赋值材质。
5.给材质添加Detail(RGB)贴图，自定义
6.设置Canvas的Additional Shader Channles 选中TexCoord1

随着我们修改Text的大小，我们可以看到纹理的UV会变化，这些就是Position As UV1组件的作用，他会根据Text中字体的位置修改UV坐标

二.实现Text+贴图炫光流动

原理

和上面原理相同，只不过我们稍微修改下系统的TextDetail.shader
功能添加：

1.添加一个NoiseTex 噪波扰动图，
2.使用Time,修改NoiseTex的UV，然后传递给DetialTex，使图片的UV流动。
效果如下：

shader代码如下：

// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'Shader "UI/Unlit/Custom Text Detail"
{Properties{[PerRendererData]_MainTex ("Alpha (A)", 2D) = "white" {}[PerRendererData]_Color ("Main Color", Color) = (1,1,1,1)_DetailTex ("Detail (RGB)", 2D) = "white" {}_detail_panner_u ("tex01_panner_u", Float ) = 0_detail_panner_v ("tex01_panner_v", Float ) = 0_detail_strong ("tex01_strong", Range(0.0, 1.0)) = 1_NoiseTex ("Noise (R)", 2D) = "white" {}_noise_strong ("tex02_strong", Float ) = 1_noise_panner_u ("tex02_panner_u", Float ) = 0_noise_panner_v ("tex02_panner_v", Float ) = 0_flow_color("flow_color", Color) = (1,1,1,1)_flow_strong("flow_strong", Float) = 1[hideinInspector]_StencilComp ("Stencil Comparison", Float) = 8[hideinInspector]_Stencil ("Stencil ID", Float) = 0[hideinInspector]_StencilOp ("Stencil Operation", Float) = 0[hideinInspector]_StencilWriteMask ("Stencil Write Mask", Float) = 255[hideinInspector]_StencilReadMask ("Stencil Read Mask", Float) = 255[hideinInspector]_ColorMask ("Color Mask", Float) = 15}SubShader{LOD 200Tags{"Queue" = "Transparent""IgnoreProjector" = "True""RenderType" = "Transparent""PreviewType"="Plane"}Stencil{Ref [_Stencil]Comp [_StencilComp]Pass [_StencilOp] ReadMask [_StencilReadMask]WriteMask [_StencilWriteMask]}Cull OffLighting OffZWrite OffZTest [unity_GUIZTestMode]Offset -1, -1Blend one OneMinusSrcAlphaColorMask [_ColorMask]Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata_t{float4 vertex : POSITION;float2 texcoord : TEXCOORD0;float2 texcoord2 : TEXCOORD1;fixed4 color : COLOR;};struct v2f{float4 vertex : POSITION;float2 texcoord : TEXCOORD0;float2 texcoord2 : TEXCOORD1;fixed4 color : COLOR;};sampler2D _MainTex;sampler2D _DetailTex;sampler2D _NoiseTex; float4 _MainTex_ST;float4 _DetailTex_ST;float4 _NoiseTex_ST;float4 _DetailTex_TexelSize;fixed4 _Color;fixed _detail_strong;fixed _noise_strong;fixed _detail_panner_u;fixed _detail_panner_v;fixed _noise_panner_u;fixed _noise_panner_v;fixed4 _flow_color;fixed _flow_strong;v2f vert (appdata_t v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);o.texcoord2 = TRANSFORM_TEX(v.texcoord2 * _DetailTex_TexelSize.xy, _DetailTex);o.color = v.color;return o;}half4 frag (v2f i) : COLOR{half4 col = i.color*_Color;float2 dist_uv = i.texcoord2+(_Time.g*float2(_noise_panner_u,_noise_panner_u));float4 noise = tex2D(_NoiseTex,TRANSFORM_TEX(dist_uv, _NoiseTex));float2 detail_uv = i.texcoord2+_Time.g*float2(_detail_panner_u,_detail_panner_v)+noise.r*_noise_strong;fixed4 detail = tex2D(_DetailTex, detail_uv) + noise.r*_flow_color*_flow_strong;col.rgb = lerp(col.rgb, col.rgb * detail.rgb, detail.a * _detail_strong);col.a *= tex2D(_MainTex, i.texcoord).a;clip (col.a - 0.01);return col;}ENDCG}}
}

好了，这篇文章就到这里，希望对你有所帮助

Unity3d如何实现UGUI.Text的UV流动效果相关推荐

在Unity3D中使用uGUI实现3D旋转特效
各位朋友大家好,欢迎大家关注我的博客,我是Payne,我的博客地址是http://qinyuanpei.com.最近一位朋友问我,如何在Unity引擎中实现类似<英雄联盟>中选择皮肤时 ...
UGUI Text行首标点处理
UGUI Text 标点在行首怎么处理? 处理前处理后代码: private Text text;private void Start(){text = GetComponent<Text& ...
【游戏开发实战】Unity UGUI Text图文混排（聊天文字混表情），支持动态表情，出招吧表情帝
文章目录一.前言二.最终效果三.具体使用 1.导入表情素材 2.设置图片格式 3.生成表情图集 4.UI-EmojiFont.shader 5.材质球四.测试五.结束语一.前言点关注不迷 ...
Unity UGUI Text 首行缩进，空白字符
Unity UGUI Text 首行缩进,空白字符: 在text中需要空格的地方加入 <color=#FFFFFF00>缩进就可以了,需要空几格就将"缩进"改为几个字 ...
UGUI——Text文字不清晰or有毛边儿
文章目录一.放大Text的尺寸.字体,缩小相应倍数的比例 1. 数据对比: 2.效果对比: 3.注意: 二.土方法:复制Text本身,重叠多个三.用TextMeshPro方式解决建中文字体踩坑 ...
Unity学习笔记（四）——UV流动与UV扭曲
今天所学习的内容为UV流动与UV扭曲,首次接触时间的变换. 一.UV流动 1. 声明面板参数 2. 引入一个新变量 _Time,时间为一个四位向量,为描述场景加载开始后所经过的时间,4个分量的值为(t ...
庄懂技术美术入门课笔记_L15_特效动态实现方式（UV流动UV扰动）
庄懂技术美术入门课笔记_L15_特效动态实现方式(UV流动&UV扰动) 概述 1.排序问题 2.Alpha通道预乘问题 UV流动 1.演示:GhostFlow 2.代码 UV扰动 1.演示:G ...
HT for Web中3D流动效果的实现与应用
流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向.流速和温度等指标. 如今企业数据中心机房普遍面临着设备散 ...
svg实现文字笔画流动效果
背景: 前段时间着手某一项目时UI提出实现文字笔画流动效果的需求,故在github和gitee上寻找灵感,最后从一位学长的项目中找到了实现方法,感觉收获颇多,特此记录. 解决方案: 搭建svg基本的h ...

Unity3d如何实现UGUI.Text的UV流动效果

一.实现简单的Text+贴图效果

原理：

二.实现Text+贴图炫光流动

原理

Unity3d如何实现UGUI.Text的UV流动效果相关推荐

最新文章

热门文章