Forgot how to Create Frame

Guides UI and Macro
1

I’m a bit rusty on my Lua skills lately.
I’m trying to add a extra frame texture as a background to the player and target frame to finish the unit frames I’m putting together.

The texture doesn’t do anything it’s just part of the frame. I wanted to anchor and center it to the portrait of the player / target frame or the player / target Frame it’s self as long as it stays in the background strata. Either one would do.

The reason why is so I can have the health ring not overlap or get covered which what happens if I add the extra frame to the player / target frame it’s self.

2

That sounds confusing.
Do you want to place a spinner over the unit portrait and have it display on top of everything else that is displayed there?

If so, /fstack the portrait, find the frame strata/level of the highest frame there, create your spinner and set it’s strata to be the same/higher and level accordingly:

3

Hey Fizz, No it’s not for the spinners it’s just a plain background texture so it looks like part of the player / target frames with the spinners above that . The dragon texture which is the frame it’s self goes above it all so it looks like it’s wrapping around the background texture and spinners.

If I add the background to the dragon texture as one texture it stays in that strata so I can’t put the spinners in between them.

So I was trying to create a frame texture as a background centered behind the portrait would be key unless there was a way to just add a frame with the strata as background then anchor it to the player / target ( unit frames )

The setup is basically a background in center
Spinners on low strata
Then the dragon frame is on medium.

I was going to get back to the spinners right away after that but this got in the way after I added both textures together in Photoshop realized it wouldn’t work and needed the frames separate or on a different strata.

If there’s a way to show you a photo on here I have the setup on Weakauras how it looked and what it looks like now without Weakauras lol
I’m about to get of work in about an hour from now ( it’s my Friday finally )

4

That’s just as confusing, you mention a backgound to the portrait but your 3 layer list goes straight from background to spinner to dragon frame with no mention of the portrait.

You can upload an image on a site like Imgur.com and paste the URL here (enclose it in code tags by using the </> button above post edit box if needed).

5

hope this works https://imgur.com/a/AoGPAqk
Guess it kind of did lol. Well that page will show you how it looks in WeakAuras, what it looks like now, and the background texture I’m trying to add in.
I’m using the adapt add-on for the portrait otherwise I don’t think the portrait would be visible at all taking it away from the default U.I

6

Just like fames can be moved up/down in frame layers using SetFrameStrata/SetFrameLevel, textures can be moved up/down using SetDrawLayer.

You can add frames and textures to do what you need, not just to the spinner but to other frames as well.

This is my target spinner example but using the same circle texture as a background, the spinner and an overlay to give it a ring look. It’s a rudementry example but there aren’t any other circle/ring type textures in the UI that I could find on a quick look…

-- Usage:
-- spinner = CreateSpinner(parent)
-- spinner:SetTexture('texturePath')
-- spinner:SetBlendMode('blendMode')
-- spinner:SetVertexColor(r, g, b)
-- spinner:SetClockwise(boolean) -- true to fill clockwise, false to fill counterclockwise
-- spinner:SetReverse(boolean) -- true to empty the bar instead of filling it
-- spinner:SetValue(percent) -- value between 0 and 1 to fill the bar to
 
-- Some math stuff
local cos, sin, pi2, halfpi = math.cos, math.sin, math.rad(360), math.rad(90)
local function Transform(tx, x, y, angle, aspect) -- Translates texture to x, y and rotates about its center
    local c, s = cos(angle), sin(angle)
    local y, oy = y / aspect, 0.5 / aspect
    local ULx, ULy = 0.5 + (x - 0.5) * c - (y - oy) * s, (oy + (y - oy) * c + (x - 0.5) * s) * aspect
    local LLx, LLy = 0.5 + (x - 0.5) * c - (y + oy) * s, (oy + (y + oy) * c + (x - 0.5) * s) * aspect
    local URx, URy = 0.5 + (x + 0.5) * c - (y - oy) * s, (oy + (y - oy) * c + (x + 0.5) * s) * aspect
    local LRx, LRy = 0.5 + (x + 0.5) * c - (y + oy) * s, (oy + (y + oy) * c + (x + 0.5) * s) * aspect
    tx:SetTexCoord(ULx, ULy, LLx, LLy, URx, URy, LRx, LRy)
end
 
-- Permanently pause our rotation animation after it starts playing
local function OnPlayUpdate(self)
    self:SetScript('OnUpdate', nil)
    self:Pause()
end
 
local function OnPlay(self)
    self:SetScript('OnUpdate', OnPlayUpdate)
end
 
local function SetValue(self, value)
    -- Correct invalid ranges, preferably just don't feed it invalid numbers
    if value > 1 then value = 1
    elseif value < 0 then value = 0 end
    
    -- Reverse our normal behavior
    if self._reverse then
        value = 1 - value
    end
    
    -- Determine which quadrant we're in
    local q, quadrant = self._clockwise and (1 - value) or value -- 4 - floor(value / 0.25)
    if q >= 0.75 then
        quadrant = 1
    elseif q >= 0.5 then
        quadrant = 2
    elseif q >= 0.25 then
        quadrant = 3
    else
        quadrant = 4
    end
    
    if self._quadrant ~= quadrant then
        self._quadrant = quadrant
        -- Show/hide necessary textures if we need to
        if self._clockwise then
            for i = 1, 4 do
                self._textures[i]:SetShown(i < quadrant)
            end
        else
            for i = 1, 4 do
                self._textures[i]:SetShown(i > quadrant)
            end
        end
        -- Move scrollframe/wedge to the proper quadrant
        self._scrollframe:SetAllPoints(self._textures[quadrant])    
    end
 
    -- Rotate the things
    local rads = value * pi2
    if not self._clockwise then rads = -rads + halfpi end
    Transform(self._wedge, -0.5, -0.5, rads, self._aspect)
    self._rotation:SetRadians(-rads)
end
 
local function SetClockwise(self, clockwise)
    self._clockwise = clockwise
end
 
local function SetReverse(self, reverse)
    self._reverse = reverse
end
 
local function OnSizeChanged(self, width, height)
    self._wedge:SetSize(width, height) -- it's important to keep this texture sized correctly
    self._aspect = width / height -- required to calculate the texture coordinates
end
 
-- Creates a function that calls a method on all textures at once
local function CreateTextureFunction(func, self, ...)
    return function(self, ...)
        for i = 1, 4 do
            local tx = self._textures[i]
            tx[func](tx, ...)
        end
        self._wedge[func](self._wedge, ...)
    end
end
 
-- Pass calls to these functions on our frame to its textures
local TextureFunctions = {
    SetTexture = CreateTextureFunction('SetTexture'),
    SetBlendMode = CreateTextureFunction('SetBlendMode'),
    SetVertexColor = CreateTextureFunction('SetVertexColor'),
}
 
