WoWInterface

WoWInterface (https://www.wowinterface.com/forums/index.php)
-   Graphics Help (https://www.wowinterface.com/forums/forumdisplay.php?f=14)
-   -   Adding 3px Border to bBUffs (https://www.wowinterface.com/forums/showthread.php?t=52996)

badness 12-24-15 05:18 PM
Adding 3px Border to bBUffs
 
Hey, I'm in the process of building a UI with Lua only addons. I was wondering if somebody could help me achieve the look TukUi achieved. It looks like this:

A 3px border with black at the outside and grey inside.

Lombra 12-25-15 01:44 PM
Can be done in a number of ways.

If you don't need the background to be transparent a simple solution could be to create three textures; first one black, then one gray offset by 1 from each edge, and then another black offset from gray edge by 1.

Or for transparent background, you can create each edge individially. First a three pixel wide black texture, and then a gray 1 pixel wide one in the middle of each black one.

Or you can combine either of the above with backdrops, but you don't gain much by doing that.

Texture sub layers will come in handy.

jeffy162 12-25-15 04:24 PM
OR you could look through TukUI to find out where he skins the buffs / debuffs and minimap buttons at, and how. I say this because he doesn't use graphics to skin them, and you're trying to do your own UI with Lua. Tuk uses Lua (I'm prretty sure) to skin the buffs / debuffs and minimap buttons. Either that or XML, but, that'd be .......... just weird. I'm not even sure if it's possible with XML. But I don't know hardly anything about XML and Lua.

badness 12-25-15 04:25 PM
Code:
buttonsize = 40        -- Buff Size
spacing = 4            -- Buff Spacing
buffsperrow = 20        -- Buffs Per Row
growthvertical = 1      -- Growth Direction. 1 = down, 2 = up
growthhorizontal = 1    -- Growth Direction. 1 = left, 2 = right
font = "Fonts\\FRIZQT__.ttf"

-- Default Spawn Positions
local positions = {
    [1]  =  { p = "TOPRIGHT",  a = UIParent,  x = 0,    y = 0 },  -- Buff Anchor
    [2]  =  { p = "TOPRIGHT",  a = UIParent,  x = -271,  y = -171  },  -- Debuff Anchor
    [3]  =  { p = "TOPRIGHT",  a = UIParent,  x = 0,    y = -110  },  -- Enchant Anchor
}
--End Config

local function anchor(frame, r, g, b, pos, anchor, x, y)
    frame:SetBackdrop({bgFile = 'Interface\\Buttons\\WHITE8x8'})
    frame:SetBackdropColor(r, g, b, 0.4)
    frame:SetHeight(buttonsize+20)
    frame:SetWidth(buttonsize+20)
    frame:SetPoint(pos, anchor, pos, x, y)
    frame:EnableMouse(true)
    frame:SetMovable(true)
    frame:SetUserPlaced(true)
    frame:SetFrameStrata("BACKGROUND")
    frame:SetClampedToScreen(true)
    frame:SetAlpha(0)
end

local function MoveFunc(frame)
    if movebars==1 then
        frame:SetAlpha(1)
        frame:RegisterForDrag("LeftButton","RightButton")
        frame:SetScript("OnDragStart", function(self) self:StartMoving() end)
        frame:SetScript("OnDragStop", function(self) self:StopMovingOrSizing() end)
        frame:SetFrameStrata("DIALOG")
    elseif movebars==0 then
        frame:SetAlpha(0)
        frame:SetScript("OnDragStart", function(self) self:StopMovingOrSizing() end)
        frame:SetScript("OnDragStop", function(self) self:StopMovingOrSizing() end)
        frame:SetFrameStrata("BACKGROUND")
    end
end

local buffholder = CreateFrame("Frame", "Buffs", UIParent)
anchor(buffholder, 0, 1, 0, positions[1].p, positions[1].a, positions[1].x, positions[1].y)
local debuffholder = CreateFrame("Frame", "Debuffs", UIParent)
anchor(debuffholder, 1, 0, 0, positions[2].p, positions[2].a, positions[2].x, positions[2].y)
local enchantholder = CreateFrame("Frame", "TempEnchants", UIParent)
anchor(enchantholder, 0, 0, 1, positions[3].p, positions[3].a, positions[3].x, positions[3].y)

SlashCmdList["MOVEBUFFS"] = function()
    if movebars~=1 then movebars = 1
    else movebars = 0 end
    MoveFunc(buffholder)
    MoveFunc(debuffholder)
    MoveFunc(enchantholder)
end
SLASH_MOVEBUFFS1 = "/movebuffs"

local function makeitgrow(button, index, anchor)
    for i = 1, BUFF_ACTUAL_DISPLAY do
        if growthvertical == 1 then
                        if growthhorizontal == 1 then
                                if index == ((buffsperrow*i)+1) then _G[button..index]:SetPoint("TOPRIGHT", anchor, "TOPRIGHT", 0, -(buttonsize+spacing+4)*i) end
                        else
                                if index == ((buffsperrow*i)+1) then _G[button..index]:SetPoint("TOPLEFT", anchor, "TOPLEFT", 0, -(buttonsize+spacing+4)*i) end
                        end
        else
                        if growthhorizontal == 1 then
                                if index == ((buffsperrow*i)+1) then _G[button..index]:SetPoint("TOPRIGHT", anchor, "TOPRIGHT", 0, (buttonsize+spacing+4)*i) end
                        else
                                if index == ((buffsperrow*i)+1) then _G[button..index]:SetPoint("TOPLEFT", anchor, "TOPLEFT", 0, (buttonsize+spacing+4)*i) end
                        end
        end
    end
    if growthhorizontal == 1 then
        _G[button..index]:SetPoint("RIGHT", _G[button..(index-1)], "LEFT", -(spacing+4), 0)
    else
        _G[button..index]:SetPoint("LEFT", _G[button..(index-1)], "RIGHT", (spacing+4), 0)
    end
end

local function StyleBuffs(button, index, framekind, anchor)
        local buff = button..index
    _G[buff.."Icon"]:SetTexCoord(.1, .9, .1, .9)
    _G[buff.."Icon"]:SetDrawLayer("OVERLAY")
    _G[buff]:ClearAllPoints()
    _G[buff]:SetHeight(buttonsize)
        _G[buff]:SetWidth(buttonsize)
    _G[buff]:SetBackdrop({bgFile = "Interface\\Buttons\\WHITE8x8", insets = { left = -2, right = -2, top = -2, bottom = -2}})
   
    if framekind == 2 then _G[buff]:SetBackdropColor(.9,0,0,1)
    elseif framekind == 3 then _G[buff]:SetBackdropColor(0,0,.5,1)
    else _G[buff]:SetBackdropColor(0,0,0,1) end
   
    _G[buff.."Count"]:SetFont(font, 14, "OUTLINE")
    _G[buff.."Duration"]:SetFont(font, 14, "OUTLINE")
    --_G[buff.."Count"]:SetTextColor(1, 1, 0)
   
        _G[buff.."Count"]:ClearAllPoints()
        _G[buff.."Count"]:SetPoint("TOPRIGHT", 2, 2)
    _G[buff.."Count"]:SetDrawLayer("OVERLAY")
   
        _G[buff.."Duration"]:ClearAllPoints()
        _G[buff.."Duration"]:SetPoint("BOTTOM",2, -5)
    _G[buff.."Duration"]:SetDrawLayer("OVERLAY")
    if _G[buff.."Border"] then _G[buff.."Border"]:Hide() end
   
    if index == 1 then _G[buff]:SetPoint("TOPRIGHT", anchor, "TOPRIGHT", -10, -10) end
    if index ~= 1 then makeitgrow(button, index, _G[button..1]) end
end

local function UpdateBuff()
    for i = 1, BUFF_ACTUAL_DISPLAY do
        StyleBuffs("BuffButton", i, 1, buffholder)
    end
    for i = 1, BuffFrame.numEnchants do
        StyleBuffs("TempEnchant", i, 3, enchantholder)
    end
end
local function UpdateDebuff(buttonName, index)
    StyleBuffs(buttonName, index, 2, debuffholder)
end

local function updateTime(button, timeLeft)
        local duration = _G[button:GetName().."Duration"]
        if SHOW_BUFF_DURATIONS == "1" and timeLeft then
                duration:SetTextColor(1, 1, 0)
                local d, h, m, s = ChatFrame_TimeBreakDown(timeLeft);
                if d > 0 then
                        duration:SetFormattedText("%1dd", d)
                elseif h > 0 then
                        duration:SetFormattedText("%1dh", h)
                elseif m > 0 then
                        duration:SetFormattedText("%1dm", m)
                else
                        duration:SetFormattedText("%1d", s)
                end
        end
end

hooksecurefunc("BuffFrame_UpdateAllBuffAnchors", UpdateBuff)
hooksecurefunc("DebuffButton_UpdateAnchors", UpdateDebuff)
hooksecurefunc("AuraButton_UpdateDuration", updateTime)
SetCVar("consolidateBuffs", 0)
This is the entire bBuff code which comes with a 2px black edge already I think. So if I understand you correctly make that layer 3px and then create a 1px gray edge?


Code:
local function StyleBuffs(button, index, framekind, anchor)
        local buff = button..index
    _G[buff.."Icon"]:SetTexCoord(.1, .9, .1, .9)
    _G[buff.."Icon"]:SetDrawLayer("OVERLAY")
    _G[buff]:ClearAllPoints()
    _G[buff]:SetHeight(buttonsize)
        _G[buff]:SetWidth(buttonsize)
    _G[buff]:SetBackdrop({bgFile = "Interface\\Buttons\\WHITE8x8", insets = { left = -2, right = -2, top = -2, bottom = -2}})
Im thinking this is the section I would need to edit? And as for creating the new edge how would i do that? (Im still pretty new to this lol)

badness 12-27-15 04:53 PM
still in need of some assistance with this please


All times are GMT -6. The time now is 10:37 AM.

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