WoW:XML/TexCoords

Reference e
AddOns WoW API Widget API XML UI Event API WoW Lua Macro API CVars Battle.net HOWTOs Snippets UI tech Categories

→ XML properties

← XML UI ← XML properties < TexCoords

A TexCoords tag tells a Texture what part of the image referenced in the Texture's file attribute should be shown. This allows for the ability to combine multiple small, reusable graphics into single sprite sheets.

Inheritance

Inherited by: none, Inherits: none, Defined in: Texture

Elements

None.

Attributes

top

(float) from "0" (farthest top) to "1.0" (farthest bottom) that defines the topmost edge of the image to be shown.

bottom

(float) from "0" (farthest top) to "1.0" (farthest bottom) that defines the bottommost edge of the image to be shown.

left

(float) from "0" (farthest left) to "1.0" (farthest right) that defines the leftmost edge of the image to be shown.

right

(float) from "0" (farthest left) to "1.0" (farthest right) that defines the rightmost edge of the image to be shown.

TLx, TLy, TRx, TRy, LLx, LLy, LRx, LRy

Unknown - exists in the FrameXML schema but doesn't seem to do anything when set.

Summary

Determines how much of the specified texture is to be shown using 'left', 'right', 'top', and 'bottom' coodinates uisng a 'scalar' value 0..1. See below examples for how to calculate the values for top, bottom, left, and right.

Example

<TexCoords left="0" right="0.5" top="0" bottom="0.5" />

This example shows only the top left quarter of the texture.

Details

There are four specifications: "left", "right", "top", and "bottom". Each one specifies the coordinates of what the image should show, using a scale value. IE: With left=0 and right=1, it would show all the pixels from the left side to the right, or 100% of the image's width.

Texture coordinates define, how much of a single texture is to be shown. A TexCoords tag follows the concepts of UV mapping. The values of the top, bottom and bottom tags are U-coordinates, and left and right values are V-coordinates. The top and left edges of the image have UV coordinates of (0,0), and the bottom right corner is (1,1).

As is the nature of UV mapping, giving values greater than 1.0 will make the texture repeat. This can be used, for example, to make an image tile, or to allow for a script to create an endlessly scrolling image. Providing a bottom or right value greater than the top or left value will result in a flipped or reversed image.

Basic Examples

To show the whole image as your texture, you may either leave out the TexCoords tag, or do this:

<TexCoords top="0" left="0" bottom="1.0" right="1.0"/>

If you wished to use the bottom right quarter of the image, you would use this:

<TexCoords top="0.75" left="0.75" bottom="1.0" right="1.0"/>

If you want to show the second half of an image followed by the first half, you would do this:

<TexCoords top="0" left="0.5" bottom="1.0" right="1.5"/>

Lastly, to make an image appear upside-down, do this:

<TexCoords top="1.0" left="0" bottom="0" right="1.0"/>

Calculating Pixels to UV

To pull in a specific part of a sprite sheet, you need to translate the pixel locations to the proper UV coordinates. To do this:

1. Note the image file's total width and height, in pixels.
2. Determine exactly what part of the image you want to use. Open the image in the image editor of your choice. Zoom in around the specific area and find the upper-leftmost pixel of the area you wish to use, note the coordinates of that pixel. Do the same for the bottom-rightmost pixel (This is easiest in an editor like Photoshop, GIMP, or Paint.Net, but you can do this even in MS Paint).
3. Take the X-coordinate of the top-left pixel, and divide it by the image width.
4. Add 1/<image width> to the value you just calculated. This is your U-coordinate for the top attribute.
5. Repeat those two steps, but instead divide the Y-coordinate by the image height and add half of 1 ÷ <image height> to get the V-coordinate for your the left attribute. This little bit of addition prevents other parts of the sheet from bleeding into your texture.
6. Repeat these three steps with the bottom-right pixel to get the values for the bottom and right attributes, except instead of adding the half-1 ÷ height/width, subtract it.

Calculation Example

File:UI-Frame-TL-Highlight.png

UI-Frame.blp with the top-left border highlighted.

We'd like to grab and use the upper left border of a general frame.

The graphics for the border are in Interface/FrameGeneral/UI-Frame.blp, as shown. The region we'll be using is highlighted in green. The top left pixel of this region is located at (80,35), and the bottom corner is at (113,68). UI-Frame.blp is 128x128 pixels.

• Magic Number: (1 ÷ 128) = 0.0078125 → 0.0078125 ÷ 2 = 0.00390625
• Top: 35 ÷ 128 = 0.2734375 → 0.2734375 + 0.00390625 = 0.27734375
• Left: 80 ÷ 128 = 0.625 → 0.625 + 0.00390625 = 0.62890625
• Bottom: 68 ÷ 128 = 0.53125 → 0.53125 - 0.00390625 = 0.52734375
• Right: 113 ÷ 128 = 0.8828125 → 0.8828125 - 0.00390625 = 0.87890625