Quantcast The ring theory part two - Page 2 - WoWInterface
Thread Tools Display Modes
03-27-13, 08:24 AM   #21
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,558
Btw...when you are building your ring segments with non-transparent areas inside your ring the following texture will be enough to display all the rings you will ever need.



You do not have to care about ring-width at all. Clever overlaying and frame-stacking is all you need to create the illusion.

Layer 1: (needs two scrollFrames of same color)


Layer 2:


Layer 3:


Handling ring-width is an annoying topic. If you don't have to fiddle with it just don't.

The last step is another layer ontop containing highlight/border textures. But I remommend to delay that step until the layout is finished. It is tedious to create it if you are still working on your layout and change sizes around all the time.

One thing I still need to check out is the effect of the different BlendModes.
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | TDMOG

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Last edited by zork : 03-27-13 at 08:40 AM.
  Reply With Quote
03-27-13, 11:57 AM   #22
SDPhantom
A Pyroguard Emberseer
 
SDPhantom's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2006
Posts: 1,509
Here's a link to a good explanation to how BlendModes work.
http://www.wowpedia.org/AlphaMode
__________________
"All I want is a pretty girl, a decent meal, and the right to shoot lightning at fools."
-Anders (Dragon Age: Origins - Awakening)
  Reply With Quote
04-15-13, 02:07 AM   #23
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,558
Just some more links on that topic:

http://en.wikipedia.org/wiki/Circular_motion
http://cnx.org/content/m42177/latest...ol11406/latest
http://www.wowinterface.com/forums/s...ad.php?t=45091
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | TDMOG

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Last edited by zork : 04-15-13 at 02:10 AM.
  Reply With Quote
04-17-13, 03:26 PM   #24
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,558
Working on it if I have time to spare. Currently doing the basic setup.

http://imgur.com/a/s1uAA#0

Currently setting everything up.



The main problem atm is getting the frame stacking right. This included frames for border and highlight effects later on.

Basic setup is done. Including a spark texture.



Each ring can sit on 1-4 ring segments.
A segement can handle rings for castbar, health and power.
Each ring can have its own radius.
Each ring consists of a background, ring and a spark texture.

Code will be released under oUF_Donut.
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | TDMOG

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Last edited by zork : 04-17-13 at 04:18 PM.
  Reply With Quote
04-19-13, 10:02 PM   #25
pelf
Sentient Plasmoid
 
pelf's Avatar
Premium Member
Join Date: May 2008
Posts: 133
What did you decide for where to indicate the spell for a castbar ring?
  Reply With Quote
04-21-13, 06:14 PM   #26
Resike
A Pyroguard Emberseer
AddOn Author - Click to view addons
Join Date: Mar 2010
Posts: 1,092
Originally Posted by zork View Post
Lol...SetRotation has a bug. It does sth to my ring texture.


This bug occours, when you call the SetRotation function on a texure which doesn't have enough transparent "spaceborder" to do the full rotate, based on your pivot point. I also run into the problem:



I made a fix like that:

Code:
local ULx, ULy, LLx, LLy, URx, URy, LRx, LRy = texture:GetTexCoord();
local x = (sqrt(2) - 1) / 2
texture:SetTexCoord(ULx + x, ULy + x, LLx + x, LLy - x, URx - x, URy + x, LRx - x, LRy - x);
And its gone:

  Reply With Quote
04-23-13, 01:35 AM   #27
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,558
SDPanthom wrote an explanation on that here aswell: http://www.wowinterface.com/forums/s...7&postcount=10

Regarding your fix. Does the function only has to be called once per texture prior to any SetRotation calls?

If you have to call it after every SetRotation you will be screwed. What if you rotate the texture in a way that your math. prefixed (+-) are wrong because points have switched places.
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | TDMOG

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Last edited by zork : 04-23-13 at 01:50 AM.
  Reply With Quote
04-23-13, 03:24 AM   #28
Resike
A Pyroguard Emberseer
AddOn Author - Click to view addons
Join Date: Mar 2010
Posts: 1,092
Originally Posted by zork View Post
SDPanthom wrote an explanation on that here aswell: http://www.wowinterface.com/forums/s...7&postcount=10

Regarding your fix. Does the function only has to be called once per texture prior to any SetRotation calls?

