WoWInterface

WoWInterface (https://www.wowinterface.com/forums/index.php)
-   General Authoring Discussion (https://www.wowinterface.com/forums/forumdisplay.php?f=20)
-   -   Ring unitframes (https://www.wowinterface.com/forums/showthread.php?t=45091)

zork 11-07-12 05:21 AM

Ring unitframes
 
5 Attachment(s)
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.

kurapica.igas 12-13-12 08:42 PM

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.

kurapica.igas 12-13-12 08:44 PM

Er, self.Width, self.Height is property in my class system, you can change it to SetHeight|GetHeight.


All times are GMT -6. The time now is 08:28 AM.

vBulletin © 2024, Jelsoft Enterprises Ltd
© 2004 - 2022 MMOUI