How to do it...

To begin with, we will launch our new shader file that we just created and enter the code mentioned in the following steps:

  1. The shader will need two new properties that will allow us to control the speed of the texture scrolling. So, let's add a speed property for the X direction and a speed property for the Y direction, as shown in the following code:
Properties {
_Color ("Color", Color) = (1,1,1,1)
_MainTex ("Albedo (RGB)", 2D) = "white" {}
_ScrollXSpeed ("X Scroll Speed", Range(0,10)) = 2
_ScrollYSpeed ("Y Scroll Speed", Range(0,10)) = 2
}
  1. When working in ShaderLab, Properties has a syntax that looks like the following:
Properties
{
_propertyName("Name in Inspector", Type) = value
}

Each property contained in the Properties block first has a name that is used in code to refer to the object, here specified as _propertyName. The underscore isn't required but is a common standard in place. Inside the parenthesis, you'll see two parameters. The first is a string that defines what text will be displayed in the Inspector for what this property is. The second parameter is the type of data we wish to store.

In our case, for the X and Y Scroll Speed, we are creating a number with a possible Range from 0 to 10. Lastly, we can initialize the property with a default value which is done on the end. As we've seen before, these properties will show up in the Inspector if you select a material that is using this shader.

For more information on Properties and how to create them, check out https://docs.unity3d.com/Manual/SL-Properties.html.

For this example, we don't need the Smoothness or Metallic properties, so we can remove them as well.

  1. Modify the Cg properties in the CGPROGRAM section above the definition of _MainTex and create new variables so that we can access the values from our properties:
fixed _ScrollXSpeed; 
fixed _ScrollYSpeed; 
sampler2D _MainTex; 
  1. We also need to remove the _Glossiness and _Metallic definitions as we are not using them anymore.
  2. Modify the surface function to change the UVs given to the tex2D() function. Then, use the built-in _Time variable to animate the UVs over time when the Play button is pressed in the editor:
void surf (Input IN, inout SurfaceOutputStandard o) {
// Create a separate variable to store our UVs
// before we pass them to the tex2D() function
fixed2 scrolledUV = IN.uv_MainTex;

// Create variables that store the inpidual x and y
// components for the UV's scaled by time
fixed xScrollValue = _ScrollXSpeed * _Time;
fixed yScrollValue = _ScrollYSpeed * _Time;

// Apply the final UV offset
scrolledUV += fixed2(xScrollValue, yScrollValue);

// Apply textures and tint
half4 c = tex2D(_MainTex, scrolledUV);
o.Albedo = c.rgb * _Color;
o.Alpha = c.a;
}
  1. Once the script is finished, save it and then go back to the Unity editor. Go to the Materials folder and assign ScrollingUVsMat to use our ScrollingUVs shader. Once that is done, under the Albedo (RGB) property, drag and drop the water texture from the example code provided with this book to assign the property:
  1. After this is created, we need to create an object that can use the shader. From a new scene, go ahead and select GameObject | 3D Object | Plane and drag and drop the ScrollingUVMat material onto it.
  1. Once applied, go ahead and play the game to see the shader in action:

While it's not visible in this still image, you will notice that in the Unity editor, the object will now move in both the X and Y axes! Feel free to drag the X Scroll Speed and Y Scroll Speed properties in the Inspector tab to see how the changes affect how the object moves. Also, feel free to move the camera to make it easier to see if you would like.

If you modify a variable on a Material during gameplay, the value will stay changed, unlike how Unity typically works.

Pretty cool! With this knowledge, we can take this concept much further to create interesting visual effects. The following screenshot demonstrates the result of utilizing the scrolling UV system with multiple materials in order to create a simple river motion for your environments: