Question

Do forgive me if this has been asked before, I’ve been looking for the answer to this all day and all I’m coming up with is help with tile based 2D games. x~x

I’m trying to create a skinnable GUI in Direct3D 9, using an XML file that has positions for each element and an option to stretch or tile them. Stretching’s a simple enough procedure, but I’ve been unable to figure out a way to tile a small section of a texture. Traditionally to tile a texture I would just set the UV coordinates to > 1.0, but the source texture coordinates are only going to be a small subset of the whole texture, such as 0.4 to 0.5.

I have a feeling I missed something really obvious, but how would I go about simply tiling instead of stretching? My best guess is it has something to do with having more than one set of texture coordinates, but from there, I’m not sure where to go.

The project currently uses the fixed function pipeline, so I would prefer an answer using that if possible, but I would not turn down an answer that uses a shader if that’s the only way.

Answer 1

I understand you want to tile only a subset of the texture, right? Then things get complicated.

Assume we want to tile u-coord between u1 and u2 values, u1 < u2.

Then we need a function f(u), so that

f(0.0) = u1
f(0.5) = (u1+u2)/2
f(0.9999) = u2
f(1.0) = u1
f(1.5) = (u1+u2)/2
f(1.9999) = u2
f(2.0) = u1
and so on...

An appropriate function is f(u) = frac(u) * (u2-u1) + u1

The same goes for v-coord, f(v) = frac(v) * (v2-v1) + v1

Notice that it’s tiling without mirroring. If you need mirroring, then the function should be a triangular-wave function, which is t(x) = arcsin(sin(pi*(x-0.5)))/pi+0.5 and f(u) = t(u) * (u2-u1) + u1. Using trigonometric functions can be expensive though.

I don’t know if it’s possible with fixed pipeline, but you can do it easily in pixel shader (HLSL code):

// float2 tex_coord -> (u,v) from vertex shader, in [0,n] range,
//                     n - number of repetitions
// float2 tex1, tex2 -> constants, subrange of [0,1] coords that will be tiled

// no mirroring
float4 color = tex2D(sampler, frac(tex_coord) * (tex2-tex1) + tex1);

or

// mirroring, t(x) = arcsin(sin(pi*(x-0.5)))/pi+0.5
float4 color = tex2D(sampler, t(tex_coord) * (tex2-tex1) + tex1);

EDIT:
a better way to compute triangular-wave function: t1(x) = abs(2(0.5x-floor(0.5x+0.5))) or t2(x) = abs(2(frac(0.5x+0.5))-1) (not exactly the same as t1 but correct for non-negative numbers).