AddOn Studio

WoW:XML elements/TexCoords: Difference between revisions

WoW Talk

WoW:XML elements/TexCoords (source)

Revision as of 04:49, 15 August 2023

4,585 bytes removed ,  15 August 2023
m
Move page script moved page XML elements/TexCoords to WoW:XML elements/TexCoords without leaving a redirect
(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...")
 
m (Move page script moved page XML elements/TexCoords to WoW:XML elements/TexCoords without leaving a redirect)
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
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.
#REDIRECT [[XML/TexCoords]]
 
==Elements==
None.
 
==Attributes==
See below examples for how to calculate the values for top, bottom, left, and right.
 
;top
:(required, [[XML attribute types|float]]) Value from "0" (farthest top) to "1.0" (farthest bottom) that defines the topmost edge of the image to be shown.
;bottom
:(required, [[XML attribute types|float]]) Value from "0" (farthest top) to "1.0" (farthest bottom) that defines the bottommost edge of the image to be shown.
;left
:(required, [[XML attribute types|float]]) Value from "0" (farthest left) to "1.0" (farthest right) that defines the leftmost edge of the image to be shown.
;right
:(required, [[XML attribute types|float]]) Value 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.
 
==Examples==
===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).
 
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:
<pre>
<TexCoords top="0" left="0" bottom="1.0" right="1.0"/>
</pre>
 
If you wished to use the bottom right quarter of the image, you would use this:
<pre>
<TexCoords top="0.75" left="0.75" bottom="1.0" right="1.0"/>
</pre>
 
If you want to show the second half of an image followed by the first half, you would do this:
<pre>
<TexCoords top="0" left="0.5" bottom="1.0" right="1.5"/>
</pre>
 
Lastly, to make an image appear upside-down, do this:
<pre>
<TexCoords top="1.0" left="0" bottom="0" right="1.0"/>
</pre>
 
===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:
#Note the image file's total width and height, in pixels.
#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).
#Take the X-coordinate of the top-left pixel, and divide it by the image width.
#Add 1/<image width> to the value you just calculated. This is your U-coordinate for the top attribute.
#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.
#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|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.
 
The graphics for the border are in <tt>Interface/FrameGeneral/UI-Frame.blp</tt>, 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). <tt>UI-Frame.blp</tt> 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'''
[[Category:XML elements]]
[[Category:XML elements]]
Anonymous user
Retrieved from "https://addonstudio.org/wiki/Special:MobileDiff/20238...20241"