WoWInterface (
-   General Authoring Discussion (
-   -   The ring theory part two (

zork 03-02-13 08:46 AM

The ring theory part two
Today after finishing my config I had some time to think about stuff. What really got me is that no-one has ever used scrollFrames to do stuff. I set up an experiment that I may try to prove if I have time.

I made the following graphics:

Basic ring setup:

We put a scrollFrame with an inline texture into ring segment 1:

This will happen if we change the setpoint of the scrollFrame and the setpoint of the texture inside the scrollFrame:

This is what is going to happen if we only adjust the size of the scrollframe:

What about rotation? Let's see. Hmm the offset does not fit.

So this is what happens if we correct the offset.

What we are doing in the last screenshot. We rotate the scrollFrame right while adjusting the setpoint properly. Additionally we rotate the ringTexture inside the scrollFrame in opposite direction.

*edit* an even better idea. Why would you rotate the scrollFrame at all? We can just leave as it is and just rotate the texture inside.

This is what will happen:

The pink thingy is the alpha layer of the ring texture.

Now if we rotate the texture inside the scrollFrame it will adjust on it's own.

This should make it very simple to create any kind of rings. Just set up 4 scrollFrames and throw in any ring texture you want. The number of rings per scrollFrames is unlimited. Each ring texture can be rotated individually.

Only one limitation. Start and end point of a ring segment can only be in one segment if at least one point is at 0° or 90°.

It even should be possible to do full half-rings with only 2 scrollFrames. Your ring texture would span 180° then.

Nibelheim 03-02-13 09:22 AM

Tripped out :)

zork 03-02-13 10:04 AM

Hmm...actually I set down to prove the concept.

It works!



Free your mind.

If I look at how simple that actually is I want back my time when I did rRingThing. Damnit.

Nibelheim 03-02-13 10:29 AM


Originally Posted by zork (Post 273818)
Hmm...actually I set down to prove the concept.

If I look at how simple that actually is I want back my time when I did rRingThing. Damnit.

Many a scientist must have thought that throughout history :p

humfras 03-03-13 04:04 AM

This is superb.

There are just some major drawbacks to the texture rotation:
It only works for mono-color and symmetrical textures.
Otherwise, the illusion fails.

Haleth 03-03-13 04:47 AM

Looks great, zork. I love your ideas. Your 'scroll frame revelation' made me laugh :p

It actually inspired me to try and use a scroll frame myself for some to-do list I'm working on. Sliding panel with transparent frames (so no lazy moving behind the parent frame) \o/

The possibilities... they are endless.

Edit: You could also make a pretty cool experience bar with it. A full circle represents one level. You have a segment for the current experience, then a second segment starting at the end of the first one representing rested experience. If you make the second one semi-transparent, you could see how far it overlaps into the next level as well, something which traditional experience bars can't do.

zork 03-03-13 06:18 AM

Nice one.


You can cheat alot more if you have to. Atleast it's a huge improvement of what we currently had to do.

The texture can use blending and gradients are possible aswell. Additonally you can use overlays or backgrounds. You can recolor on value change. You can even position another texture (spark) ontop of the ring.

Lua Code:
  1. local function calc_health_spark(self,value)
  2.     local spark = self.health_spark.texture  
  3.     local adjust = 0.009
  4.     value = 1-value+adjust
  5.     local mult = 1
  6.     local radian = math.rad(90) + math.rad(value * (mult*90*
  7.     spark:SetPoint("CENTER", spark.radius * math.cos(radian), spark.radius * math.sin(radian))
  8.     spark:SetRotation(radian - spark.shiftradian)  
  9.   end

On that note...I have not tested frame rotation which should be possible via animationgroups. Thus some could try to stack textures on a frame and rotate the full frame inside the scrollFrame.

Another big plus is the ability of AnimationGroups. Sth like Animation > SetSmoothing is just nice to have.


Sets the smoothing type for the animation. This setting affects the rate of change in the animation's progress value as it plays.




smoothType - Type of smoothing for the animation (string)
  • IN - Initially progressing slowly and accelerating towards the end
  • IN_OUT - Initially progressing slowly and accelerating towards the middle, then slowing down towards the end
  • NONE - Progresses at a constant rate from beginning to end
  • OUT - Initially progressing quickly and slowing towards the end

humfras 03-04-13 01:48 AM


Originally Posted by zork (Post 273862)


You can cheat alot more if you have to. Atleast it's a huge improvement of what we currently had to do.

The texture can use blending and gradients are possible aswell. Additonally you can use overlays or backgrounds. You can recolor on value change. You can even position another texture (spark) ontop of the ring.

Bzgl. sparks teste ich seit einiger Zeit für CursorCastbar die 3D-Zauberanimation (z.B. Shadowbolt) als zusätzliches Rotationsobjet (siehe auch Poisoner5).
Dynamische Texturen (hier: sich verwindente Doppelstränge) brauchen zur Darstellung eine vorlaufende Sichtgrenze. Sollte ja möglich sein.
Problematisch wird es, wenn dynamische Schattenverläufe nötig sind. Oder ist dies mit Overlay-Texturen möglich ('MaskTexture')?

zork 03-13-13 11:56 AM

Lol...SetRotation has a bug. It does sth to my ring texture.

To get it to work properly I had to use the SQRT trick posted by Saiket here:

My code is:
Lua Code:
  1. -- // DiscoKugel2
  2.   -- // zork - 2013
  4.   --get the addon namespace
  5.   local addon, ns = ...
  7.   local unpack = unpack
  8.   local _G = _G
  9.   local CF = CreateFrame
  10.   local UIP = UIParent
  11.   local abs = math.abs
  12.   local sin = math.sin
  13.   local pi = math.pi
  15.   -----------------------------
  16.   -- FUNCTIONS
  17.   -----------------------------
  19.   local f = CF("Frame",nil,UIP)
  20.   f:SetSize(512,512)
  21.   f:SetScale(0.5)
  22.   f.w, f.h = f:GetSize()
  23.   f:SetPoint("CENTER")
  25.   local t = f:CreateTexture(nil, "BACKGROUND", nil, -8)
  26.   t:SetTexture("Interface\\AddOns\\rTestRing2\\media\\ring")
  27.   t:SetAllPoints()
  28.   t:SetAlpha(0.2)
  30.   local sf1 = CF("ScrollFrame",nil,f)
  31.   sf1:SetSize(f.w/2,f.h)
  32.   sf1:SetPoint("LEFT")
  34.   local sc1 = CF("Frame")
  35.   sf1:SetScrollChild(sc1)
  36.   sc1:SetSize(f.w,f.h)
  38.   local rt1 = sc1:CreateTexture(nil,"BACKGROUND",nil,-6)
  39.   rt1:SetTexture("Interface\\AddOns\\rTestRing2\\media\\ring_half")
  40.   rt1:SetSize(sqrt(2)*f.w,sqrt(2)*f.h)
  41.   rt1:SetPoint("CENTER")
  42.   rt1:SetVertexColor(1,0,0)
  43.   rt1:SetRotation(math.rad(40)) -- etc
  45.   --local ag = rt1:CreateAnimationGroup()
  46.   --local anim = ag:CreateAnimation("Rotation")
  47.   --anim:SetDegrees(90)
  48.   --anim:SetDuration(10)
  49.   --ag:Play()

Maybe it has sth to do with the mysterious 1px I read about. Going to try to snip out 1px of my ring.
Afaik I read sth about it in Iriels ring theory. Thus every texture with a transparent outer edge needs to stay away from the texture edge by atleast 1px. Gonna try that. I think they did that to determine matching background colors or the like.

Loooool. That worked. I stripped the outer pixel and BÄÄÄM.

So when working with Texture:SetRotation() you have to make sure to do these:
  • Texture size has to be in SQRT
  • Texture rotation must be in rad
  • Texture file must not hit the other edge of the image or you will get background color copy behaviour that you may not want.

SDPhantom 03-13-13 12:31 PM

The reason for the first bug you mentioned is just the way WoW decides to render the out of bounds area of a texture's image. It tends to duplicate the last pixel out past the bounds of the image in order to fill the rendering area of the texture. This has nothing to do with texture:SetRotation() and will show up if you use texture:SetTexCoord() with coordinates that extend out of bounds.

The problem in which the SQRT method fixes is that Blizzard chose to have a texture shrink so the corners of an image fit in it at a 45 degree angle whenever texture:SetRotation() is used. If you manually calculate the coordinates of the corners and set the texcoord yourself, this doesn't apply. Although it's probably easier and more efficient to just multiply the intended size of the texture object with SQRT(2) as shown by your code example.

zork 03-13-13 01:40 PM

Thanks for the insight SDPhantom.

I'm on the way of creating an oUF layout from this. I really wanted to do this for a long time. Now I'm finally able to make it work properly.

I'm currently setting up the orb templates in my GFX program. Currently I have two templates in mind that I want to bring to life.

Outer ring templates

It can be combined with an orb in the center.

Thanks to SetPortraitToTexture() [] it is even possible to work with circular icon symbols. It may not seem that the icon is circular but in fact it is.

Lua Code:
  1. local icon = select(3,GetSpellInfo(12880))
  2.   --icon = "Interface\\LFGFrame\\UI-LFR-PORTRAIT"
  3.   local t = helper:CreateTexture(nil,"OVERLAY",nil,-8)
  4.   t:SetTexCoord(0, 1, 0, 1)
  5.   t:SetAllPoints()
  6.   --t:SetTexture(icon)
  7.   SetPortraitToTexture(t,icon)


So a template-idea can be adding a circular cast icon inside a circular castbar and ring unitframes.


I made the code of the stuff above available via SVN:

10leej 03-13-13 08:36 PM

Love what I'm seeing here :)

zork 03-14-13 06:00 AM

Currently doing some font tests and finishing the template:

Not sure which font I want to use. All fonts are from (except Arial)

Hmm have not decided on the border width. 4, 6 or 8.

Top version is with castbar. Bottom is without.

zork 03-14-13 09:07 AM

The second layout I want to do is a revival of my oUF_Orbs mod (

The problem is the castbar icon. I think I have to put it somewhere else.

Dridzt 03-14-13 10:23 AM

*swoons* :o

10leej 03-14-13 12:55 PM

Why not have the castbar circle the healthbar which circles the mana bar?

Lombra 03-14-13 07:00 PM

Looks amazing. :D

Talyrius 03-14-13 07:05 PM

The bright colors and round shapes remind me of poké balls from Pokémon.

zork 03-15-13 04:42 AM

You get that those are only examples showing the technique behind the scenes right? I'm just showing options. Everything else is personal preference. Do whatever you want. You have the freedom to do so.

You can use any color. You can do quarter, half, full-rings. You can use any ring-width and so on ...

pelf 03-23-13 11:20 AM


Originally Posted by zork (Post 274641)
The problem is the castbar icon. I think I have to put it somewhere else.

Top left has symmetry with the cast time. Have you tried putting it behind the main orb?

That looks kind of okay to me.

All times are GMT -6. The time now is 02:22 AM.

vBulletin © 2014, Jelsoft Enterprises Ltd
©2012 ZAM Network LLC