Thread Tools Display Modes
12-24-15, 05:18 PM   #1
badness
A Cliff Giant
 
badness's Avatar
Join Date: May 2010
Posts: 74
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.
  Reply With Quote
12-25-15, 01:44 PM   #2
Lombra
A Molten Giant
 
Lombra's Avatar
AddOn Author - Click to view addons
Join Date: Nov 2006
Posts: 554
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.
__________________
Grab your sword and fight the Horde!
  Reply With Quote
12-25-15, 04:24 PM   #3
jeffy162
A Pyroguard Emberseer
 
jeffy162's Avatar
AddOn Author - Click to view addons
Join Date: May 2009
Posts: 2,364
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.
__________________
Ahhhh, the vagueries of the aging mind. Wait.... What was I saying?


Carbonite <----- GitHub main module (Maps ONLY) download link. The other modules are also available on GitHub.
Carbonite-CLASSIC<----- GitHub link to Carbonite Classic. Thanks to ircdirk for this!

Last edited by jeffy162 : 12-25-15 at 04:26 PM.
  Reply With Quote
12-25-15, 04:25 PM   #4
badness
A Cliff Giant
 
badness's Avatar
Join Date: May 2010
Posts: 74
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)
  Reply With Quote
12-27-15, 04:53 PM   #5
badness
A Cliff Giant
 
badness's Avatar
Join Date: May 2010
Posts: 74
still in need of some assistance with this please
  Reply With Quote

WoWInterface » Developer Discussions » Graphics Help » Adding 3px Border to bBUffs

Thread Tools
Display Modes

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