Fiddly bits

Finally, I've written some code that I've been meaning to for a quite some time - the frame.

By frame, I mean an in-game window. A good example is the final fantasy screen shot below. It has a blue box with text in it. The blue box is a frame.



If you are using 3d acceleration the way to write this is to split the frame image up into a number of quads. So the corners are each a quad, so are columns and cross bars and the middle is a quad as well.

The columns and crossbars repeat their texture vertically and horizontally respectively. This allows the frame to be of arbitrary size but still look nice.

Here's a screen grab of the image I made in photoshop.



I have a small drop shadow, so the upper cross bar and the lower cross bar are different. The same for the columns. In total I have nine images each 16 x 16. I've packed all my images in a texture atlas.

Tiling or repeating a texture from a texture atlas using OpenGL isn't as simple as it is without a texture atlas. Without a texture atlas, you set the texture co-ords past 1.0 and for each unit over 1.0 it will repeat the texture. You also need to set a texture repeat flag somewhere. So a quad that has texture coordinates from 0,0 to 2,2 will repeat the texture four times over it's surface.

Using a texture atlas you can't alter the texture coordinates - as you're using them to cut a chunk out of the texture. So to get round this I just increased the vertex count on my frame mesh. Each time I want to repeat a texture I apply the same texture to a new quad and put the new quad next to the old one.

Here's the final result:



My frame has black border and I'm rendering on black so it appears a little strange - but at least it's working nicely now!

In the above each corner is a quad, the crossbars and columns and several quads in a row. The middle is a big mesh of quads - though often this middle section could be single large quad.