Step04

Step 04 – The first unitframe

This step is really existential, make sure to follow the guide and make sure to really understand, what is happening here.

a) preliminary remark

In this step we want to create the player frame. I always start with this frame, just because I can test and adjust much of the necessary stuff without too much effort.

All of our unitframes should feel “the same”, which means they should have the same general look. The player frame however is special in some points:

• no name will be displayed
• some more details on certain text elements

Since all frames should have a similar look, we will create a function to create this look first, then we will add some player-specific elements in the real styling function. Follow me!

Oh, I could convince my mate Frood to help us with this project! Say Hello!

b) Creating the look (1)

Open up your core.lua. We start by defining a function, which will create a standard-unitframe.

core.CreateUnitFrame = function(self, key)

end

Note the two parameters of this function: self is a reference of the frame. We will receive this parameter from oUF while spawning the unitframe (I will go into this later). key will be a string that will be used to fetch the correct values from the settings, and this is the first thing to do now, fetch our settings for this frame:

	cfg = SplashSettings[key]

Now we use this settings to apply the correct size to the frame:

	self:SetSize(cfg.width, cfg.height)

What makes an unitframe an unitframe? Yes, the health-bar, so let’s create it!

	-- Creating the Health-bar
	local hp = CreateFrame('StatusBar', nil, self)
	hp:SetFrameLevel(11)
	hp:SetAllPoints(self)
	hp:SetStatusBarTexture(settings.tex.hp)
	hp:SetStatusBarColor(unpack(SplashSettings.general.barColor))

	hp.bg = hp:CreateTexture(nil, 'BACKGROUND')
	hp.bg:SetAllPoints(hp)
	hp.bg:SetTexture(settings.tex.hp_bg)
	hp.bg:SetVertexColor(unpack(SplashSettings.general.barBGColor))

	hp.border = CreateFrame('Frame', nil, hp)
	hp.border:SetFrameLevel(10)
	hp.border:SetPoint('TOPLEFT', hp, 'TOPLEFT', -1, 1)
	hp.border:SetPoint('BOTTOMRIGHT', hp, 'BOTTOMRIGHT', 1, -1)
	hp.border.tex = hp.border:CreateTexture(nil, 'BACKGROUND')
	hp.border.tex:SetAllPoints(hp.border)
	hp.border.tex:SetTexture(0, 0, 0, 1)

	self.Health = hp

You do want to see how it looks like, right? Yeah, I know. Before you can see it ingame, we need to spawn the frame with oUF.

c) Spawning frames with oUF

In this layout I will go the approach to create unit-specific layout-functions and spawn then the frames with oUF.

Open layout.lua and add this little function:

local function createPlayer(self)
	core.CreateUnitFrame(self, 'player')
end

Inside of our ADDON_LOADED-function we add

	oUF:RegisterStyle('oUF_Splash_player', createPlayer)

	oUF:Spawn('player', 'oUF_Splash_player'):SetPoint('RIGHT', UIParent, 'CENTER', -100, -200)

Let me explain, how this code-snippets work together:

With oUF:RegisterStyle('oUF_Splash_player', createPlayer) we make the oUF-core aware of our style, name it oUF_Splash_player and we say: “Hey, if you want to use this style, call the function createPlayer”.

With the line oUF:Spawn('player', 'oUF_Splash_player'):SetPoint('RIGHT', UIParent, 'CENTER', -100, -200) we actually make oUF create this frame for us. We say something like "Hey, make me a player frame and call it “oUF_Splash_player” and move it to the given position".

When this is happening, oUF calls our createPlayer-function and executes it to style the unitframe. In this case, it simply calls core.CreateUnitFrame with the key “player”. Remember, this way the function fetches the correct size-information for us.

Congratulation, you have just spawned your first unitframe with oUF. You should have something like this by now and your code should be like this.