If you have to call it after every SetRotation you will be screwed. What if you rotate the texture in a way that your math. prefixed (+-) are wrong because points have switched places.
I don't want to rotate textures after the fix, only to mirror them. Whats the point rotate texture which is incapable of it. Well, you can rotate it, but it's going to be glitchy. I only made the fix so the texture going to be look okay on 0 degree, and you can properly mirror it too.

But the version you said, seems intresting too, to cut the edges after every rotation, and you can change the -+ values based on the rotation degree, i might try to code it later.

Last edited by Resike : 04-23-13 at 03:29 AM.
  Reply With Quote
04-23-13, 09:11 AM   #29
Resike
A Pyroguard Emberseer
AddOn Author - Click to view addons
Join Date: Mar 2010
Posts: 1,092
Okay i came up with something like that:

Code:
	if (aura.textaura ~= true) then
		texture:SetRotation(math.rad(aura.rotate));
	end
	if (aura.customtex == true) or (aura.owntex == true) then
		local ULx, ULy, LLx, LLy, URx, URy, LRx, LRy = texture:GetTexCoord();
		local x = (sqrt(2) - 1) / 2
		if string.find(aura.customname, "//") then
			if (aura.rotate == 0) or (aura.rotate == 360) then
				texture:SetTexCoord(ULx + x, ULy + x, LLx + x, LLy - x, URx - x, URy + x, LRx - x, LRy - x);
			elseif (aura.rotate == 90) then
				texture:SetTexCoord(ULx + x, ULy + x, LLx - x, LLy + x, URx + x, URy - x, LRx - x, LRy - x);
			elseif (aura.rotate == 180) then
				texture:SetTexCoord(ULx + x, ULy - x, LLx + x, LLy + x, URx - x, URy - x, LRx - x, LRy + x);
			elseif (aura.rotate == 270) then
				texture:SetTexCoord(ULx - x, ULy - x, LLx + x, LLy - x, URx - x, URy + x, LRx + x, LRy + x);
			end
		else
			if (aura.rotate == 0) or (aura.rotate == 360) then
				texture:SetTexCoord(ULx + x, ULy + x, LLx + x, LLy - x, URx - x, URy + x, LRx - x, LRy - x);
			elseif (aura.rotate == 90) then
				texture:SetTexCoord(ULx - x, ULy + x, LLx + x, LLy + x, URx - x, URy - x, LRx + x, LRy - x);
			elseif (aura.rotate == 180) then
				texture:SetTexCoord(ULx - x, ULy - x, LLx - x, LLy + x, URx + x, URy - x, LRx + x, LRy + x);
			elseif (aura.rotate == 270) then
				texture:SetTexCoord(ULx + x, ULy - x, LLx - x, LLy - x, URx + x, URy + x, LRx - x, LRy + x);
			end
		end
	end
	if (aura.textaura ~= true) then
		local ULx, ULy, LLx, LLy, URx, URy, LRx, LRy = texture:GetTexCoord();
		if (aura.symetrie == 1) then
			texture:SetTexCoord(URx, URy, LRx, LRy, ULx, ULy, LLx, LLy); -- Inverse X
		elseif (aura.symetrie == 2) then
			texture:SetTexCoord(LLx, LLy, ULx, ULy, LRx, LRy, URx, URy); -- Inverse Y
		elseif (aura.symetrie == 3) then
			texture:SetTexCoord(LRx, LRy, URx, URy, LLx, LLy, ULx, ULy); -- Inverse XY
		else
			texture:SetTexCoord(ULx, ULy, LLx, LLy, URx, URy, LRx, LRy); -- Normal
		end
	end
	if (aura.textaura == true) then
		frame.baseH = 256 * aura.size * (2 - aura.torsion);
	elseif (aura.customtex == true) then
		local x = (sqrt(2) * 2) - 1
		if string.find(aura.customname, "//") then
			if (aura.rotate == 0) or (aura.rotate == 180) or (aura.rotate == 360) then
				frame.baseH = 256 * aura.size * (2 - aura.torsion);
			elseif (aura.rotate == 90) or (aura.rotate == 270) then
				frame.baseH = x * 256 * aura.size * (2 - aura.torsion);
			else
				frame.baseH = sqrt(2) * 256 * aura.size * (2 - aura.torsion);
			end
		else
			if (aura.rotate == 0) or (aura.rotate == 180) or (aura.rotate == 360) then
				frame.baseH = 256 * aura.size * (2 - aura.torsion);
			elseif (aura.rotate == 90) or (aura.rotate == 270) then
				frame.baseH = 256 * aura.size * (2 - aura.torsion);
			else
				frame.baseH = sqrt(2) * 256 * aura.size * (2 - aura.torsion);
			end
		end
	elseif (aura.owntex == true) then
		if (aura.rotate == 0) or (aura.rotate == 180) or (aura.rotate == 360) then
			frame.baseH = 256 * aura.size * (2 - aura.torsion);
		elseif (aura.rotate == 90) or (aura.rotate == 270) then
			frame.baseH = 256 * aura.size * (2 - aura.torsion);
		else
			frame.baseH = sqrt(2) * 256 * aura.size * (2 - aura.torsion);
		end
	else
		frame.baseH = sqrt(2) * 256 * aura.size * (2 - aura.torsion);
		frame.baseL = sqrt(2) * 256 * aura.size * aura.torsion;
	end
	if (aura.textaura == true) then
		local fontsize = math.min(33, math.max(10, math.floor(frame.baseH / 12.8)));
		local checkfont = texture:SetFont(self.Fonts[aura.aurastextfont], fontsize, "OUTLINE, MONOCHROME");
		if not checkfont then
			texture:SetFont(STANDARD_TEXT_FONT, fontsize, "OUTLINE, MONOCHROME");
		end
		frame.baseL = texture:GetStringWidth() + 5;
	elseif (aura.customtex == true) then
		local x = (sqrt(2) * 2) - 1
		if string.find(aura.customname, "//") then
			if (aura.rotate == 0) or (aura.rotate == 360) then
				frame.baseL = 256 * aura.size * aura.torsion;
			elseif (aura.rotate == 90) or (aura.rotate == 270) then
				frame.baseL = 256 * aura.size * aura.torsion;
			elseif (aura.rotate == 180) then
				frame.baseL = x * 256 * aura.size * aura.torsion;
			else
				frame.baseL = sqrt(2) * 256 * aura.size * aura.torsion;
			end
		else
			if (aura.rotate == 0) or (aura.rotate == 180) or (aura.rotate == 360) then
				frame.baseL = 256 * aura.size * aura.torsion;
			elseif (aura.rotate == 90) or (aura.rotate == 270) then
				frame.baseL = 256 * aura.size * aura.torsion;
			else
				frame.baseL = sqrt(2) * 256 * aura.size * aura.torsion;
			end
		end
	elseif (aura.owntex == true) then
		if (aura.rotate == 0) or (aura.rotate == 180) or (aura.rotate == 360) then
			frame.baseL = 256 * aura.size * aura.torsion;
		elseif (aura.rotate == 90) or (aura.rotate == 270) then
			frame.baseL = 256 * aura.size * aura.torsion;
		else
			frame.baseL = sqrt(2) * 256 * aura.size * aura.torsion;
		end
	end
	PowaAuras:InitialiseFrame(aura, frame);
