Thread Tools Display Modes
11-07-12, 05:21 AM   #1
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,740
Ring unitframes

Quite a long time ago I posted a tutorial on how to do ring units in WoW.
http://elitistjerks.com/blogs/5362-zork/362-ring/

With a unit framework like oUF in mind it is no problem to create any kind of unitframe style template. (Any unit could use any template you created)

Nobody really picked up on that so I want to give it another try.

I made an example on what can be actually achieved by doing that. See the attached image.

I also made a set of ring segment textures (same ring in different width) for further usage:
http://code.google.com/p/rothui/sour...F_Ring%2Fmedia

With creative usage of background and highlight textures pretty crazy things can be done. Think of texture animationgroups or texture blending.

If you got any questions on that feel free to ask them.

One caveat:
It is not possible to start/end a segment on a value "> 0°" or "< 90°". The problem comes with the triangles that you stretch between (I) and (O).

Example A - Still possible to do:
http://dm.next-gen.org/files/ring/in...=13&SA=7&EA=49
Example B - Impossible:
http://dm.next-gen.org/files/ring/in...13&SA=20&EA=49

As a result the only way to fix this is to start at 0° or 90° depending on filling direction.
Direction A http://dm.next-gen.org/files/ring/in...=13&SA=0&EA=49
Direction B http://dm.next-gen.org/files/ring/in...13&SA=60&EA=90

Not sure if Blizzard has picked up on that but they added a pretty neat function to rotate clamped (already cropped via SetTexCoord) textures:
http://wowprogramming.com/utils/xmlb...meXML/Util.lua

This comes in pretty handy since we will need it to rotate the ring sements and slices.
Attached Thumbnails
Click image for larger version

Name:	ring1.jpg
Views:	550
Size:	60.2 KB
ID:	7361  Click image for larger version

Name:	ring_basicql5z.gif
Views:	492
Size:	15.3 KB
ID:	7362  Click image for larger version

Name:	ring_squaresjd6v.gif
Views:	494
Size:	14.9 KB
ID:	7363  Click image for larger version

Name:	ring_texturesvkg0.gif
Views:	513
Size:	20.3 KB
ID:	7364  

Click image for larger version

Name:	ring_reverseclfl.gif
Views:	515
Size:	21.6 KB
ID:	7365  
__________________
| Simple is beautiful.
| WoWI AddOns | GitHub | Zork (WoW)

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

Last edited by zork : 11-07-12 at 07:04 AM.
  Reply With Quote
12-13-12, 08:42 PM   #2
kurapica.igas
A Chromatic Dragonspawn
Join Date: Aug 2011
Posts: 152
Lua Code:
  1. function RotateRadian(self, radian)
  2.         if type(radian) ~= "number" then
  3.             error("Usage: Texture:RotateRadian(radian) - 'radian' must be number.", 2)
  4.         end
  5.  
  6.         if not self.__OriginTexCoord then
  7.             self.__OriginTexCoord = {self:GetTexCoord()}
  8.             self.__OriginWidth = self.Width
  9.             self.__OriginHeight = self.Height
  10.         end
  11.  
  12.         while radian < 0 do
  13.             radian = degree + 2 * math.pi
  14.         end
  15.         radian = radian % (2 * math.pi)
  16.  
  17.         local angle = radian % (math.pi /2)
  18.  
  19.         local left = self.__OriginTexCoord[1]
  20.         local top = self.__OriginTexCoord[2]
  21.         local right = self.__OriginTexCoord[7]
  22.         local bottom = self.__OriginTexCoord[8]
  23.  
  24.         local dy = self.__OriginWidth * math.cos(angle) * math.sin(angle) * (bottom-top) / self.__OriginHeight
  25.         local dx = self.__OriginHeight * math.cos(angle) * math.sin(angle) * (right - left) / self.__OriginWidth
  26.         local ox = math.cos(angle) * math.cos(angle) * (right-left)
  27.         local oy = math.cos(angle) * math.cos(angle) * (bottom-top)
  28.  
  29.         local newWidth = self.__OriginWidth*math.cos(angle) + self.__OriginHeight*math.sin(angle)
  30.         local newHeight = self.__OriginWidth*math.sin(angle) + self.__OriginHeight*math.cos(angle)
  31.  
  32.         local ULx   -- Upper left corner X position, as a fraction of the image's width from the left (number)
  33.         local ULy   -- Upper left corner Y position, as a fraction of the image's height from the top (number)
  34.         local LLx   -- Lower left corner X position, as a fraction of the image's width from the left (number)
  35.         local LLy   -- Lower left corner Y position, as a fraction of the image's height from the top (number)
  36.         local URx   -- Upper right corner X position, as a fraction of the image's width from the left (number)
  37.         local URy   -- Upper right corner Y position, as a fraction of the image's height from the top (number)
  38.         local LRx   -- Lower right corner X position, as a fraction of the image's width from the left (number)
  39.         local LRy   -- Lower right corner Y position, as a fraction of the image's height from the top (number)
  40.  
  41.         if radian < math.pi / 2 then
  42.             -- 0 ~ 90
  43.             ULx = left - dx
  44.             ULy = bottom - oy
  45.  
  46.             LLx = right - ox
  47.             LLy = bottom + dy
  48.  
  49.             URx = left + ox
  50.             URy = top - dy
  51.  
  52.             LRx = right + dx
  53.             LRy = top + oy
  54.         elseif radian < math.pi then
  55.             -- 90 ~ 180
  56.             URx = left - dx
  57.             URy = bottom - oy
  58.  
  59.             ULx = right - ox
  60.             ULy = bottom + dy
  61.  
  62.             LRx = left + ox
  63.             LRy = top - dy
  64.  
  65.             LLx = right + dx
  66.             LLy = top + oy
  67.  
  68.             newHeight, newWidth = newWidth, newHeight
  69.         elseif radian < 3 * math.pi / 2 then
  70.             -- 180 ~ 270
  71.             LRx = left - dx
  72.             LRy = bottom - oy
  73.  
  74.             URx = right - ox
  75.             URy = bottom + dy
  76.  
  77.             LLx = left + ox
  78.             LLy = top - dy
  79.  
  80.             ULx = right + dx
  81.             ULy = top + oy
  82.         else
  83.             -- 270 ~ 360
  84.             LLx = left - dx
  85.             LLy = bottom - oy
  86.  
  87.             LRx = right - ox
  88.             LRy = bottom + dy
  89.  
  90.             ULx = left + ox
  91.             ULy = top - dy
  92.  
  93.             URx = right + dx
  94.             URy = top + oy
  95.  
  96.             newHeight, newWidth = newWidth, newHeight
  97.         end
  98.  
  99.         self:SetTexCoord(ULx, ULy, LLx, LLy, URx, URy, LRx, LRy)
  100.         self.Width = newWidth
  101.         self.Height = newHeight
  102.     end
Well, I made a Rotate method for my Texture class before. It can keep the origin cut(left, right, top, bottom), and then rotate it for any degree, also it would change the Size(if not setallpoints()) base on the radian. I try an OnUpdate animation on a triangle, works fine. You may have a try.
  Reply With Quote
12-13-12, 08:44 PM   #3
kurapica.igas
A Chromatic Dragonspawn
Join Date: Aug 2011
Posts: 152
Er, self.Width, self.Height is property in my class system, you can change it to SetHeight|GetHeight.
  Reply With Quote

WoWInterface » Developer Discussions » General Authoring Discussion » Ring unitframes


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