Ramp Texture Animation

Using a ramp texture to animate objects is a technique that I used a lot in Balance Board Racing. The triangles down the track, the boost pads, and the circular gate animations all use a ramp texture. These animations are different from normal animations in that the geometry of these models is static. The only thing changing about the models is their colors. In addition, the animated parts are all solid colors. Here is a closer view of a boost pad:

Description of the Technique

The main idea is to assign texture coordinates so that each separate part of the model has the same texture coordinate. For example, in the boost pad above, there are four separate parts. Each part has 6 vertices, and the vertices in each part all share the same texture coordinate. The 6 highlighted vertices in the image below all have the texture coordinate (0.03125, 0). The vertices in the next “>” shape all have the texture coordinate (0.0625, 0), and so on.

By making sure that all the vertices in the same shape have the same texture coordinate, we can guarantee that each part will be colored by one pixel of the ramp texture, and that entire part will be the same color. By sliding the ramp texture around, we can create a marquee-like effect on the model:
In the diagram above, the four colored dots on the ramp texture are the texture coordinates, and the colored dots on the model correspond to the texture coordinate of the vertices.

Implementation Details

There are a few ways to slide the ramp texture in Unity. One way to create an animated material by using the _Time variable inside a shader. If you do this, you won’t need a script to animate the material, but using multiple materials may increase draw calls.

Another way is to use a script to offset the texture of a material, which is what I did in Balance Board Racing. In my opinion, this is a bit easier. The script below offsets the main texture for most shaders in Unity.

public class SlideRampTexture : MonoBehaviour {

    public float speed;

    private Material m;
    void Start() {
        m = GetComponent().material;

    void Update() {
        Vector2 offset = new Vector2(-Time.time * speed % 1, 0);
        m.SetTextureOffset("_MainTex", offset);

The material that I used for the boost pad has the following settings:
The ramp texture is used in the emission property, and it is a 16 pixel wide image of a gradient.

Attaching the above script (with speed set to 2) to a boost pad with this material will result in an animation similar to this:

Unity Implementation

The scene containing the boost pad can be found on GitHub.