Rendering multiple different textures with 1 image? (such as fonts)

Question

Let's say I have a texture which is one file with separate 20 px by 20 px blocks. Within each of these blocks is a new character and I'd like to render different characters on screen as textures using these blocks. How can I use directx to render separate pieces of a texture file?

Answer 1

Draw 2 tris (ie a quad) with UVs that only surround the character you want.

Answer 2

Texture coordinates are normalized, so the top/left corner of the texture is (0,0) and the bottom/right corner is (1,1). Figure out the texture coordinates that represent the bounding box of each glyph in your font texture. When you want to render a certain glyph onto a quad, set each of the quad's vertices' UVs (texture coordinates) to the texture coordinates of the glyph you want to render. This is hard to explain without a picture, so if you need more info, google "texture mapping".

Answer 3

You will need to render a quad (two triangles) with the UV coordinates mapped to the correct location in this texture for each letter you are rendering.

So if you had a quad like this:

|\ |
| \|

and you wanted to draw the entire texture you would assign the vertices UV coordinates of:

TopLeft: 0,0
TopRight: 1,0
BottomLeft: 0,1
BottomRight: 1,1

If you wanted to assign the letter at 40,60 with a width and height of 20 and a texture width and height of 200 to this quad then the UV coordinates would be:

TopLeft: 40/200,60/200
TopRight: TopLeft.x + 20/200, TopLeft.y
BottomLeft: TopLeft.x, TopLeft.y + 20/200
BottomRight: TopRight.x, BottomLeft.y