天天看點

Unity讓圖檔動起來

(1)其他文章實作

看知乎時,偶爾看到的,這個是利用flowmap來實作圖檔的運動。

原文章連結:添加連結描述

這個是UE的實作

https://blog.csdn.net/qq_37925032/article/details/102094280

添加連結描述

又找了一篇。

又找了一篇。

https://blog.csdn.net/u014361280/article/details/105376759?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158807381719725256739955%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.57660%2522%257D&request_id=158807381719725256739955&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-2allfirst_rank_v2~rank_v25-1

添加連結描述

(2)簡單代碼實作

8-15更新:

Shader "Unlit/ScrollING bachGroundBack"
{
	Properties{
		 _MainTex("Base Layer (RGB)", 2D) = "white" {}//背景紋理
		 _ScrollX("Base layer Scroll Speed", Float) = 1.0//滾動速度
		 _Multiplier("Layer Multiplier", Float) = 1//紋理的整體亮度
	}
		SubShader{
			Tags { "RenderType" = "Opaque" "Queue" = "Geometry"}

			Pass {
				Tags { "LightMode" = "ForwardBase" }

				CGPROGRAM

				#pragma vertex vert
				#pragma fragment frag

				#include "UnityCG.cginc"

				sampler2D _MainTex;//背景	
				float4 _MainTex_ST;
				float _ScrollX;//速度
				float _Multiplier;//亮度

				struct a2v {
					float4 vertex : POSITION;
					float4 texcoord : TEXCOORD0;
				};

				struct v2f {
					float4 pos : SV_POSITION;
					float4 uv : TEXCOORD0;
				};

				v2f vert(a2v v) {
					v2f o;
					o.pos = UnityObjectToClipPos(v.vertex);

					o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex) + frac(float2(_ScrollX, 0.0) * _Time.y);

					return o;
				}

				fixed4 frag(v2f i) : SV_Target{
					fixed4 firstLayer = tex2D(_MainTex, i.uv.xy);
				    fixed4 c = firstLayer;
					c.rgb *= _Multiplier;

					return c;
				}

				ENDCG
			}
		 }
			 FallBack "VertexLit"
}
           

之後即可實現該功能。

實現效果如下

Unity讓圖檔動起來

(3)腳本控制滾動速度實作

public class SHADERCONTROL : MonoBehaviour
{
    private Material _Meterial;
    public float scrollSpeed = 1;
    private void Start()
    {
        _Meterial = gameObject.GetComponent<MeshRenderer>().material;
    }
    private void Update()
    {
        _Meterial.SetFloat("_ScrollX", scrollSpeed);
    }
}

           

繼續閱讀