WoW:SetTexCoord Transformations - Revision history

Move page script: Move page script moved page SetTexCoord Transformations to WoW:SetTexCoord Transformations without leaving a redirect

2023-08-15T04:48:57Z

Move page script moved page SetTexCoord Transformations to SetTexCoord Transformations without leaving a redirect

← Older revision

Revision as of 04:48, 15 August 2023

WoWWiki>Lamprey: correct X to A in tramsform matrix /* Matrix multiplication */

2010-11-28T12:25:58Z

correct X to A in tramsform matrix Matrix multiplication

← Older revision		Revision as of 12:25, 28 November 2010
Line 60:		Line 60:
	=		=
	\begin{pmatrix}		\begin{pmatrix}
	X&B&C\\		A&B&C\\
	D&E&F\\		D&E&F\\
	G&H&I		G&H&I

WoWWiki>Sky2042 at 15:53, 14 September 2010

2010-09-14T15:53:24Z

Show changes

WoWWiki>Cortello: /* Affine Transformations as Matrices */

2010-01-03T21:26:18Z

Affine Transformations as Matrices

Show changes

WoWWiki>SinusPi: yet another example

2009-09-10T15:17:15Z

yet another example

← Older revision		Revision as of 15:17, 10 September 2009
Line 210:		Line 210:

	radians = (pi/180) * degrees		radians = (pi/180) * degrees

			==Rotation of Textures about Any Point with Any Aspect==
			This function caters to all your rotation needs.

			function RotateCoordPair (x,y,ox,oy,a,asp)
			y=y/asp
			oy=oy/asp
			return ox + (x-ox)math.cos(a) - (y-oy)math.sin(a),
			(oy + (y-oy)math.cos(a) + (x-ox)math.sin(a))*asp
			end

			And use it like this:

			coords={tl={x=0,y=0},
			bl={x=0,y=1},
			tr={x=1,y=0},
			br={x=1,y=1}}
			origin={x=0.5,y=1.0}
			aspect=image_width/image_height
			angle=3.14159/2
			texture:SetTexCoord(
			RotateCoordPair(coords.tl.x,coords.tl.y,origin.x,origin.y,angle,aspect),
			RotateCoordPair(coords.bl.x,coords.bl.y,origin.x,origin.y,angle,aspect),
			RotateCoordPair(coords.tr.x,coords.tr.y,origin.x,origin.y,angle,aspect),
			RotateCoordPair(coords.br.x,coords.br.y,origin.x,origin.y,angle,aspect)
			)


			[[User:SinusPi\|SinusPi]] ([[User talk:SinusPi\|talk]]) 15:17, September 10, 2009 (UTC)

WoWWiki>Telic: Included a texture rotation method that worked for me

2008-10-12T21:33:58Z

Included a texture rotation method that worked for me

← Older revision		Revision as of 21:33, 12 October 2008
Line 177:		Line 177:
	self:SetTexCoord((sin - cos), -(cos + sin), -cos, -sin, sin, -cos, 0, 0)		self:SetTexCoord((sin - cos), -(cos + sin), -cos, -sin, sin, -cos, 0, 0)
	end		end

			==Simple Rotation of Textures about their Own Center==
			It may just have been a lack of understanding on my part but the above methods did not work for me; Or at least did not meet my needs.

			To be explicit, I wanted to be able to rotate a texture about its own center.

			In other words, I wanted the texture to spin in place, and not rotate or move the texture about the center of the UI, or its parent's center.

			The following code gives a rough idea of how to animate a texture to make it spin.

			But the basic method can be seen in the :SetTexCoord method :

			local angleInc = 0.25
			function myOnUpdate(self, elapsed)
			self.timer = self.timer + elapsed;
			if ( self.timer > 0.05 ) then
			self.hAngle = self.hAngle - angleInc;
			self.s = sin(self.hAngle);
			self.c = cos(self.hAngle);
			miniNote:SetTexCoord( 0.5-self.s, 0.5+self.c,
			0.5+self.c, 0.5+self.s,
			0.5-self.c, 0.5-self.s,
			0.5+self.s, 0.5-self.c);
			self.timer = 0;
			end
			end

			angleInc has been precalculated as a Radians value - the larger it is, the faster the spin.

			Or reduce the self.timer threshold to make a smoother rotation.


			radians = (pi/180) * degrees