It lets you rotate any textures, but it shows properly "bugged" textures too at 0, 90, 180, 270 degree. Also the mirroring works on them too.
  Reply With Quote
04-24-13, 04:06 AM   #30
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,558
I don't really understand the hassle. Just cut out a 1px border of your texture's alpha layer. If that pixel is black the texture will be transparent thus the bug will not appear.
Blizzard uses the outmost 1 pixel for background color multiplication calculations which can be quite useful in some scenarios.
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | TDMOG

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)
  Reply With Quote
04-24-13, 07:16 AM   #31
Resike
A Pyroguard Emberseer
AddOn Author - Click to view addons
Join Date: Mar 2010
Posts: 1,092
Originally Posted by zork View Post
I don't really understand the hassle. Just cut out a 1px border of your texture's alpha layer. If that pixel is black the texture will be transparent thus the bug will not appear.
Blizzard uses the outmost 1 pixel for background color multiplication calculations which can be quite useful in some scenarios.
Okay, and how do i do that? :P

The fix meant to work when the user loads a cusom texture, or a texture from wow.
I mostly have problems with ingame icons, i got a thread about it here: http://www.wowinterface.com/forums/s...81&postcount=5

Last edited by Resike : 04-24-13 at 07:29 AM.
  Reply With Quote
04-24-13, 10:57 AM   #32
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,558
I'm getting near alpha state.