local function CreateSpinner(parent)
    local spinner = CreateFrame('Frame', nil, parent)
    
    -- ScrollFrame clips the actively animating portion of the spinner
    local scrollframe = CreateFrame('ScrollFrame', nil, spinner)
    scrollframe:SetPoint('BOTTOMLEFT', spinner, 'CENTER')
    scrollframe:SetPoint('TOPRIGHT')
    spinner._scrollframe = scrollframe
    
    local scrollchild = CreateFrame('frame', nil, scrollframe)
    scrollframe:SetScrollChild(scrollchild)
    scrollchild:SetAllPoints(scrollframe)
    
    -- Wedge thing
    local wedge = scrollchild:CreateTexture()
    wedge:SetPoint('BOTTOMRIGHT', spinner, 'CENTER')
    spinner._wedge = wedge
    
    -- Top Right
    local trTexture = spinner:CreateTexture()
    trTexture:SetPoint('BOTTOMLEFT', spinner, 'CENTER')
    trTexture:SetPoint('TOPRIGHT')
    trTexture:SetTexCoord(0.5, 1, 0, 0.5)
    
    -- Bottom Right
    local brTexture = spinner:CreateTexture()
    brTexture:SetPoint('TOPLEFT', spinner, 'CENTER')
    brTexture:SetPoint('BOTTOMRIGHT')
    brTexture:SetTexCoord(0.5, 1, 0.5, 1)
    
    -- Bottom Left
    local blTexture = spinner:CreateTexture()
    blTexture:SetPoint('TOPRIGHT', spinner, 'CENTER')
    blTexture:SetPoint('BOTTOMLEFT')
    blTexture:SetTexCoord(0, 0.5, 0.5, 1)
    
    -- Top Left
    local tlTexture = spinner:CreateTexture()
    tlTexture:SetPoint('BOTTOMRIGHT', spinner, 'CENTER')
    tlTexture:SetPoint('TOPLEFT')
    tlTexture:SetTexCoord(0, 0.5, 0, 0.5)
    
    -- /4|1\ -- Clockwise texture arrangement
    -- \3|2/ --
 
    spinner._textures = {trTexture, brTexture, blTexture, tlTexture}
    spinner._quadrant = nil -- Current active quadrant
    spinner._clockwise = true -- fill clockwise
    spinner._reverse = false -- Treat the provided value as its inverse, eg. 75% will display as 25%
    spinner._aspect = 1 -- aspect ratio, width / height of spinner frame
    spinner:HookScript('OnSizeChanged', OnSizeChanged)
    
    for method, func in pairs(TextureFunctions) do
        spinner[method] = func
    end
    
    spinner.SetClockwise = SetClockwise
    spinner.SetReverse = SetReverse
    spinner.SetValue = SetValue
    
    local group = wedge:CreateAnimationGroup()
    local rotation = group:CreateAnimation('Rotation')
    spinner._rotation = rotation
    rotation:SetDuration(0)
    rotation:SetEndDelay(1)
    rotation:SetOrigin('BOTTOMRIGHT', 0, 0)
    group:SetScript('OnPlay', OnPlay)
    group:Play()
    
    return spinner
end

local spinner1 = CreateSpinner(UIParent)
spinner1:SetPoint('CENTER', UIParent)
spinner1:SetSize(64, 64)
spinner1:SetTexture("Interface\\Masks\\CircleMaskScalable")
spinner1:SetVertexColor(0, 1, 0)
spinner1:SetClockwise(false)
spinner1:SetReverse(false)
spinner1:Hide()

spinner1.Background = spinner1:CreateTexture()
spinner1.Background:SetDrawLayer("BACKGROUND", -1)
spinner1.Background:SetSize(84, 84)
spinner1.Background:SetPoint("CENTER")
spinner1.Background:SetTexture("Interface\\Masks\\CircleMaskScalable")
spinner1.Background:SetVertexColor(0.8, 0.2, 0.6)


local CenterOverlay = CreateFrame("Frame", nil, spinner1)
CenterOverlay:SetFrameLevel(10)
CenterOverlay:SetSize(34, 34)
CenterOverlay:SetPoint("CENTER")
CenterOverlay.Texture = CenterOverlay:CreateTexture()
CenterOverlay.Texture:SetAllPoints()
CenterOverlay.Texture:SetTexture("Interface\\Masks\\CircleMaskScalable")
CenterOverlay.Texture:SetVertexColor(0.2, 0.2, 0.8)

local healthmax = 0
local health = 0
spinner1:RegisterUnitEvent("UNIT_HEALTH", target)
spinner1:RegisterEvent("PLAYER_TARGET_CHANGED")
spinner1:SetScript("OnEvent", function(sxelf, event, ...)
	if event == "PLAYER_TARGET_CHANGED" then
		if not UnitExists("target") then
			spinner1:Hide()
			return
		end
		spinner1:Show()
	end
	healthmax = UnitHealthMax("target")
	health = UnitHealth("target")
	local h = health / healthmax
	spinner1:SetValue(h)
end)
7

I figured out what I was doing wrong. I was changing the strata for the dragon frame on player but not target by accident lol (whoops)
I just changed the strata on the target frame! I’m ready to start putting it together now wish me luck.

Update: Progress! I have the background spinner and health ring in place for Target. Now I have to add in the power and mana spinners with on event.

I’m seeing if I can change the angle or value where the ring meets up as it fills. I need to turn it to the left a bit right in the middle of where tail and head of the dragon is.