unity5实现数字矩阵效果实现

高仿17大神的效果

该效果需要使用3张图片来实现：

这3张图片导入unity后先将格式修改为point.

新建一个plane和一个material 和一个shader，将shader赋值给该material，将该material赋值给plane

实现过程：

第一步 修改shader创建一个10*10个数字的图

代码：

Shader "张宇成yr/sikuoyi" {Properties {_Color ("Color", Color) = (1,1,1,1)_MainTex ("Albedo (RGB)", 2D) = "white" {}_Glossiness ("Smoothness", Range(0,1)) = 0.5_Metallic ("Metallic", Range(0,1)) = 0.0}SubShader {Tags { "RenderType"="Opaque" }LOD 200CGPROGRAM// Physically based Standard lighting model, and enable shadows on all light types#pragma surface surf Standard fullforwardshadows// Use shader model 3.0 target, to get nicer looking lighting#pragma target 3.0sampler2D _MainTex;struct Input {float2 uv_MainTex;};half _Glossiness;half _Metallic;fixed4 _Color;void surf (Input IN, inout SurfaceOutputStandard o) {            float2 uv_NumberTex=IN.uv_MainTex*float2(1,10);//更改的地方// Albedo comes from a texture tinted by colorfixed4 c = tex2D (_MainTex, uv_NumberTex) * _Color; //更改的地方o.Albedo = c.rgb;// Metallic and smoothness come from slider variableso.Metallic = _Metallic;o.Smoothness = _Glossiness;o.Alpha = c.a;}ENDCG} FallBack "Diffuse"}

解释一下， float2 uv_NumberTex=IN.uv_MainTex*float2(1,10); 是将uv在x方向不缩放, y方向缩小10倍.这样就能将一张显示1行10列的图变成10行10列的图。

第二步 修改shader，打乱数字的显示位置

代码：

Shader "张宇成yr/sikuoyi" {Properties {_Color ("Color", Color) = (1,1,1,1)_MainTex ("Albedo (RGB)", 2D) = "white" {}_RandomTex("RandomTex",2D)="white"{}  //定义随机图_Glossiness ("Smoothness", Range(0,1)) = 0.5_Metallic ("Metallic", Range(0,1)) = 0.0}SubShader {Tags { "RenderType"="Opaque" }LOD 200CGPROGRAM// Physically based Standard lighting model, and enable shadows on all light types#pragma surface surf Standard fullforwardshadows// Use shader model 3.0 target, to get nicer looking lighting#pragma target 3.0sampler2D _MainTex;sampler2D _RandomTex;  //定义随机图struct Input {float2 uv_MainTex;};half _Glossiness;half _Metallic;fixed4 _Color;void surf (Input IN, inout SurfaceOutputStandard o) {            float2 uv_NumberTex=IN.uv_MainTex*float2(1,10);float2 uv_RandomTex=IN.uv_MainTex/float2(6.4,6.4); //修改随机图的显示部分float  number=tex2D(_RandomTex,uv_RandomTex).r;   //获取指定位置的颜色rnumber=floor(number*10); //将颜色值转化为0-9uv_NumberTex+=float2(number/10,0);//修改要显示的图片每个点的位移// Albedo comes from a texture tinted by colorfixed4 c = tex2D (_MainTex, uv_NumberTex) * _Color;o.Albedo = c.rgb;// Metallic and smoothness come from slider variableso.Metallic = _Metallic;o.Smoothness = _Glossiness;o.Alpha = c.a;}ENDCG} FallBack "Diffuse"}

将赋值给_RandomTex.

解释:上图是一个64*64个像素点的图，需要将他变成一个10*10个像素点的图来对应10*10的数字图片来达到随机显示效果就必须缩放该图的uv，

方式是float2 uv_RandomTex=IN.uv_MainTex/float2(6.4,6.4);

接着读取对应点的颜色，将颜色改为数字，修改数字图片的位移。

第三步，修改shader，让每列数字以不同的速度流动

代码:

Shader "张宇成yr/sikuoyi" {Properties {_Color ("Color", Color) = (1,1,1,1)_MainTex ("Albedo (RGB)", 2D) = "white" {}_RandomTex("RandomTex",2D)="white"{}  _Glossiness ("Smoothness", Range(0,1)) = 0.5_Metallic ("Metallic", Range(0,1)) = 0.0}SubShader {Tags { "RenderType"="Opaque" }LOD 200CGPROGRAM// Physically based Standard lighting model, and enable shadows on all light types#pragma surface surf Standard fullforwardshadows// Use shader model 3.0 target, to get nicer looking lighting#pragma target 3.0sampler2D _MainTex;sampler2D _RandomTex;  struct Input {float2 uv_MainTex;};half _Glossiness;half _Metallic;fixed4 _Color;void surf (Input IN, inout SurfaceOutputStandard o) {            float2 uv_Speed=IN.uv_MainTex/float2(6.4,6.4)*float2(1,0);  //根据随机图生成一个0*10的一维速度图float speed=tex2D(_RandomTex,uv_Speed).r;   //获取随机图左下角前10个像素点的颜色，代表流动速度speed*=_Time.y;                             //让图片不停的移动            float2 uv_NumberTex=IN.uv_MainTex*float2(1,10);float2 uv_RandomTex=IN.uv_MainTex/float2(6.4,6.4); uv_RandomTex+=float2(0,speed/6.4);              //让图片随机变换的uv随着时间向下移动float  number=tex2D(_RandomTex,uv_RandomTex).r;   number=floor(number*10); uv_NumberTex+=float2(number/10,0);uv_NumberTex+=float2(0,speed*10);              //让显示图片的uv随着时间向下移动// Albedo comes from a texture tinted by colorfixed4 c = tex2D (_MainTex, uv_NumberTex) * _Color;o.Albedo = c.rgb;// Metallic and smoothness come from slider variableso.Metallic = _Metallic;o.Smoothness = _Glossiness;o.Alpha = c.a;}ENDCG} FallBack "Diffuse"}

解释:

这是最难理解的地方，速度依然用随机图表示

首先第一句代码:float2 uv_Speed=IN.uv_MainTex/float2(6.4,6.4)*float2(1,0);的含义是将随机图（64*64）先变成10*10个像素点的图,然后在变成10*1个像素点的一维图用来表示速度图的uv

接着 第二句代码是根据uv_Speed读取随机图，获取y方向的速度。 第三句代码是速度*时间得到当前其他uv需要位移的路程（伪）.

但是不能直接给uv_RandomTex和uv_NumberTex直接加上float2（0，speed）表示随时间移动，因为uv_RandomTex和uv_NumberTex都是经过缩放的uv，需要对speed进行相同程度的变化，才能赋值给uv_RandomTex和uv_NumberTex. 最后不同的速度代码为uv_RandomTex+=float2(0,speed/6.4);   和uv_NumberTex+=float2(0,speed*10);

第四步，修改shader，让图片透明

我不会配置透明参数，这里就是粗略的Blend One One

代码如下:

Shader "张宇成yr/sikuoyi" {Properties {_Color ("Color", Color) = (1,1,1,1)_MainTex ("Albedo (RGB)", 2D) = "white" {}_RandomTex("RandomTex",2D)="white"{}  _Glossiness ("Smoothness", Range(0,1)) = 0.5_Metallic ("Metallic", Range(0,1)) = 0.0}SubShader {Tags { "RenderType"="Transparent" } //设置为透明LOD 200Blend One One  //控制透明参数CGPROGRAM// Physically based Standard lighting model, and enable shadows on all light types#pragma surface surf Standard fullforwardshadows// Use shader model 3.0 target, to get nicer looking lighting#pragma target 3.0sampler2D _MainTex;sampler2D _RandomTex;  struct Input {float2 uv_MainTex;};half _Glossiness;half _Metallic;fixed4 _Color;void surf (Input IN, inout SurfaceOutputStandard o) {            float2 uv_Speed=IN.uv_MainTex/float2(6.4,6.4)*float2(1,0);  float speed=tex2D(_RandomTex,uv_Speed).r;   speed*=_Time.y;                                         float2 uv_NumberTex=IN.uv_MainTex*float2(1,10);float2 uv_RandomTex=IN.uv_MainTex/float2(6.4,6.4); uv_RandomTex+=float2(0,speed/6.4);             float  number=tex2D(_RandomTex,uv_RandomTex).r;   number=floor(number*10); uv_NumberTex+=float2(number/10,0);uv_NumberTex+=float2(0,speed*10);              // Albedo comes from a texture tinted by colorfixed4 c = tex2D (_MainTex, uv_NumberTex) * _Color;o.Albedo = c.rgb;// Metallic and smoothness come from slider variableso.Metallic = _Metallic;o.Smoothness = _Glossiness;o.Alpha = c.a;}ENDCG} FallBack "Diffuse"}

第五步 变成绿色和不同透明度

代码:

Shader "张宇成yr/sikuoyi" {Properties {_Color ("Color", Color) = (1,1,1,1)_MainTex ("Albedo (RGB)", 2D) = "white" {}_RandomTex("RandomTex",2D)="white"{}  _FlowingTex("FlowingTex",2D)="white"{} //流动图_Glossiness ("Smoothness", Range(0,1)) = 0.5_Metallic ("Metallic", Range(0,1)) = 0.0}SubShader {Tags { "RenderType"="Transparent" } LOD 200Blend One One  CGPROGRAM// Physically based Standard lighting model, and enable shadows on all light types#pragma surface surf Standard fullforwardshadows// Use shader model 3.0 target, to get nicer looking lighting#pragma target 3.0sampler2D _MainTex;sampler2D _RandomTex;  sampler2D _FlowingTex; //流动图struct Input {float2 uv_MainTex;};half _Glossiness;half _Metallic;fixed4 _Color;void surf (Input IN, inout SurfaceOutputStandard o) {    float3 green=float3(0,1,0);                              //定义一个绿色            float2 uv_FlowingTex=IN.uv_MainTex/float2(25.6,25.6);//定义一个10*10的流动图float2 uv_Speed=IN.uv_MainTex/float2(6.4,6.4)*float2(1,0);  float speed=tex2D(_RandomTex,uv_Speed).r;   speed*=_Time.y;                             uv_FlowingTex+=float2(0,speed/25.6);//让流动图的uv 的y方向 不停地向上移动float alpha=tex2D(_FlowingTex,uv_FlowingTex).g;//获取颜色的g通道代表移动速度            float2 uv_NumberTex=IN.uv_MainTex*float2(1,10);float2 uv_RandomTex=IN.uv_MainTex/float2(6.4,6.4); uv_RandomTex+=float2(0,speed/6.4);             float  number=tex2D(_RandomTex,uv_RandomTex).r;   number=floor(number*10); uv_NumberTex+=float2(number/10,0);uv_NumberTex+=float2(0,speed*10);              // Albedo comes from a texture tinted by colorfixed4 c = tex2D (_MainTex, uv_NumberTex) * _Color;o.Albedo = c.rgb*green*alpha; //让不同位置颜色深度不同// Metallic and smoothness come from slider variableso.Metallic = _Metallic;o.Smoothness = _Glossiness;o.Alpha = c.a;}ENDCG} FallBack "Diffuse"}

第六步 移动过程中变化

代码:

Shader "张宇成yr/sikuoyi" {Properties {_Color ("Color", Color) = (1,1,1,1)_MainTex ("Albedo (RGB)", 2D) = "white" {}_RandomTex("RandomTex",2D)="white"{}  _FlowingTex("FlowingTex",2D)="white"{} _Glossiness ("Smoothness", Range(0,1)) = 0.5_Metallic ("Metallic", Range(0,1)) = 0.0}SubShader {Tags { "RenderType"="Transparent" } LOD 200Blend One One  CGPROGRAM// Physically based Standard lighting model, and enable shadows on all light types#pragma surface surf Standard fullforwardshadows// Use shader model 3.0 target, to get nicer looking lighting#pragma target 3.0sampler2D _MainTex;sampler2D _RandomTex;  sampler2D _FlowingTex; struct Input {float2 uv_MainTex;};half _Glossiness;half _Metallic;fixed4 _Color;void surf (Input IN, inout SurfaceOutputStandard o) {    float3 green=float3(0,1,0);                                         float2 uv_FlowingTex=IN.uv_MainTex/float2(25.6,25.6);float2 uv_Speed=IN.uv_MainTex/float2(6.4,6.4)*float2(1,0);  float speed=tex2D(_RandomTex,uv_Speed).r;   speed*=_Time.y;                             uv_FlowingTex+=float2(0,speed/25.6);float alpha=tex2D(_FlowingTex,uv_FlowingTex).g;            float2 uv_NumberTex=IN.uv_MainTex*float2(1,10);float2 uv_RandomTex=IN.uv_MainTex/float2(6.4,6.4); float  number_X=floor(speed*10)/10/6.4;            //.........uv_RandomTex+=float2(number_X,speed/6.4);          //uv_RandomTex将在x方向从左至右每秒位移一个数字单位(1/10)        float  number=tex2D(_RandomTex,uv_RandomTex).r;   number=floor(number*10); uv_NumberTex+=float2(number/10,0);uv_NumberTex+=float2(0,speed*10);              // Albedo comes from a texture tinted by colorfixed4 c = tex2D (_MainTex, uv_NumberTex) * _Color;o.Albedo = c.rgb*green*alpha;// Metallic and smoothness come from slider variableso.Metallic = _Metallic;o.Smoothness = _Glossiness;o.Alpha = c.a;}ENDCG} FallBack "Diffuse"}

第七步 用tex2Dlod替代tex2D,消除边框(我不懂为什么)

Shader "张宇成yr/sikuoyi" {Properties {_Color ("Color", Color) = (1,1,1,1)_MainTex ("Albedo (RGB)", 2D) = "white" {}_RandomTex("RandomTex",2D)="white"{}  _FlowingTex("FlowingTex",2D)="white"{} _Glossiness ("Smoothness", Range(0,1)) = 0.5_Metallic ("Metallic", Range(0,1)) = 0.0}SubShader {Tags { "RenderType"="Transparent" } LOD 200Blend One One  CGPROGRAM// Physically based Standard lighting model, and enable shadows on all light types#pragma surface surf Standard fullforwardshadows// Use shader model 3.0 target, to get nicer looking lighting#pragma target 3.0sampler2D _MainTex;sampler2D _RandomTex;  sampler2D _FlowingTex; struct Input {float2 uv_MainTex;};half _Glossiness;half _Metallic;fixed4 _Color;void surf (Input IN, inout SurfaceOutputStandard o) {    float3 green=float3(0,1,0);                                         float2 uv_FlowingTex=IN.uv_MainTex/float2(25.6,25.6);float2 uv_Speed=IN.uv_MainTex/float2(6.4,6.4)*float2(1,0);  float speed=tex2D(_RandomTex,uv_Speed).r;   speed*=_Time.y;                             uv_FlowingTex+=float2(0,speed/25.6);float alpha=tex2D(_FlowingTex,uv_FlowingTex).g;            float2 uv_NumberTex=IN.uv_MainTex*float2(1,10);float2 uv_RandomTex=IN.uv_MainTex/float2(6.4,6.4); float  number_X=floor(speed*10)/10/6.4;            uv_RandomTex+=float2(number_X,speed/6.4);            float  number=tex2D(_RandomTex,uv_RandomTex).r;   number=floor(number*10); uv_NumberTex+=float2(number/10,0);uv_NumberTex+=float2(0,speed*10);              // Albedo comes from a texture tinted by colorfixed4 c = tex2Dlod(_MainTex, float4(uv_NumberTex,0,0)) * _Color;o.Albedo = c.rgb*green*alpha;// Metallic and smoothness come from slider variableso.Metallic = _Metallic;o.Smoothness = _Glossiness;o.Alpha = c.a;}ENDCG} FallBack "Diffuse"}

最终代码如上,自我感觉比17大神简洁一些些O(∩_∩)O哈哈~