Can a texture's UV coordinates be animated (scrolled) when part of a SpriteSheet?

Question

Alright so my question is about texture manipulation in Flash Stage3D / Context3D using AGAL for the shader language. But I'm pretty sure this could be applicable in other situations involving GPU programming.

So the goal is, if I wish to have a "scrolling" animation on a certain tile (like a tile of water), can I still have that texture packed along with all the rest of my sprite assets? Or does it have to be alone to avoid bleeding nearby assets?

From what I can understand, when the FragmentShader samples the portion of the texture offsetted during a scroll animation, any coordinates outside the desired texture will reveal incorrect nearby textures.

Some example to clarify:

• Fluid motion (lava, water waves, acid bubbles);
• Background motion (cloud, trees, houses);
• Directional indicators (lines on a conveyor belt, race-circuit dash regions);

Do I need to use some extra operations to wrap the texture if it tries to sample beyond a certain point? How could those constraints be defined / transferred to the FragmentShader?

- UPDATE -

To clarify, I would like to scroll only on 1 single tile that would be part of a SpriteSheet / TextureAtlas (meaning, mixed with other existing sprites part of a game / project).

Imagine you had something like this (but better artwork, of course):

So a 256 x 256 Texture with a "Wavy Water" tile in the top-left corner (128 x 128 in dimensions).

How would you write a shader that can scroll through ONLY the water portion to give a sense of motion without running over the adjacent textures (ex: faces and cars).

How would you handle situations where the Quad is much larger than the texture and could repeat many times as well in combination to being able to scroll it?

Answer 1

As you've asked me, here's my short OpenGL answer. Might not be fully optimized, just sketching something for you now.

Lets assume you have your texture:

class Texture
{
    Int2 size;
}

And you have your quad:

class Quad
{
    Float3[4] vertices;
    Int2[4] iuvs;
    Float2[4] uvs;
    Texture texture;
}

Float 3 is:

class Float3
{
    float x, y, z;
}

Float 2 is:

class Float2
{
    float u,v;
}

Int2 is: class Int2 { int w, h; }

Lets throw up some theory of what we'll do.

As you know, in UV coordinates, 0 mean the the beginning of a coordinate, 1 mean the final.

So, 0.5, 0.5 will take half of your texture and stretch it on your quad. 1.0, 1.0 will take your full texture and stretch it on your quad.

Assume our texture size is 800x50. And our quad is positioned at 0,0 and its size is 50x50.
So vertices 1 = (0,0,0)
vertice 2 = (50,0,0)
vertice 3 = (50,50,0)
vertice 4 = (0,50,0)

That should be nothing new to you.

And we want the quad to take the relative part of the texture. So lets set the iuv to 50x50

quad.iuvs = Int2(50, 50);

The iuvs i'm just wanting to store it.

Lets make the uvs of the quad take the texture size of the actual quad. So divide to reach the exact size. uv 1 is 0 / 800, 0 / 50 -> (0, 0)
uv 2 is 50 / 800, 0 / 50 -> (0.0625, 0)
uv 3 is 50 / 800, 50 / 50 -> (0.0625, 1)
uv 4 is 0 / 800, 50 / 50 -> (0, 1)

That give us a function!

Quad::SetUV()
{
    for(int i = 0; i < 4; i++)
    {
        uvs[i] = Float2(iuv[i].w / texture.size.w, iuv[i].h / texture.size.h);
    }
}

Easy enough to make your quad get the first 50x50 of the texture :D

Now comes the tricky part!

As you can see, the texture width is much higher than the quad width. So lets see what we can do.

Scroll through an entire texture

On your quad, just call every frame

ScrollW()
{
    if(iuv[1].w >= texture.size.w)
    {
        iuv[0] = Int2(0, 0);
        iuv[1] = Int2(vertices[2].x, 0);
        iuv[2] = Int2(vertices[2].x, vertices[2].y);
        iuv[3] = Int2(0, vertices[2].y);
    }
    else
    {
        foreach(Int2 i in iuv)
        {
            i.w++;
        }
    }
    setUV();
}

Done! If the uv is covering a valid area of the texture, scroll right. If its alread on the final of the texture, go to start!

Now should be easy to implement others, as scroll as tiles of fixed size, etc.

Answer 2

Here is the idea & explanation behind how I created the tile scrolling UVs:

Making Scrollable Tiles with UV Offsets in Stage3D and AGAL

Basically, it involves creating a VertexBuffer filled with Vertex-Constant IDs to refer to when the vertex-shader executes and passes data to the fragment-shader. Depending how you set it up, there can be limitations as to how many tiles are scrolling in one draw pass, but should still be more than enough for most tile scrolling games / applications.