Texturized Combobar

[zork]

For the new oUF_D3Orbs in Cataclysm I created a new combobar. I made some textures to make it look shiny and I love the outcome.

Textures:
http://code.google.com/p/rothui/source/detail?r=532
http://code.google.com/p/rothui/source/detail?r=533



Using the newly introduced textureSubLevel aswell. Read http://forums.worldofwarcraft.com/th...99864&sid=2000 (Same drawlayer but different sublevels = AWESOME!)

Textures used: 2 edge textures (left and right)
For each segment: background, filling, glow and gloss.

Number of segments and color can be adjusted.

CODE

--FUNCTIONS
  --update combo
  local function updateCombo(self, event, unit)
    if unit == "pet" then return end
    local bar = self.ComboBar
  
    local cp
    if(UnitExists'vehicle') then
      cp = GetComboPoints('vehicle', 'target')
    else
      cp = GetComboPoints('player', 'target')
    end
  
    local cpoints = self.CPoints
    for i=1, MAX_COMBO_POINTS do
      local adjust = cp/MAX_COMBO_POINTS
      bar.filling[i]:SetVertexColor(combocolor.r*adjust,combocolor.g*adjust,combocolor.b*adjust,1)
       bar.glow[i]:SetVertexColor(combocolor.r*adjust,combocolor.g*adjust,combocolor.b*adjust,0.4)
            
      if(i <= cp) then
        cpoints[i]:Show()
        bar.glow[i]:Show()
      else
        cpoints[i]:Hide()
        bar.glow[i]:Hide()
      end
    end
    
  end

  --create combo
  local function d3o2_createComboPoints(self,unit)
    
    self.CPoints = {}
    
    local t
    local bar = CreateFrame("Frame","oUF_D3Orbs_ComboBar",self)
    local w = 64*(MAX_COMBO_POINTS+2)
    local h = 64
    bar:SetPoint("CENTER", UIParent, "CENTER", 0, 0)
    bar:SetWidth(w)
    bar:SetHeight(h)
    
    t = bar:CreateTexture(nil,"BACKGROUND",nil,-8)
    t:SetSize(64,64)
    t:SetPoint("LEFT",0,0)
    t:SetTexture("Interface\\AddOns\\rTextures\\combo_left")
    bar.leftedge = t

    t = bar:CreateTexture(nil,"BACKGROUND",nil,-8)
    t:SetSize(64,64)
    t:SetPoint("RIGHT",0,0)
    t:SetTexture("Interface\\AddOns\\rTextures\\combo_right")
    bar.rightedge = t

    bar.back = {}
    bar.filling = {}
    bar.glow = {}
    bar.gloss = {}
    
    for i = 1, MAX_COMBO_POINTS do
      local back = "back"..i
      bar.back[i] = bar:CreateTexture(nil,"BACKGROUND",nil,-8)  
      bar.back[i]:SetSize(64,64)
      bar.back[i]:SetPoint("LEFT",i*64,0)
      bar.back[i]:SetTexture("Interface\\AddOns\\rTextures\\combo_back")

      bar.filling[i] = bar:CreateTexture(nil,"BACKGROUND",nil,-7)  
      bar.filling[i]:SetSize(64,64)
      bar.filling[i]:SetPoint("LEFT",i*64,0)
      bar.filling[i]:SetTexture("Interface\\AddOns\\rTextures\\combo_fill")
      --bar.filling[i]:SetVertexColor(combocolor.r,combocolor.g,combocolor.b,1)
      bar.filling[i]:SetBlendMode("ADD")

      bar.glow[i] = bar:CreateTexture(nil,"BACKGROUND",nil,-6)  
      bar.glow[i]:SetSize(64*1.25,64*1.25)
      bar.glow[i]:SetPoint("CENTER", bar.filling[i], "CENTER", 0, 0)
      bar.glow[i]:SetTexture("Interface\\AddOns\\rTextures\\combo_glow")
      bar.glow[i]:SetBlendMode("BLEND")
      --bar.glow[i]:SetVertexColor(combocolor.r,combocolor.g,combocolor.b,0.4)
      bar.glow[i]:Hide()

      bar.gloss[i] = bar:CreateTexture(nil,"BACKGROUND",nil,-5)  
      bar.gloss[i]:SetSize(64,64)
      bar.gloss[i]:SetPoint("LEFT",i*64,0)
      bar.gloss[i]:SetTexture("Interface\\AddOns\\rTextures\\combo_highlight")
      bar.gloss[i]:SetBlendMode("ADD")

      self.CPoints[i] = bar.filling[i]
    end

    bar:SetScale(combobarscale)
    self.ComboBar = bar

    self.CPoints.Override = updateCombo
  end

  --move stuff without restriction of locking
  local function moveme_no_restrict(f)
    f:SetMovable(true)
    f:SetUserPlaced(true)
    f:EnableMouse(true)
    f:RegisterForDrag("LeftButton","RightButton")
    f:SetScript("OnDragStart", function(self) if IsAltKeyDown() and IsShiftKeyDown() then self:StartMoving() end end)
    f:SetScript("OnDragStop", function(self) self:StopMovingOrSizing() end)
  end