Including pet and targettarget (showing a second ring layout template)


I decided to add a templating engine for ring setups. Thus it is possible to setup different ring types and use them for specific units.

The update and value change functions are done.

A ring can use 1,2,3 or all 4 segments.
A ring can rotate clockwise or counter-clockwise.

Lua Code:
  1. --    ring segment layout
  2. --     ____ ____
  3. --    /    |    \
  4. --    |  4 | 1  |
  5. --     ----+----
  6. --    |  3 | 2  |
  7. --    \____|____/
  8. --

More shots:
http://imgur.com/a/786JI#0

*edit*

I released oUF_Donut: http://www.wowinterface.com/download...oUF_Donut.html
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | TDMOG

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Last edited by zork : 04-24-13 at 12:06 PM.
  Reply With Quote
04-25-13, 06:45 AM   #33
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,558
This could be a possible ring template:


It combines all possible bars in one layout.

This is just one suggestion.

Health and power could have been done in two half-rings aswell.

Thus it could look like:
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | TDMOG

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Last edited by zork : 04-25-13 at 06:58 AM.
  Reply With Quote
04-25-13, 03:11 PM   #34
Seerah
Fishing Trainer
 
Seerah's Avatar
WoWInterface Super Mod
Featured
Join Date: Oct 2006
Posts: 10,120
The bottom image is much easier to process than the first.
__________________
"You'd be surprised how many people violate this simple principle every day of their lives and try to fit square pegs into round holes, ignoring the clear reality that Things Are As They Are." -Benjamin Hoff, The Tao of Pooh

  Reply With Quote
04-30-13, 04:22 AM   #35
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,558
Maybe...but it has to be tested by actually using it.

The castbar will be hidden most of the time for melee players and against melee targets.

Additionally I added an optional attribute to the powerring configuration that allows hiding of the powerring if the unit does not even have power.

The good:
Testing out ring settings is really easy. It only requires an adjustment on the following variables to change the whole appearance:
Lua Code:
  1. --    ring segment layout
  2.   --     ____ ____
  3.   --    /    |    \
  4.   --    |  4 | 1  |
  5.   --     ----+----
  6.   --    |  3 | 2  |
  7.   --    \____|____/
  8.   --
  9.  
  10. --ring config
  11. radius = 0.9,     -- range 0-1
  12. sublevel = {      --display level of the texture
  13.   bg        = -8,
  14.   fill      = -7,
  15.   spark     = -6,
  16. },
  17. numSegmentsUsed = 4,  -- how many sements are affected? (see ring layout)
  18. startSegment  = 4,    -- in which segment should the ring begin it's journey? (see ring layout)
  19. fillDirection = 0,    -- how should the ring fill up? 1 = clock-wise, 0 = counter-clock-wise

http://code.google.com/p/rothui/sour...default.lua#34

Basically you can adjust the radius of a ring. Second you can adjust the texture layers. Last you set how many ring segments should be used, where the ring should start and how it should fill up.

That way you can shuffle your rings around in no time and try out new setups.

I really like adding class/combo and altpowerbar to the ring template idea. It just fits the the concept.

The problem on that is that my 16texture layers will be no more enough to hold all the layers per scrollFrame. Easy enough though. A texture drawlayer is capable of handling a sublevel and a strata. This gives us space for up to 80 textures per scrollFrame.

That should be enough >_<.

So I need to add the texture strata to the ring template. New ring elements will be "classring" and "altring".

As posted above changing the whole appearance can be done easily by changing some variables.

Why not use the comboring as an outer ring? Etc.
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | TDMOG

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Last edited by zork : 04-30-13 at 04:45 AM.
  Reply With Quote
08-07-14, 06:45 AM   #36
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,558
Released rCompassCastbar that is using the technique.

http://www.wowinterface.com/download...ssCastbar.html
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | TDMOG

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)
  Reply With Quote
02-12-16, 02:59 PM   #37
semlar
A Molten Giant
 
semlar's Avatar
AddOn Author - Click to view addons
Join Date: Sep 2007
Posts: 981
I wanted to post here because I came up with a technique based on the one outlined in this topic which can be applied to any source texture, rather than relying on semi-circles.

