I Gné? oUF, squoi ça?

Index
I Gné? oUF, squoi ça?................................................................................................................................2
Présentation de l'addon..........................................................................................................................2
Rapides explications..............................................................................................................................2
II Quelques bases indispensables...............................................................................................................2
Introduction aux fonctions.....................................................................................................................2
Utilisation de 'local'...............................................................................................................................3
III Structure de votre layout.......................................................................................................................3
Frame générale......................................................................................................................................3
Barre de vie...........................................................................................................................................4
Barre de mana/rage/énergie/puissance runique.....................................................................................4
Textes.....................................................................................................................................................4
Quelques additions................................................................................................................................4
IV Mise en place du layout........................................................................................................................4
Frame générale......................................................................................................................................6
Barre de vie...........................................................................................................................................7
Barre de mana/rage/énergie/puissance runique.....................................................................................8
Textes.....................................................................................................................................................9
Quelques additions..............................................................................................................................11
L'icône de leader.............................................................................................................................11
L'icône de raid.................................................................................................................................11
Le portrait.......................................................................................................................................11
Les buffs/debuffs............................................................................................................................12
Finalisation..........................................................................................................................................13
V Quelques tuyaux et choses pratiques....................................................................................................15
I Gné? oUF, squoi ça?
Présentation de l'addon
Comme le titre l'indique, oUF est un addon. Le seul problème c'est que tout seul il vous servira à rien,
ce qui n'est pas super pratique. Enfin si, justement: oUF est un addon qui va "manager" le layout que je
vais justement vous apprendre à créer.
L'avantage d' oUF est qu'il va s'occuper de toutes les taches fastidieuses pour vous. Vous n'avez qu'à
créer la partie graphique et l'addon s'occupe du reste, et très bien en plus ^^.
Rapides explications
Nous allons faire un layout le plus complet possible, abordant le plus possible (dans la limite de mes
capacités) de choses.
Si vous devez n'utiliser qu'un seul site pour vous aider c'est WowWiki partie Widget API, certes tout est
en anglais mais le code aussi donc ^^
http://www.wowwiki.com/Widget_API
II Quelques bases indispensables
Introduction aux fonctions
Les fonctions sont la base de tout addon.
Une fonction est une partie de code qui fait des choses précises comme changer l'opacité.
Ex: SetAlpha(valeur entre 0 et 1) permet de changer l'opacité
On utilise : pour appeler une fonction générale
Minimap:SetAlpha(0.5)
Votre minimap sera à 50% d'opacité
Vous pouvez vous même créer vos propres fonctions
Ex:
function Test()
ChatFrame1:AddMessage('Ceci est un test')
end
Maintenant si dans votre code vous mettez Test() la fonction Test créée précédemment sera effectuée.
Utilisation de 'local'
Utiliser local en début de ligne permet de stocker une variable dans votre addon
local texture = "Interface\\AddOns\\Test\\texture"
Chaque fois que vous marquerez la variable texture dans votre addon cela reverra au fichier relatif à
cette texture
Ex:
local frame = CreateFrame(nil,nil,UIParent)
local frame.texture = frame:CreateTexture(nil,'OVERLAY')
frame.texture:SetTexture(texture)
On a d'abord créé la frame puis sa texture et enfin on lui a dit quelle texture appliquer.
L'utilisation intensive de WowWiki est fortement recommandé au départ pour connaître les fonctions
que vous allez utiliser le plus.
III Structure de votre layout
Frame générale
C'est la base de votre layout, elle a besoin d'avoir une longueur, une largeur, et pourquoi pas un
background.
Barre de vie
La base d'un addon d'UnitFrame: la barre de vie. C'est une StatusBar qui change de valeur suivant votre
vie, elle a besoin d'une texture, d'une taille, d'être placée par rapport à la frame générale, et pourquoi
pas un background
Barre de mana/rage/énergie/puissance runique
cf. Barre de vie mais pour le mana/rage/énergie/puissance runique
Textes
Les textes affichant vos points de vie, de mana, les noms, niveaux etc
Quelques additions
Nous rajouterons une barre de cast, un portrait,les buffs/debuffs, et le support pour quelques plugins.
IV Mise en place du layout
Je vais appeler mon addon oUF_Test, donc vous vous occupez du fichier ,toc et du répertoire
Avant tout on préfère généralement mettre en place les textures, enfin les local.
Je vous conseille de vous créer un répertoire media a l'intérieur
Tous les noms commençant par self ou self.quelquechose NE DOIVENT PAS ETRE MODIFIES.
Vous allez donc commender par mettre vos local
La police et sa taille
local font, fontsize = "Fonts\\FRIZQT__.ttf", 12
Le background
local backdrop = {
bgFile = "Interface\\AddOns\\oUF_Test\\media\\HalBackgroundA", tile =
true, tileSize = 16,
insets = {left = -2, right = -2, top = -2, bottom = -2},
}
La texture pour les barres de vie
local statusbar = "Interface\\AddOns\\oUF_Test\\media\\LiteStep"
Pour choisir plus facilement en fonction de la classe du joueur
local playerClass = select(2, UnitClass("player"))
Ensuite je vais rajouter les options pour que le clic droit sur la frame marche:
local menu = function(self)
local unit = self.unit:sub(1, -2)
local cunit = self.unit:gsub("(.)", string.upper, 1)
if(unit == "party" or unit == "partypet") then
ToggleDropDownMenu(1, nil, _G["PartyMemberFrame"..self.id.."DropDown"],
"cursor", 0, 0)
elseif(_G[cunit.."FrameDropDown"]) then
ToggleDropDownMenu(1, nil, _G[cunit.."FrameDropDown"], "cursor", 0, 0)
end
end
Ensuite pour me faciliter la vie, on va utiliser une fonction créée par Caellian pour la mise en place des
textes.
Elle consiste à créer un FontString, lui appliquer une police, une taille et un style.
local function SetFontString(parent, fontName, fontHeight, fontStyle)
local fs = parent:CreateFontString(nil, 'OVERLAY')
fs:SetFont(fontName, fontHeight, fontStyle)
fs:SetJustifyH('LEFT')
fs:SetShadowColor(0,0,0)
fs:SetShadowOffset(1.25, -1.25)
return fs
end
Par exemple
local texte = SetFontString(UIParent, font, fontsize, 'OUTLINE')
Les variables font et fontsize ayant déjà été ajoutées précédemment dans votre code
si vous avez bien suivi.
Frame générale
Tout notre layout doit être enregistré par le layout par une fonction que nous allons créer
local function Style(self, unit)
Ensuite nous allons donner quelques attributs pour le clic droit à toutes nos frames
self.colors = colors
self.menu = menu
self:RegisterForClicks('AnyUp')
self:SetAttribute('*type2', 'menu')
self:SetScript('OnEnter', UnitFrame_OnEnter)
self:SetScript('OnLeave', UnitFrame_OnLeave)
Ensuite nous allons rajouter un fond à notre frame
self:SetBackdrop(backdrop);
self:SetBackdropColor(0,0,0,.65)
Ensuite nous allons leur donner une taille en fonction du type d'unité
Pour le joueur et sa cible
if unit == 'player' or unit == 'target' then
self:SetAttribute('initial-height', 20)
self:SetAttribute('initial-width', 260)
end
Pour le focus, les pet et la cible de la cible
if unit == 'pet' or unit == 'focus' or unit == 'targettarget' then
self:SetAttribute('initial-height', 10)
self:SetAttribute('initial-width', 100)
end
Pour le raid et le groupe unit == 'party' ou unit == 'raid' ne marche pas donc on va utiliser une méthode
différentes qui consiste à chercher dans le nom de la frame mère s'il y a écrit oUF_Party ou oUF_Raid.
if(self:GetParent():GetName():match"oUF_Party") or
(self:GetParent():GetName():match"oUF_Raid") then
self:SetAttribute('initial-height', 20)
self:SetAttribute('initial-width', 120)
end
Barre de vie
Maintenant créons les barres de vie
L'élément géré par oUF sera self.Health, nous pouvons lui appliquer quelques filtres qui sont par
priorité
- colorTapping
- colorDisconnected – va changer la couleur de la barre si l'unit est déconnectée
- colorHappiness – va colorer en fonction de la satisfaction (que les pets je pense)
- colorClass – va utiliser les couleurs de raid pour la couleur de barre
- colorClassNPC – de même pour les PNJ (guerrier, mage et paladin seulement)
- colorReaction – en fonction de la réaction (hostile, amical, neutre,...)
- colorSmooth – va utiliser smoothGradient à la place du dégradé interne s'il est donné
- colorHealth
On va donc créer la StatusBar, la placer, lui donner une texture, une couleur et quelques filtres.
self.Health = CreateFrame('StatusBar', nil, self)
self.Health:SetPoint"TOP"
self.Health:SetStatusBarTexture(statusbar)
self.Health:SetHeight(15)
self.Health:SetPoint"RIGHT"
self.Health:SetPoint"LEFT"
self.Health:SetStatusBarColor(74/255,74/255,74/255)
self.Health.colorDisconnected = true
self.Health.colorClass = false
La barre de vie est donc attaché au haut, à la droite et à la gauche de la frame et fait 15 pixels de hauts,
sa couleur est un gris. Pour la changer simplement aller sous Paint est prendre les valeurs de rouge,
bleu et vert et les diviser par 255 (sachant que les couleurs doivent être données dans l'ordre r,v,b)
Mais toutes ses UF n'ont pas besoin d'avoir la même taille, changeons là donc
if unit == 'pet' or unit == 'focus' or unit == 'targettarget' then
self.Health:SetHeight(7)
end
if(self:GetParent():GetName():match"oUF_Party") or
(self:GetParent():GetName():match"oUF_Raid") then
self.Health.colorClass = true
self.Health:SetHeight(16)
end
Barre de mana/rage/énergie/puissance runique
De même pour les barres de mana je met donc directement le code
L'élément géré par oUF sera self.Power et ses filtres sont par priorité:
- colorTapping
- colorDisconnected
- colorHappiness
- colorPower
- colorClass
- colorClassNPC
- colorReaction
- colorSmooth
Les mêmes que self.Health donc.
self.Power = CreateFrame('StatusBar', nil, self)
self.Power:SetPoint("TOP", self.Health, "BOTTOM", 0, 0)
self.Power:SetStatusBarTexture(statusbar)
self.Power:SetHeight(4)
self.Power:SetPoint"LEFT"
self.Power:SetPoint"RIGHT"
self.Power:SetParent(self)
self.Power.colorPower = true
if unit == 'pet' or unit == 'focus' or unit == 'targettarget' then
self.Power:SetHeight(2)
end
if(self:GetParent():GetName():match"oUF_Party") or
(self:GetParent():GetName():match"oUF_Raid") then
self.Power:SetHeight(4)
end
La seule chose qui change c'est que la fonction SetPoint n'est pas utilisée de la même façon
Ici la barre est attachée par le haut au bas de la barre de vie avec un décalage de 0 px en abscisse et 0
px en ordonnée
Textes
Ici nous allons utiliser le système de tags présents dans oUF, si vous voulez une liste vous la trouverez
dans oUF\element\tags.lua au début
La fonction self:Tag s'utilise comme ceci
self:Tag(le_fontstring_a_tagger,'le texte avec le [tag en crochets]')
Nous créons donc un texte grâce à SetFontString, puis nous le plaçons et nous le tagguons
Le texte ne sera pas placé au même endroit suivant l'unité, nous allons donc changer son alignement et
sa place en fonction de l'unité
local healthtext = SetFontString(self.Health, font, 12)
healthtext:SetPoint('BOTTOM',self,'TOP',0,2)
healthtext:SetJustifyH('LEFT')
self:Tag(healthtext,'|cffffffff[curhp] | [perhp]%|r')
if unit == 'player' then
healthtext:SetJustifyH('RIGHT')
healthtext:ClearAllPoints()
healthtext:SetPoint('TOPLEFT',self,'BOTTOMLEFT',2,-1)
end
if unit == 'target' then
healthtext:SetJustifyH('LEFT')
healthtext:ClearAllPoints()
healthtext:SetPoint('TOPRIGHT',self,'BOTTOMRIGHT',-2,-1)
end
if(self:GetParent():GetName():match"oUF_Party") or
(self:GetParent():GetName():match"oUF_Raid") then
healthtext:SetPoint('LEFT',self,'LEFT',2,0)
self:Tag(healthtext,'[perhp]% |cff787878[missinghp]|r')
end
local powertext = SetFontString(self.Health, font, 10)
if unit == 'player' then
self:Tag(powertext,'|cffffffff[perpp]|r')
powertext:SetPoint('TOPRIGHT',self,'BOTTOMRIGHT',-2,-1)
powertext:SetJustifyH('LEFT')
end
if(self:GetParent():GetName():match"oUF_Party") or
(self:GetParent():GetName():match"oUF_Raid") then
powertext:SetPoint('RIGHT',self,'RIGHT',-2,0)
self:Tag(powertext,'[perpp]%')
end
local name = SetFontString(self.Health, font, 10)
name:SetPoint('LEFT', self.Health, 'LEFT',2,0)
if (UnitIsPlayer('target')) then
self:Tag(name,'[name] [raidcolor] [level] [shortclassification]
[dead]')
else
self:Tag(name,'[name] [level] [shortclassification]
[dead]')
end
if unit == 'player' or unit == 'focus' or unit == 'pet' then
name:Hide()
end
if(self:GetParent():GetName():match"oUF_Party") or
(self:GetParent():GetName():match"oUF_Raid") then
name:ClearAllPoints()
name:SetPoint('TOPLEFT', self, 'BOTTOMLEFT',0,-3)
self:Tag(name,'[name] [dead]')
end
Quelques additions
L'icône de leader
Nous allons rajouter quelques plugins comme l'icône de Leader
L'élément géré est self.Leader, nous créons donc la texture, la plaçons et lui donnons une taille
self.Leader = self.Health:CreateTexture(nil, 'OVERLAY')
self.Leader:SetPoint('TOPRIGHT', self, -1,-1 )
self.Leader:SetHeight(16)
self.Leader:SetWidth(16)
L'icône de raid
L'élément géré est self.RaidIcon, on fait la même chose que pour l'icône de leader
self.RaidIcon = self.Health:CreateTexture(nil, 'OVERLAY')
self.RaidIcon:SetPoint('BOTTOM', self.Portrait,'TOP' ,0,3)
self.RaidIcon:SetHeight(16)
self.RaidIcon:SetWidth(16)
Le portrait
L'élement géré est self.Portrait
Cette fois ci on doit créer un "PlayerModel", qu'on place, auquel on fixe une taille enfin la même chose
que d'habitude. On lui crée ensuite un fond gris clair, qui aura une opacité de 35%.
if unit == 'player' or unit == 'target' then
local port = CreateFrame"PlayerModel"
port:SetWidth(20)
port:SetHeight(20)
port:SetParent(self)
if unit == 'player' then
port:SetPoint('RIGHT',self,'LEFT',-1.5,0)
else
port:SetPoint('LEFT',self,'RIGHT',1.5,0)
end
local portbg = port:CreateTexture(nil, "BACKGROUND")
portbg:SetTexture(25/255,25/255,25/255,0.35)
portbg:SetAllPoints(port)
portbg:SetWidth(45)
portbg:SetHeight(45)
self.Portrait = port
Pour la castbar je vous passe un lien avec un screenshot et un lien pour le code (car il est trop long)
Code: http://deith.pastey.net/106450
Screenshot:
Les buffs/debuffs
Les éléments gérés sont self.Buffs ou self.Debuffs, tous les filtres sont disponibles dans oUF/elements/
aura.lua et en contient une liste non exhaustive , c'est aussi disponible ici
["growth-x"] désigne la direction horizontale vers laquelle les buffs vont aller quand un nouveau
apparaitra
["growth-y"] c'est la même chose mais pour la direction verticale.
if unit == 'target' then
self.Buffs = CreateFrame('Frame', nil, self)
self.Buffs.size = 16 * 1.1
self.Buffs["growth-x"] = "RIGHT"
self.Buffs["growth-y"] = "UP"
self.Buffs.spacing = 5.3
self.Buffs:SetHeight(self.Buffs.size)
self.Buffs:SetWidth(self.Buffs.size * 8)
self.Buffs:SetPoint('BOTTOMLEFT', self, 'TOPLEFT', 1, 3)
self.Debuffs = CreateFrame('Frame', nil, self)
self.Debuffs.size = 19 * 1.1
self.Debuffs.spacing = 5.3
self.Debuffs:SetHeight(self.Debuffs.size)
self.Debuffs:SetWidth(self.Debuffs.size * 6)
self.Debuffs['growth-y'] = 'DOWN'
self.Debuffs['growth-x'] = 'RIGHT'
self.Debuffs.showDebuffType = true
self.Debuffs.num = 40
self.Debuffs.filter = false
self.Debuffs:SetPoint('TOPLEFT', self, 'TOPRIGHT', 2, -1)
end
Une simple lecture permet de comprendre a part peut-être pour self.Buffs.size = nombre_en_une_ligne
* taille
Finalisation
Enfin finissons le style,
end
return self
Et enfin
Nous disons à oUF d'enregistrer notre style à partir de la fonction Style, et de l'activer.
Ensuite nous disons à oUF de créer les frames 'player', 'target', 'pet', 'targettarget','focus', du raid et du
groupe. A la suite de cette création nous plaçons les frames car autrement elles n'existent pas.
Dans SetManyAttributes nous pouvons voir 'yOffset',-15 ce qui signifie que entre les frames d'un
même groupe les frames sont séparées de 15 pixels verticalement vers le bas.
Ensuite je vous laisse déchiffrer un peu si vous voulez vraiment le personnaliser
oUF:RegisterStyle("Test", Style)
oUF:SetActiveStyle("Test")
oUF:Spawn("player"):SetPoint("RIGHT", UIParent, "CENTER", -125, -150)
oUF:Spawn("target"):SetPoint("LEFT", UIParent, "CENTER", 125, -150)
oUF:Spawn("pet"):SetPoint("BOTTOMLEFT", oUF.units.player, "TOPLEFT", 0, 15)
oUF:Spawn("targettarget"):SetPoint("CENTER", UIParent, "CENTER", 0, -157)
oUF:Spawn("focus"):SetPoint("BOTTOMRIGHT", oUF.units.player, "TOPRIGHT", 0, 15)
local raid = {}
for i = 1, 8 do
local group = oUF:Spawn('header', 'oUF_Group'..i)
group:SetManyAttributes('groupFilter', tostring(i), 'showRaid', true,
'yOffset', -15)
table.insert(raid, group)
if(i == 1) then
group:SetManyAttributes('showParty', true, 'showPlayer', false)
group:SetPoint('TOPLEFT', UIParent, 10, -65)
else
group:SetPoint('TOPLEFT', raid[i-1], 'TOPRIGHT', 15, 0)
end
group:Show()
end
Les groupes de raid seront disposés comme sur ce screen:
Ensuite nous reprennons avec une partie pour les MT et MA
local MT = oUF:Spawn('header', 'oUF_MainTank')
MT:SetManyAttributes('showRaid', true, 'groupFilter', 'MAINTANK', 'yOffset', -15)
MT:SetPoint('TOPLEFT', UIParent, 15, -265)
MT:Show()
local MA = oUF:Spawn('header', 'oUF_MainAssist')
MA:SetManyAttributes('showRaid', true, 'groupFilter', 'MAINASSIST', 'yOffset', -15)
MA:SetPoint('TOPLEFT', 150, -265)
MA:Show()
Voilà votre layout est terminé
V Quelques tuyaux et choses pratiques
Un très bon conseil, utilisez des noms de local (variables autrement dit) explicites de façon à ce qu'ils
soient compréhensibles par tout le monde
Commentez, commentez vos lignes pour la même raison que les local ( un commentaire commence en
écrivant - - (sans l'espace entre les deux)
Les plugins aux layouts fournissent généralement le moyen (autrement dit les lignes de code)
nécessaire à la mise en place de leur plugin