Step 07

Step 07 – Buffs and Debuffs

oUF provides the functionality to display buffs and debuffs in its element aura.lua.

There are three different elements handled there: Buffs, Debuffs and Auras. Let me explain the differences: Buffs and Debuffs are exactly what you would expect: They are displaying buffs and debuffs on any unit. Auras do work slightly different, they are combining buffs and debuffs and display them as one element.

We do want to add seperate buffs and debuffs, so I will show how this works. What is done here can easily be adapted to auras.

a) Adding Buffs to the player-frame

haste did some documentation here on github, so we can easily see which parameters we can directly manipulate. Let’s start very basic:

First of all we create a frame called self.Buffs. We do this in layout.lua in our player-specific function. The size of each buff should be adjustable, so we add self.Buffs.size = cfg.auraSize.

Remember, that cfg is fetched from our SavedVariables, once we activate this feature. We will have to initialise this, so open settings.lua and add ['auraSize'] = 22, to the player-specific settings-array. While you’re here, add ['auraSpacing'] = 6, aswell, since we want the spacing of the buffs (and debuffs) to be adjustable, too.

In layout.lua we have to add self.Buffs.spacing = cfg.auraSpacing.

To make our buffs show up, we need to define the number of buffs to be displayed. We do add some math here, because our frame-sizes are adjustable, as well as our buff-size. So self.Buffs.num must be calculated:

self.Buffs.num = floor(cfg.width/(cfg.auraSize+cfg.auraSpacing)), which means: The number of the buffs is the frame-width divided by the size of a single buff and the spacing.

Finally, we have to adjust the size of the frame self.Buffs and set its position. We should have something like this:

	self.Buffs = CreateFrame('Frame', nil, self)
	self.Buffs:SetSize(floor(cfg.width/(cfg.auraSize+cfg.auraSpacing))*(cfg.auraSize+cfg.auraSpacing)-cfg.auraSpacing, cfg.auraSize)
	self.Buffs:SetPoint('TOP', self, 'BOTTOM', 0, -10)
	self.Buffs.size = cfg.auraSize
	self.Buffs.spacing = cfg.auraSpacing
	self.Buffs.num = floor(cfg.width/(cfg.auraSize+cfg.auraSpacing))

Frood is not able to buff anything, so Dijkstra is demonstrating the current look.

b) The style

As you can see, the buffs are showing up, but they are ugly as hell. To make them fit our overall style, we use oUF’s PostCreateIcon-hook, which is executed after the creation of an icon. This way, we can give the icons some style!

The hook is applied by self.Buffs.PostCreateIcon = core.PostCreateIcon and core.PostCreateIcon looks like this:

--[ [ Styles aura-icons in Splash-Style
	VOID PostCreateIcon(FRAME self, BUTTON b)
	- Cut off ugly Blizzard-IconBorders
	- no CD-frame
	- 1px border (background)
	- add Gloss
] ]
core.PostCreateIcon = function(self, b)

	b.icon:SetTexCoord(0.1, 0.9, 0.1, 0.9)
	b.cd:SetAllPoints(b)
	b.cd:SetFrameLevel(0)
	b.cd:Hide()

	b.back = b:CreateTexture(nil, 'BACKGROUND')
	b.back:SetPoint('TOPLEFT', -1, 1)
	b.back:SetPoint('BOTTOMRIGHT', 1, -1)
	b.back:SetTexture(0, 0, 0, 1)

	b.gloss = b:CreateTexture(nil, 'ARTWORK')
	b.gloss:SetAllPoints(b)
	b.gloss:SetTexture(settings.tex.gloss_aura)
end

Again, gloss is only applied to style the icon, back is the 1px border. The icon-texture is cutted a bit to get rid of the ugly Blizzard-borders. This is highly optional.

Here you can see how it looks like.

c) Debuffs

We can reuse all the code above to create the debuffs.

	self.Debuffs = CreateFrame('Frame', nil, self)
	self.Debuffs:SetSize(floor(cfg.width/(cfg.auraSize+cfg.auraSpacing))*(cfg.auraSize+cfg.auraSpacing)-cfg.auraSpacing, cfg.auraSize)
	self.Debuffs:SetPoint('BOTTOM', self, 'TOP', 0, 7)
	self.Debuffs.size = cfg.auraSize
	self.Debuffs.spacing = cfg.auraSpacing
	self.Debuffs.num = floor(cfg.width/(cfg.auraSize+cfg.auraSpacing))
	self.Debuffs.PostCreateIcon = core.PostCreateIcon

d) Conclusion

Here is the current code after adding the buffs and debuffs.
Before the next step I will apply this code to the target-frame aswell. It is really just about understanding the technique and apply it. You should easily be able to adapt this to your layout aswell.