You start by arranging 4 textures in a grid, setting their texture coordinates so they look like a single copy of the original image.

Now our goal is to drain (or fill) each quarter by slicing the original texture from its center to one of its edges.

We can use a rotation animation to get the angle we want, but of course this also rotates our texture so it doesn't line up with the rest of the image.

However, we can use SetTexCoord to rotate our texture in the opposite direction to the rotation animation to correct its orientation.

Here's an animation to illustrate the basic concept: http://gfycat.com/BriefShowyElephantseal

The red square is where the scrollframe would normally be used to clip the edges of our rotating texture.

And this picture shows the finished design with various fill directions: http://gfycat.com/RealisticBaggyDarklingbeetle

I'll leave the script I wrote here.
Lua Code:
  1. -- Usage:
  2. -- spinner = CreateSpinner(parent)
  3. -- spinner:SetTexture('texturePath')
  4. -- spinner:SetBlendMode('blendMode')
  5. -- spinner:SetVertexColor(r, g, b)
  6. -- spinner:SetClockwise(boolean) -- true to fill clockwise, false to fill counterclockwise
  7. -- spinner:SetReverse(boolean) -- true to empty the bar instead of filling it
  8. -- spinner:SetValue(percent) -- value between 0 and 1 to fill the bar to
  9.  
  10. -- Some math stuff
  11. local cos, sin, pi2, halfpi = math.cos, math.sin, math.rad(360), math.rad(90)
  12. local function Transform(tx, x, y, angle, aspect) -- Translates texture to x, y and rotates about its center
  13.     local c, s = cos(angle), sin(angle)
  14.     local y, oy = y / aspect, 0.5 / aspect
  15.     local ULx, ULy = 0.5 + (x - 0.5) * c - (y - oy) * s, (oy + (y - oy) * c + (x - 0.5) * s) * aspect
  16.     local LLx, LLy = 0.5 + (x - 0.5) * c - (y + oy) * s, (oy + (y + oy) * c + (x - 0.5) * s) * aspect
  17.     local URx, URy = 0.5 + (x + 0.5) * c - (y - oy) * s, (oy + (y - oy) * c + (x + 0.5) * s) * aspect
  18.     local LRx, LRy = 0.5 + (x + 0.5) * c - (y + oy) * s, (oy + (y + oy) * c + (x + 0.5) * s) * aspect
  19.     tx:SetTexCoord(ULx, ULy, LLx, LLy, URx, URy, LRx, LRy)
  20. end
  21.  
  22. -- Permanently pause our rotation animation after it starts playing
  23. local function OnPlayUpdate(self)
  24.     self:SetScript('OnUpdate', nil)
  25.     self:Pause()
  26. end
  27.  
  28. local function OnPlay(self)
  29.     self:SetScript('OnUpdate', OnPlayUpdate)
  30. end
  31.  
  32. local function SetValue(self, value)
  33.     -- Correct invalid ranges, preferably just don't feed it invalid numbers
  34.     if value > 1 then value = 1
  35.     elseif value < 0 then value = 0 end
  36.    
  37.     -- Reverse our normal behavior
  38.     if self._reverse then
  39.         value = 1 - value
  40.     end
  41.    
  42.     -- Determine which quadrant we're in
  43.     local q, quadrant = self._clockwise and (1 - value) or value -- 4 - floor(value / 0.25)
  44.     if q >= 0.75 then
  45.         quadrant = 1
  46.     elseif q >= 0.5 then
  47.         quadrant = 2
  48.     elseif q >= 0.25 then
  49.         quadrant = 3
  50.     else
  51.         quadrant = 4
  52.     end
  53.    
  54.     if self._quadrant ~= quadrant then
  55.         self._quadrant = quadrant
  56.         -- Show/hide necessary textures if we need to
  57.         if self._clockwise then
  58.             for i = 1, 4 do
  59.                 self._textures[i]:SetShown(i < quadrant)
  60.             end
  61.         else
  62.             for i = 1, 4 do
  63.                 self._textures[i]:SetShown(i > quadrant)
  64.             end
  65.         end
  66.         -- Move scrollframe/wedge to the proper quadrant
  67.         self._scrollframe:SetAllPoints(self._textures[quadrant])   
  68.     end
  69.  
  70.     -- Rotate the things
  71.     local rads = value * pi2
  72.     if not self._clockwise then rads = -rads + halfpi end
  73.     Transform(self._wedge, -0.5, -0.5, rads, self._aspect)
  74.     self._rotation:SetRadians(-rads)
  75. end
  76.  
  77. local function SetClockwise(self, clockwise)
  78.     self._clockwise = clockwise
  79. end
  80.  
  81. local function SetReverse(self, reverse)
  82.     self._reverse = reverse
  83. end
  84.  
  85. local function OnSizeChanged(self, width, height)
  86.     self._wedge:SetSize(width, height) -- it's important to keep this texture sized correctly
  87.     self._aspect = width / height -- required to calculate the texture coordinates
  88. end
  89.  
  90. -- Creates a function that calls a method on all textures at once
  91. local function CreateTextureFunction(func, self, ...)
  92.     return function(self, ...)
  93.         for i = 1, 4 do
  94.             local tx = self._textures[i]
  95.             tx[func](tx, ...)
  96.         end
  97.         self._wedge[func](self._wedge, ...)
  98.     end
  99. end
  100.  
  101. -- Pass calls to these functions on our frame to its textures
  102. local TextureFunctions = {
  103.     SetTexture = CreateTextureFunction('SetTexture'),
  104.     SetBlendMode = CreateTextureFunction('SetBlendMode'),
  105.     SetVertexColor = CreateTextureFunction('SetVertexColor'),
  106. }
  107.  
  108. local function CreateSpinner(parent)
  109.     local spinner = CreateFrame('Frame', nil, parent)
  110.    
  111.     -- ScrollFrame clips the actively animating portion of the spinner
  112.     local scrollframe = CreateFrame('ScrollFrame', nil, spinner)
  113.     scrollframe:SetPoint('BOTTOMLEFT', spinner, 'CENTER')
  114.     scrollframe:SetPoint('TOPRIGHT')
  115.     spinner._scrollframe = scrollframe
  116.    
  117.     local scrollchild = CreateFrame('frame', nil, scrollframe)
  118.     scrollframe:SetScrollChild(scrollchild)
  119.     scrollchild:SetAllPoints(scrollframe)
  120.    
  121.     -- Wedge thing
  122.     local wedge = scrollchild:CreateTexture()
  123.     wedge:SetPoint('BOTTOMRIGHT', spinner, 'CENTER')
  124.     spinner._wedge = wedge
  125.    
  126.     -- Top Right
  127.     local trTexture = spinner:CreateTexture()
  128.     trTexture:SetPoint('BOTTOMLEFT', spinner, 'CENTER')
  129.     trTexture:SetPoint('TOPRIGHT')
  130.     trTexture:SetTexCoord(0.5, 1, 0, 0.5)
  131.    
  132.     -- Bottom Right
  133.     local brTexture = spinner:CreateTexture()
  134.     brTexture:SetPoint('TOPLEFT', spinner, 'CENTER')
  135.     brTexture:SetPoint('BOTTOMRIGHT')
  136.     brTexture:SetTexCoord(0.5, 1, 0.5, 1)
  137.    
  138.     -- Bottom Left
  139.     local blTexture = spinner:CreateTexture()
  140.     blTexture:SetPoint('TOPRIGHT', spinner, 'CENTER')
  141.     blTexture:SetPoint('BOTTOMLEFT')
  142.     blTexture:SetTexCoord(0, 0.5, 0.5, 1)
  143.    
  144.     -- Top Left
  145.     local tlTexture = spinner:CreateTexture()
  146.     tlTexture:SetPoint('BOTTOMRIGHT', spinner, 'CENTER')
  147.     tlTexture:SetPoint('TOPLEFT')
  148.     tlTexture:SetTexCoord(0, 0.5, 0, 0.5)
  149.    
  150.     -- /4|1\ -- Clockwise texture arrangement
  151.     -- \3|2/ --
  152.  
  153.     spinner._textures = {trTexture, brTexture, blTexture, tlTexture}
  154.     spinner._quadrant = nil -- Current active quadrant
  155.     spinner._clockwise = true -- fill clockwise
  156.     spinner._reverse = false -- Treat the provided value as its inverse, eg. 75% will display as 25%
  157.     spinner._aspect = 1 -- aspect ratio, width / height of spinner frame
  158.     spinner:HookScript('OnSizeChanged', OnSizeChanged)
  159.    
  160.     for method, func in pairs(TextureFunctions) do
  161.         spinner[method] = func
  162.     end
  163.    
  164.     spinner.SetClockwise = SetClockwise
  165.     spinner.SetReverse = SetReverse
  166.     spinner.SetValue = SetValue
  167.    
  168.     local group = wedge:CreateAnimationGroup()
  169.     local rotation = group:CreateAnimation('Rotation')
  170.     spinner._rotation = rotation
  171.     rotation:SetDuration(0)
  172.     rotation:SetEndDelay(1)
  173.     rotation:SetOrigin('BOTTOMRIGHT', 0, 0)
  174.     group:SetScript('OnPlay', OnPlay)
  175.     group:Play()
  176.    
  177.     return spinner
  178. end
  179.  
  180. ----------
  181. -- Demo
  182. ----------
  183.  
  184. local spinner1 = CreateSpinner(UIParent)
  185. spinner1:SetPoint('BOTTOMRIGHT', UIParent, 'CENTER', -2, 2)
  186. spinner1:SetSize(64, 64)
  187. spinner1:SetTexture('interface/icons/inv_mushroom_11')
  188.  
  189. spinner1:SetClockwise(false)
  190. spinner1:SetReverse(false)
  191.  
  192. local spinner2 = CreateSpinner(UIParent)
  193. spinner2:SetPoint('BOTTOMLEFT', UIParent, 'CENTER', 2, 2)
  194. spinner2:SetSize(64, 64)
  195. spinner2:SetTexture('interface/icons/inv_mushroom_11')
  196.  
  197. spinner2:SetClockwise(true)
  198. spinner2:SetReverse(false)
  199.  
  200. local spinner3 = CreateSpinner(UIParent)
  201. spinner3:SetPoint('TOPRIGHT', UIParent, 'CENTER', -2, -2)
  202. spinner3:SetSize(64, 64)
  203. spinner3:SetTexture('interface/icons/inv_mushroom_11')
  204.  
  205. spinner3:SetClockwise(true)
  206. spinner3:SetReverse(true)
  207.  
  208. local spinner4 = CreateSpinner(UIParent)
  209. spinner4:SetPoint('TOPLEFT', UIParent, 'CENTER', 2, -2)
  210. spinner4:SetSize(64, 64)
  211. spinner4:SetTexture('interface/icons/inv_mushroom_11')
  212.  
  213. spinner4:SetClockwise(false)
  214. spinner4:SetReverse(true)
  215.  
  216. local f = CreateFrame('frame')
  217. local timespent = 0
  218. f:SetScript('OnUpdate', function(self, elapsed)
  219.     timespent = timespent + elapsed
  220.     if timespent >= 3 then
  221.         timespent = 0
  222.     end
  223.    
  224.     local value = timespent / 3
  225.     spinner1:SetValue(value)
  226.     spinner2:SetValue(value)
  227.     spinner3:SetValue(value)
  228.     spinner4:SetValue(value)
  229. end)
  Reply With Quote
02-12-16, 03:58 PM   #38
sezz
A Theradrim Guardian
AddOn Author - Click to view addons
Join Date: Apr 2008
Posts: 68
Originally Posted by semlar View Post
Here's an animation to illustrate the basic concept: http://gfycat.com/BriefShowyElephantseal
Funny, this is how I implemented cooldown spirals in WildStar in 2014... and then removed the code 1 or 2 days later when I found out I can do it with their progress bar control...

But it's good to see that the idea wasn't bad at all
  Reply With Quote
02-14-16, 11:06 AM   #39
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,558
Semlar that is fucking brilliant!
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | TDMOG

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)
  Reply With Quote
02-14-16, 04:20 PM   #40
semlar
A Molten Giant
 
semlar's Avatar
AddOn Author - Click to view addons
Join Date: Sep 2007
Posts: 981
While it has to start or end at a 90 degree angle, you can still create arbitrary arcs using transparent textures and adjusting your value to compensate for the offsets.

Here's an example: http://gfycat.com/VioletJauntyGelding

This is the source image:


Last edited by semlar : 02-14-16 at 04:30 PM.
  Reply With Quote

WoWInterface » Developer Discussions » General Authoring Discussion » The ring theory part two

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off