no edit summary
(Created page with "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 t...") |
No edit summary |
||
| Line 1: | Line 1: | ||
{{widget}} | |||
A [[XML/TexCoords|TexCoords]] tag tells a [[XML/Texture|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. | A [[XML/TexCoords|TexCoords]] tag tells a [[XML/Texture|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. | ||
==Elements== | == Elements == | ||
None. | None. | ||
==Attributes== | == Attributes == | ||
See below examples for how to calculate the values for top, bottom, left, and right. | See below examples for how to calculate the values for top, bottom, left, and right. | ||
| Line 18: | Line 19: | ||
:Unknown - exists in the FrameXML schema but doesn't seem to do anything when set. | :Unknown - exists in the FrameXML schema but doesn't seem to do anything when set. | ||
==Examples== | == Examples == | ||
===Concept=== | === Concept === | ||
Texture coordinates define, how much of a single texture is to be shown. A TexCoords tag follows the concepts of [http://en.wikipedia.org/wiki/UV_mapping 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). | Texture coordinates define, how much of a single texture is to be shown. A TexCoords tag follows the concepts of [http://en.wikipedia.org/wiki/UV_mapping 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. | 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=== | === Basic Examples === | ||
To show the whole image as your texture, you may either leave out the TexCoords tag, or do this: | To show the whole image as your texture, you may either leave out the TexCoords tag, or do this: | ||
<pre> | <pre> | ||
| Line 45: | Line 46: | ||
</pre> | </pre> | ||
===Calculating Pixels to UV=== | === 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: | 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: | ||
#Note the image file's total width and height, in pixels. | #Note the image file's total width and height, in pixels. | ||
| Line 54: | Line 55: | ||
#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. | #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=== | === Calculation Example === | ||
[[File:UI-Frame-TL-Highlight.png|frame|UI-Frame.blp with the top-left border highlighted.]]We'd like to grab and use the upper left border of a general frame. | [[File:UI-Frame-TL-Highlight.png|frame|UI-Frame.blp with the top-left border highlighted.]]We'd like to grab and use the upper left border of a general frame. | ||