WoWWiki>MentalPower: Added a simpler rotateTexture() function

2008-02-28T05:30:09Z

Added a simpler rotateTexture() function

← Older revision		Revision as of 05:30, 28 February 2008
Line 169:		Line 169:

	texture:SetTexCoord(ULx, ULy, LLx, LLy, URx, URy, LRx, LRy);		texture:SetTexCoord(ULx, ULy, LLx, LLy, URx, URy, LRx, LRy);
			end

			==Even simpler rotation of textures about the center==
			function RotateTexture(self, degrees)
			local angle = math.rad(degrees)
			local cos, sin = math.cos(angle), math.sin(angle)
			self:SetTexCoord((sin - cos), -(cos + sin), -cos, -sin, sin, -cos, 0, 0)
	end		end

WoWWiki>Maldivia: Added a non-matrix example of rotating a square texture

2008-02-19T15:01:52Z

Added a non-matrix example of rotating a square texture

← Older revision		Revision as of 15:01, 19 February 2008
Line 153:		Line 153:
	local angle = math.rad(90);		local angle = math.rad(90);
	setCoords(texture, cos(angle), sin(angle), 1, -sin(angle), cos(angle), 1);		setCoords(texture, cos(angle), sin(angle), 1, -sin(angle), cos(angle), 1);
			==Simple rotation of square textures around the center==
			While the above section about matrix manipulation gives a lot of flexibility, most often much simpler math suffice.
			Here's an example of rotating a square texture around its center with an arbitrary angle:
			local s2 = sqrt(2);
			local cos, sin, rad = math.cos, math.sin, math.rad;
			local function CalculateCorner(angle)
			local r = rad(angle);
			return 0.5 + cos(r) / s2, 0.5 + sin(r) / s2;
			end
			local function RotateTexture(texture, angle)
			local LRx, LRy = CalculateCorner(angle + 45);
			local LLx, LLy = CalculateCorner(angle + 135);
			local ULx, ULy = CalculateCorner(angle + 225);
			local URx, URy = CalculateCorner(angle - 45);

			texture:SetTexCoord(ULx, ULy, LLx, LLy, URx, URy, LRx, LRy);
			end

WoWWiki>Pcj at 05:30, 5 January 2008

2008-01-05T05:30:47Z

← Older revision		Revision as of 05:30, 5 January 2008
Line 1:		Line 1:
	{{uitech}}~~{{tocright}}~~		{{uitech}}


	The SetTexCoord method in WoW's Texture API can be used for some fairly complex display tasks, including drawing bits of circles, rotating images on screen, etc. Unless one has experience in computer graphics programming, the way in which this can be used might not be evident, so this document hopes to explain how Textures work and how you can use them.		The SetTexCoord method in WoW's Texture API can be used for some fairly complex display tasks, including drawing bits of circles, rotating images on screen, etc. Unless one has experience in computer graphics programming, the way in which this can be used might not be evident, so this document hopes to explain how Textures work and how you can use them.

WoWWiki>VoidvectorBot: Robot: converting/fixing HTML

2007-01-20T16:55:48Z

Robot: converting/fixing HTML