--CALL INSIDE TARGET FRAME STYLE FUNC
    d3o2_createComboPoints(self,unit)        
    moveme_no_restrict(self.ComboBar)

QUESTION:
I want to do this for HolyPower and SoulBurn (or how it is called) aswell. I think haste added some stuff already.

Anyone tried this yet, code available?

[yj589794]

When I wrote the souldshards and holypower elements I based them on the current combopoints/runebar implementation.

Hopefully you should be able to use very similar code to create the same effect for holy power and soul shards.


------
addition of holypower to my own layout : clicky

addition of soul shards to my own layout : clicky

[zork]

Awesome ty. Hmm using this for runes...why not. Other than that I want to use it for exp/rep display aswell. p3lim has some stuff that can be used to do that imo.

[Tobbe8716]

I must say thats anawesome combo bar

[neverg]

Hey zork, awesome work! I see that working really well for the new Lunar/Solar Eclipse Bar for Cataclysm (depending on how it's going be approach in oUF since it seems a bit tricky to implement).

Regarding this bar as a Combo Point Resource, i would suggest to color it by compo point increase. That is imagine 1 cp = light green, scaling to yellow, orange, red = 5. It's easier to get colors in a glimpse then counting squares. That is why I always use my Combo Points as numbers, colored number.

Other than that, it looks gorgeous.

[yj589794]

It would be difficult to implement something like this for the eclipsebar.

Combo points, holy power, soul shards and DK runes all deal with a fairly small number of items.
The eclipsebar has to cope with values from -100 to +100, so it would not be easy to copy the styling.

[zork]

We will see. No clue yet.

[Dawn]

Originally Posted by neverg Hey zork, awesome work! I see that working really well for the new Lunar/Solar Eclipse Bar for Cataclysm (depending on how it's going be approach in oUF since it seems a bit tricky to implement). Regarding this bar as a Combo Point Resource, i would suggest to color it by compo point increase. That is imagine 1 cp = light green, scaling to yellow, orange, red = 5. It's easier to get colors in a glimpse then counting squares. That is why I always use my Combo Points as numbers, colored number. Other than that, it looks gorgeous.

This however depends entirely on how someone processes information. I for one prefer looking at textures/bars to gather information first, ignoring numbers until I need to know a very specific value, which is rarely the case. Colours are good to highlight things, though. No matter if it's text or texture.

[zork]

Images are _always_ processed faster from our brains than text. There is no way around that, that's how our brains work. Picture information is traced faster, thus can be responded to quicker. Of course the picture information should be clear and undoubtful.

[Dawn]

Might be, but I here's my experience: if you have a bar and a number telling you how much health a unit has, I know quite some people that look at the number, even ignoring the bar and forgetting about their health if the number is to small and therefore not gathering any information from that unit at all. That is quite a contradiction to what you say our brain is working. Maybe yours is (and mine, too.). People are different, like there would be no oUF_Hank, otherwise.

[neverg]

Images might be processed faster than numbers, can agree with that. But really depends on the numbers and the pictures we are talking about.

For instance, the implementation of Blizzard Combo Points it's awful. It's way to small when you try to take a quick glance at it, you literally need to count the dots. It's way faster to have a big colored number on the screen. At least in my opinion. Played a Rogue as main for 4 years, a lot of PvP and Colored Numbers were always my fav.

[Rostok]

We can ask you if it's the colors that took your attention or if it was the combined colors and numbers that did the trick ^^

oUF is just wonderful cause it lets us do nearly whatever we want with a little bit of implication in it.
At least, what zork did was to point out the new possibilities we have with this new texture thing.

[neverg]

Originally Posted by Rostok We can ask you if it's the colors that took your attention or if it was the combined colors and numbers that did the trick ^^ oUF is just wonderful cause it lets us do nearly whatever we want with a little bit of implication in it. At least, what zork did was to point out the new possibilities we have with this new texture thing.

Most probably more the color than the number. But a big number is a "familar" shape, its quick to grasp information about it. But I'm talking 1 Number, more than 1 number probably isn't the same. A HP Number isn't something we "grab" faster than say a texture.

Regarding zork texture, I love it to be honest. In fact I love zork oUF Layout and UI, the only reason I don't use it it's because it doesn't fit my taste using those big orbs, tho they look amazing. I myself use rMinimap and some graphics from his UI on my UI.

The texture looks awesome for combo points, I just wanted to add that if more color feedback were available for combo points it would even be better.

[d87]

The only thing ouf is doing here is registering UNIT_COMBO_POINTS event.

[Rostok]

Originally Posted by d87 The only thing ouf is doing here is registering UNIT_COMBO_POINTS event.

That's just what it makes so great to use : that lets us make what we want in any way (or mostly) we want.

And we could change the color of the CPoints really easily with sthg like this :

local y = ((-1)*(0.25*(i-1)))+1
:SetVertexColor(1,y,0)

maybe zork will try it or maybe someone else ?

[zork]

Random Bob Ross quote:
Whatever you want to be in your world will be in your world.

I don't add stuff for people. I add stuff more myself but try to make it readable as far as I can for everyone in case someone wants to put hand on parts of the code.

[zork]

Runebar code.

New runebar function in player.lua

  --create rune bar
  local createRuneBar = function(self)
    --local f = CreateFrame("Frame","oUF_DiabloRuneBar",self)
    --f:SetPoint(self.cfg.runes.pos.a1,self.cfg.runes.pos.af,self.cfg.runes.pos.a2,self.cfg.runes.pos.x,self.cfg.runes.pos.y)
    --f:SetSize(180,50)
    --func.applyDragFunctionality(f)
    --RuneButtonIndividual1:ClearAllPoints()
    --RuneButtonIndividual1:SetPoint("LEFT",f,"LEFT",10,0)
    
    oUF.colors.runes = {
      {0.8,0,0},
      {0,0.8,0},
      {0,0.8,0.8},
      {0.8,0,0.8},
    }
    
    --self.Runes = {}
    self.Runes = CreateFrame("Frame", nil, self)
    
    
    local NUM_RUNES = 6
    
    local t
    local bar = CreateFrame("Frame","oUF_DiabloRuneBar",self)
    local w = 64*(NUM_RUNES+2)
    local h = 64
    bar:SetPoint(self.cfg.runes.pos.a1,self.cfg.runes.pos.af,self.cfg.runes.pos.a2,self.cfg.runes.pos.x,self.cfg.runes.pos.y)
    bar:SetWidth(w)
    bar:SetHeight(h)
    
    t = bar:CreateTexture(nil,"BACKGROUND",nil,-8)
    t:SetSize(64,64)
    t:SetPoint("LEFT",0,0)
    t:SetTexture("Interface\\AddOns\\rTextures\\combo_left")
    bar.leftedge = t

    t = bar:CreateTexture(nil,"BACKGROUND",nil,-8)
    t:SetSize(64,64)
    t:SetPoint("RIGHT",0,0)
    t:SetTexture("Interface\\AddOns\\rTextures\\combo_right")
    bar.rightedge = t

    bar.back = {}
    bar.filling = {}
    bar.glow = {}
    bar.gloss = {}
    
    for i = 1, NUM_RUNES do
      local back = "back"..i
      bar.back[i] = bar:CreateTexture(nil,"BACKGROUND",nil,-8)  
      bar.back[i]:SetSize(64,64)
      bar.back[i]:SetPoint("LEFT",i*64,0)
      bar.back[i]:SetTexture("Interface\\AddOns\\rTextures\\combo_back")

      bar.filling[i] = CreateFrame("StatusBar",nil,bar)
      bar.filling[i]:SetSize(64,64)
      bar.filling[i]:SetPoint("LEFT",i*64,0)
      bar.filling[i]:SetStatusBarTexture("Interface\\AddOns\\rTextures\\combo_fill")
      bar.filling[i]:GetStatusBarTexture():SetHorizTile(true)
      bar.filling[i]:GetStatusBarTexture():SetBlendMode("ADD")
      --bar.filling[i]:SetStatusbarColor(self.cfg.soulshards.color.r,self.cfg.soulshards.color.g,self.cfg.soulshards.color.b,1)
      --bar.filling[i]:SetBlendMode("ADD")

      bar.glow[i] = bar.filling[i]:CreateTexture(nil,"LOW",nil,-6)  
      bar.glow[i]:SetSize(64*1.25,64*1.25)
      bar.glow[i]:SetPoint("CENTER", bar.filling[i], "CENTER", 0, 0)
      bar.glow[i]:SetTexture("Interface\\AddOns\\rTextures\\combo_glow")
      bar.glow[i]:SetBlendMode("ADD")
      --bar.glow[i]:SetVertexColor(self.cfg.soulshards.color.r,self.cfg.soulshards.color.g,self.cfg.soulshards.color.b,1)

      bar.gloss[i] = bar.filling[i]:CreateTexture(nil,"LOW",nil,-5)  
      bar.gloss[i]:SetSize(64,64)
      bar.gloss[i]:SetPoint("CENTER", bar.filling[i], "CENTER", 0, 0)
      bar.gloss[i]:SetTexture("Interface\\AddOns\\rTextures\\combo_highlight")
      --bar.gloss[i]:SetBlendMode("ADD")

      bar.filling[i].bg = bar.glow[i]

      self.Runes[i] = bar.filling[i]
    end

    bar:SetScale(self.cfg.runes.scale)    
    func.applyDragFunctionality(bar)    
    self.RuneBar = bar
    
  end

Only thing that I had to add was this in runebar.lua of oUF. The overlay needs to hide while the rune is on CD.

local UpdateRune = function(self, event, rid)
	local rune = self.Runes[rid]
	if(rune) then
		local start, duration, runeReady = GetRuneCooldown(rune:GetID())
		if(runeReady) then
			rune:SetMinMaxValues(0, 1)
			rune:SetValue(1)
			rune.bg:Show()
			rune:SetScript("OnUpdate", nil)
		else
			rune.duration = GetTime() - start
			rune.max = duration
			rune.bg:Hide()
			rune:SetMinMaxValues(1, duration)
			rune:SetScript("OnUpdate", OnUpdate)
		end
	end

Last step:
Add scale value to runebar settings in config.lua

Outcome:


I dont' like it though. Thus I'm not going to keep it.

[Dawn]

Not keep it? I like it and it fits to the rest of the UI, doesn't it? What are you going to use instead?

[neverg]

Try out similar textures but not so bright, with an increased alpha / opacity.

[Monolit]

Just an idea how you could make your runebar look like:



Don't mind the quality, just a quick 3 min photoshop