WoW:XML elements/TexCoords - Revision history

Move page script: Move page script moved page XML elements/TexCoords to WoW:XML elements/TexCoords without leaving a redirect

2023-08-15T04:49:28Z

Move page script moved page XML elements/TexCoords to XML elements/TexCoords without leaving a redirect

← Older revision

Revision as of 04:49, 15 August 2023

Bear: Redirected page to XML/TexCoords

2013-09-19T01:18:17Z

← Older revision		Revision as of 01:18, 19 September 2013
Line 1:		Line 1:
	~~{{widget}}~~		#REDIRECT [[XML/TexCoords]]
	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 ==~~
	~~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]]

WoWWiki>Fandyllic at 17:26, 22 July 2012

2012-07-22T17:26:09Z

← Older revision		Revision as of 17:26, 22 July 2012
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.

WoWWiki>P0lar bear: 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..."

2012-07-22T04:35:50Z

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..."

New page

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==
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]]