← Older revision		Revision as of 16:55, 20 January 2007
Line 9:		Line 9:

	== The Screen ==		== The Screen ==
	The screen is used to refer to what the user sees, it may go by various different names in some graphics systems (canvas, surface, etc), but here we'll just call it the screen. The term ~~<b>~~Screen Coordinate~~</b>~~ is used to specify a point on the screen (In WoW the origin is in the bottom left hand corner).		The screen is used to refer to what the user sees, it may go by various different names in some graphics systems (canvas, surface, etc), but here we'll just call it the screen. The term '''Screen Coordinate''' is used to specify a point on the screen (In WoW the origin is in the bottom left hand corner).

	== Texture Frame Elements ==		== Texture Frame Elements ==
	In order to display all part of an image, we use a Texture frame element, which appears as a rectangular area on the screen with vertical and horizontal edges, just like any other Frame. A Texture frame element can have an arbitrary location, size, and scale. Within the rectangle of the Texture, we'll use the term ~~<b>~~Texture Frame Coordinate~~</b>~~ to refer to the location within that rectangle where (0,0) is the bottom left corner, (1,0) is the bottom right corner, (0,1) is the top left corner, and (1,1) is the top right corner. Texture will always have an initial capital, for consistency with the element name in the API. Each screen coordinate within the bounds of the Texture on screen can be mapped into a Texture frame coordinate within the box from (0,0) to (1,1).		In order to display all part of an image, we use a Texture frame element, which appears as a rectangular area on the screen with vertical and horizontal edges, just like any other Frame. A Texture frame element can have an arbitrary location, size, and scale. Within the rectangle of the Texture, we'll use the term '''Texture Frame Coordinate''' to refer to the location within that rectangle where (0,0) is the bottom left corner, (1,0) is the bottom right corner, (0,1) is the top left corner, and (1,1) is the top right corner. Texture will always have an initial capital, for consistency with the element name in the API. Each screen coordinate within the bounds of the Texture on screen can be mapped into a Texture frame coordinate within the box from (0,0) to (1,1).

	== The Image ==		== The Image ==
	Texture frame elements display images, these are generally loaded from files and are specified with a path. The WoW UI engine handles various different sizes of images, as long as each side is a power of 2 (64x64, 256x256, 512x128, etc). Within an image, we'll use the term ~~<b>~~Image Coordinate~~</b>~~ to refer to the location within the contents of the image. The corners are (0,0) for the ~~<b>~~top~~</b>~~ left, (1,0) for the ~~<b>~~top~~</b>~~ right, (0,1) for the ~~<b>~~bottom~~</b>~~ left, and (1,1) for the ~~<b>~~bottom~~</b>~~ right. Notice that the image origin is in a different corner from the screen origin.		Texture frame elements display images, these are generally loaded from files and are specified with a path. The WoW UI engine handles various different sizes of images, as long as each side is a power of 2 (64x64, 256x256, 512x128, etc). Within an image, we'll use the term '''Image Coordinate''' to refer to the location within the contents of the image. The corners are (0,0) for the '''top''' left, (1,0) for the '''top''' right, (0,1) for the '''bottom''' left, and (1,1) for the '''bottom''' right. Notice that the image origin is in a different corner from the screen origin.

	While image coordinate box from (0,0) to (1,1) contains the whole image as it appears in its source file, the image logically extends to infinity in each direction, by repeating the edge pixel of the image file. So, if your image has a left edge which is entirely blue pixels, then there would be blue at (x, 0.5) for all x <= 0. Similarly, if the image has a top edge that is transparent, then you'll get transparency at (0.5, y) for all y >= 1.		While image coordinate box from (0,0) to (1,1) contains the whole image as it appears in its source file, the image logically extends to infinity in each direction, by repeating the edge pixel of the image file. So, if your image has a left edge which is entirely blue pixels, then there would be blue at (x, 0.5) for all x <= 0. Similarly, if the image has a top edge that is transparent, then you'll get transparency at (0.5, y) for all y >= 1.
Line 30:		Line 30:

	==Overview==		==Overview==
	The way in which the image coordinates map to Texture frame coordinates, and then onto Screen Coordinates (or vice versa) is through a series of ~~<b>~~Affine Transformations~~</b>~~, these are transformations which preserve linearity (points which lay on a line before the transformation, continue to lay on a line after it), and distance ratios (the ratio of distance between two pairs of points on a line before the transformation remain the same afterwards). In the 2D world affine transformations are any combination of:		The way in which the image coordinates map to Texture frame coordinates, and then onto Screen Coordinates (or vice versa) is through a series of '''Affine Transformations''', these are transformations which preserve linearity (points which lay on a line before the transformation, continue to lay on a line after it), and distance ratios (the ratio of distance between two pairs of points on a line before the transformation remain the same afterwards). In the 2D world affine transformations are any combination of:

	* Translation (Moving things relative to the origin)		* Translation (Moving things relative to the origin)