Scrolling textures by modifying UV values

One of the most common texture techniques used in today's game industry is the process of allowing you to scroll the textures over the surface of an object. This allows you to create effects such as waterfalls, rivers, lava flows, and so on. It's also a technique that is the basis to create animated sprite effects, but we will cover this in a subsequent recipe of this chapter. Let's first see how we will create a simple scrolling effect in a Surface Shader.

Getting ready

To begin this recipe, you will need to create a new shader file and material. This will set us up with a nice clean shader that we can use to study the scrolling effect by itself.

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 {
     _MainTint ("Diffuse Tint", Color) = (1,1,1,1)
     _MainTex ("Base (RGB)", 2D) = "white" {}
     _ScrollXSpeed ("X Scroll Speed", "Range(0,10)) = 2
     _ScrollYSpeed ("Y Scroll Speed", "Range(0,10)) = 2
   }

2. Modify the Cg properties in the CGPROGRAM section and create new variables so that we can access the values from our properties:

   fixed4 _MainTint;
   fixed _ScrollXSpeed;
   fixed _ScrollYSpeed;
   sampler2D _MainTex;

3. 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 SurfaceOutput 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 * _MainTint;
     o.Alpha = c.a;
   }

The following image demonstrates the result of utilizing the scrolling UV system to create a simple river motion for your environments. You can notice this effect in the scene called ScrollingUVs from the code files provided with this book:

How it works…

The scrolling system starts with the declaration of a couple of properties, which will allow the user of this shader to increase or decrease the speed of the scrolling effect itself. At their core, they are float values being passed from the material's Inspector tab to the surface function of the shader. For more information on shader properties, see Chapter 1, Creating Your First Shader.

Once we have these float values from the material's Inspector tab, we can use them to offset our UV values in the shader.

To begin this process, we first store the UVs in a separate variable called scrolledUV. This variable has to be float2/fixed2 because the UV values are being passed to us from the Input structure:

struct Input
{
  float2 uv_MainTex;
}

Once we have access to the mesh's UVs, we can offset them using our scroll speed variables and built-in _Time variable. This built-in variable returns a variable of the float4 type, meaning that each component of this variable contains different values of time as it pertains to game time.

A complete description of these inpidual time values are described at the following link: http://docs.unity3d.com/Manual/SL-UnityShaderVariables.html

This _Time variable will give us an incremented float value based on Unity's game time clock. So, we can use this value to move our UVs in a UV direction and scale that time with our scroll speed variables:

// 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;

With the correct offset being calculated by time, we can add the new offset value back to the original UV position. This is why we are using the += operator in the next line. We want to take the original UV position, add the new offset value, and then pass this to the tex2D() function as the texture's new UVs. This creates the effect of the texture moving on the surface. We are really manipulating the UVs, so we are faking the effect of the texture moving:

scrolledUV += fixed2(xScrollValue, yScrollValue);
half4 c = tex2D (_MainTex, scrolledUV);