Thread Tools Display Modes
02-27-16, 03:25 AM   #1
Layback_
An Onyxian Warder
Join Date: Feb 2016
Posts: 358
Needs Graphics Help regarding frame level and layers.

Hi all,

So, I was trying to create unit frame layout with oUF that I saw somewhere (but can't remember where it was) and stuck with frame level and layer issues.

Here's what I have done so far.

Lua Code:
  1. A.CreateHealthBar = function(f, unit)
  2.     local Health = CreateFrame("StatusBar", f:GetName() .. "HealthBar", f);
  3.     Health:SetFrameStrata("LOW");
  4.     Health:SetSize(f:GetWidth() - 12, f:GetHeight() - 12);
  5.  
  6.     if (unit == "player") then
  7.         Health:SetPoint("TOPLEFT", f, "TOPLEFT", 1, -1);
  8.     elseif (unit == "target") then
  9.         Health:SetPoint("TOPRIGHT", f, "TOPRIGHT", -1, -1);
  10.  
  11.         Health:SetReverseFill(true);
  12.     end
  13.  
  14.     Health:SetStatusBarTexture(STATUSBAR);
  15.     Health:SetStatusBarColor(0.4, 0.4, 0.4, 1);
  16.  
  17.     local backdrop = CreateFrame("Frame", nil, Health);
  18.     backdrop:SetSize(Health:GetWidth() + 2, Health:GetHeight() + 2);
  19.     backdrop:SetPoint("CENTER");
  20.     backdrop:SetBackdrop({
  21.         bgFile = nil,
  22.         edgeFile = "Interface\\ChatFrame\\ChatFrameBackground",
  23.         edgeSize = 1,
  24.         insets = {
  25.             left = 1,
  26.             right = 1,
  27.             top = 1,
  28.             bottom = 1,
  29.         },
  30.     });
  31.     backdrop:SetBackdropBorderColor(0.8, 0.8, 0.8, 1);
  32.  
  33.     Health.backdrop = backdrop;
  34.  
  35.     Health.bg = Health:CreateTexture(nil, "BACKGROUND");
  36.     Health.bg:SetAllPoints(true);
  37.     Health.bg:SetTexture("Interface\\ChatFrame\\ChatFrameBackground");
  38.     Health.bg:SetVertexColor(0.2, 0.2, 0.2, 1);
  39.  
  40.     A.AddOptions(Health, "frequentUpdates");
  41.  
  42.     f.Health = Health;
  43.     f.Health.bg = Health.bg;
  44. end
  45.  
  46. A.CreatePowerBar = function(f, unit)
  47.     local Power = CreateFrame("StatusBar", f:GetName() .. "PowerBar", f);
  48.     Power:SetFrameStrata("LOW");
  49.     Power:SetSize(f.Health:GetWidth(), f.Health:GetHeight());
  50.  
  51.     if (unit == "player") then
  52.         Power:SetPoint("TOPLEFT", f.Health.backdrop, "TOPLEFT", 11, -11);
  53.     elseif (unit == "target") then
  54.         Power:SetPoint("TOPRIGHT", f.Health.backdrop, "TOPRIGHT", -11, -11);
  55.  
  56.         Power:SetReverseFill(true);
  57.     end
  58.  
  59.     Power:SetStatusBarTexture(STATUSBAR);
  60.  
  61.     local backdrop = CreateFrame("Frame", nil, Power);
  62.     backdrop:SetSize(Power:GetWidth() + 2, Power:GetHeight() + 2);
  63.     backdrop:SetPoint("CENTER");
  64.     backdrop:SetBackdrop({
  65.         bgFile = nil,
  66.         edgeFile = "Interface\\ChatFrame\\ChatFrameBackground",
  67.         edgeSize = 1,
  68.         insets = {
  69.             left = 1,
  70.             right = 1,
  71.             top = 1,
  72.             bottom = 1,
  73.         },
  74.     });
  75.     backdrop:SetBackdropBorderColor(0.8, 0.8, 0.8, 1);
  76.  
  77.     Power.backdrop = backdrop;
  78.  
  79.     Power.bg = Power:CreateTexture(nil, "BACKGROUND");
  80.     Power.bg:SetAllPoints(true);
  81.     Power.bg:SetTexture("Interface\\ChatFrame\\ChatFrameBackground");
  82.     Power.bg:SetVertexColor(0.2, 0.2, 0.2, 1);
  83.     Power.bg.multiplier = 0.3;
  84.  
  85.     A.AddOptions(Power, "frequentUpdates", "colorClass", "colorClassNPC");
  86.  
  87.     f.Power = Power;
  88.     f.Power.bg = Power.bg;
  89. end

and here's the image link of what it does.


<JPG>

I was thinking to use "SetFrameStrata", "SetFrameLevel" and so on, but I have been told from someone that it is very risky to use them on many frames.

"imho playing with textureSubLevels should wait until you've got some more experience with how draw layers work. Otherwise you'll fall into some horrible practices by not planning your drawlayers in advance, such as your messed up situation of two "BACKGROUND" textures with completely different widgets."

So, I would like to ask how I would simply(?) fix the problem.

As long as I can fix this fault, I'm more than happy to re-write the entire code.


EDIT: "Power:SetFrameLevel(f.Health:GetFrameLevel() - 1);" and "Power.backdrop:SetFrameLevel(f.Health.backdrop:GetFrameLevel() - 1);" seem to be sending "Power" and "Power.backdrop" back to "Health" and "Health.backdrop". I guess this should be fine, but "Power.backdrop" is still sitting in front of "Health.bg", the background of "Health" status bar.

Any advises or tips are welcomd !!

EDIT 2: Another question apart from this issue.

How could I flip StatusBarTexture vertically or horizontally?

I have tried Texture:SetTexCoord() thing, but it didn't work

Last edited by Layback_ : 02-27-16 at 05:04 AM.
  Reply With Quote
02-27-16, 05:38 AM   #2
Resike
A Pyroguard Emberseer
AddOn Author - Click to view addons
Join Date: Mar 2010
Posts: 1,290
Lua Code:
  1. Health:SetFrameLevel(10)
  2. Health.backdrop:SetFrameLevel(8)
  3. Power:SetFrameLevel(Health:GetFrameLevel() - 4)
  4. Power.backdrop:SetFrameLevel(Health:GetFrameLevel() - 6)

SetFrameLevel only supports numbers between 0-20 so you also need to make sure to not give it a smaller/bigger numbers.
I would also suggest to always use at leas 2 level diferrences between frames due a strata bug in the game, and also you might want to show something between that two frame layers.

Last edited by Resike : 02-27-16 at 05:48 AM.
  Reply With Quote
02-27-16, 10:13 AM   #3
Fizzlemizz
I did that?
 
Fizzlemizz's Avatar
Premium Member
AddOn Author - Click to view addons
Join Date: Dec 2011
Posts: 1,871
Rotating the image can be done in graphics package like Gimp.

You can extract the WoW image (and code) files by following these instructions. They create the BlizzardInterfaceArt and/or BlizzardInterfaceCode folders under you Wow folder.

You can convert the .blp files using Blp2Png or BlPng Converter.

Save the rotated images as .tga (the Gimp default settings is all you need) or convert them back to .blp.

Copy the rotated image to your addon folder before starting the game, otherwise you will get a green square).

Change the path to the image to Interface\\Addons\\your addon\\image file.

Edit: If you want to just flip the texture along the x-axis then Texture:SetTexCoord(1 ,0, 0, 1). To flip along the y-axis then Texture:SetTexCoord(0, 1, 1, 0). This is commonly used for a texture file that contains a single image.
__________________
Fizzlemizz
Maintainer of Discord Unit Frames and Discord Art.
Author of FauxMazzle, FauxMazzleHUD and Move Pad Plus.

Last edited by Fizzlemizz : 02-27-16 at 11:45 AM.
  Reply With Quote
02-27-16, 12:18 PM   #4
Yukyuk
A Chromatic Dragonspawn
 
Yukyuk's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2015
Posts: 179
Originally Posted by Fizzlemizz View Post
You can convert the .blp files using Blp2Png or BlPng Converter.
Am using Gimp 2.
No need to convert blp files. Gimp 2 can read them just fine.
They are automatically converted to xcf files (the gimp format).

Exporting them back to tga format is also easy.
If you need help just say so
__________________
Better to fail then never have tried at all.
  Reply With Quote
02-27-16, 12:41 PM   #5
Fizzlemizz
I did that?
 
Fizzlemizz's Avatar
Premium Member
AddOn Author - Click to view addons
Join Date: Dec 2011
Posts: 1,871
What version of Gimp? Using Gimp 2.6.11 I get an unknown file type error trying to open .blp. Is there a plugin required to get it to open .blp files?

Edit: Just took my own link and see Gimp is up to 2.8.16. I feel old .

Edit2: Still failed with 2.8.16 but at least I'm up-to-date.
__________________
Fizzlemizz
Maintainer of Discord Unit Frames and Discord Art.
Author of FauxMazzle, FauxMazzleHUD and Move Pad Plus.

Last edited by Fizzlemizz : 02-27-16 at 12:51 PM.
  Reply With Quote
02-28-16, 01:37 AM   #6
Yukyuk
A Chromatic Dragonspawn
 
Yukyuk's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2015
Posts: 179
Originally Posted by Fizzlemizz View Post
What version of Gimp? Using Gimp 2.6.11 I get an unknown file type error trying to open .blp. Is there a plugin required to get it to open .blp files?

Edit: Just took my own link and see Gimp is up to 2.8.16. I feel old .

Edit2: Still failed with 2.8.16 but at least I'm up-to-date.
Oops, my bad. I also get a error while opening a blp file.

What can I say, long day with lots of programming and creating tga files
__________________
Better to fail then never have tried at all.
  Reply With Quote
02-27-16, 02:59 PM   #7
Layback_
An Onyxian Warder
Join Date: Feb 2016
Posts: 358
Originally Posted by Fizzlemizz View Post
Rotating the image can be done in graphics package like Gimp.

You can extract the WoW image (and code) files by following these instructions. They create the BlizzardInterfaceArt and/or BlizzardInterfaceCode folders under you Wow folder.

You can convert the .blp files using Blp2Png or BlPng Converter.

Save the rotated images as .tga (the Gimp default settings is all you need) or convert them back to .blp.

Copy the rotated image to your addon folder before starting the game, otherwise you will get a green square).

Change the path to the image to Interface\\Addons\\your addon\\image file.

Edit: If you want to just flip the texture along the x-axis then Texture:SetTexCoord(1 ,0, 0, 1). To flip along the y-axis then Texture:SetTexCoord(0, 1, 1, 0). This is commonly used for a texture file that contains a single image.
Yes, I was trying to flip the texture along the y-axis and it does not seem to be doing things

Here's what I have done.

Lua Code:
  1. (Health:GetStatusBarTexture()):SetTexCoord(0, 1, 1, 0);
  Reply With Quote
02-27-16, 03:22 PM   #8
Fizzlemizz
I did that?
 
Fizzlemizz's Avatar
Premium Member
AddOn Author - Click to view addons
Join Date: Dec 2011
Posts: 1,871
Code:
Health:SetStatusBarTexture(STATUSBAR)
I don't know what STATUSBAR is, presumably it contains a path to your status bar texture file.

Looking at the image in the original post though the statas bar texture looks to be just a solid orange square(rectangle). Flipping/Rotating that won't give you any visible difference.

Are you instead wanting the status bar to be taller than it is wide and fill from bottom to top?

Status bar orientation.
__________________
Fizzlemizz
Maintainer of Discord Unit Frames and Discord Art.
Author of FauxMazzle, FauxMazzleHUD and Move Pad Plus.

Last edited by Fizzlemizz : 02-27-16 at 03:25 PM.
  Reply With Quote
02-27-16, 05:44 PM   #9
Layback_
An Onyxian Warder
Join Date: Feb 2016
Posts: 358
Originally Posted by Fizzlemizz View Post
Code:
Health:SetStatusBarTexture(STATUSBAR)
I don't know what STATUSBAR is, presumably it contains a path to your status bar texture file.

Looking at the image in the original post though the statas bar texture looks to be just a solid orange square(rectangle). Flipping/Rotating that won't give you any visible difference.

Are you instead wanting the status bar to be taller than it is wide and fill from bottom to top?

Status bar orientation.
O... Sorry about the lacking explanation.

Yes, like you presumed STATUSBAR is a plain white texture.

In addition to this, I have forgot to edit the code, but I actually changed this texture to something different which has a shape on it. So, I would like to flip the status bar texture along the y-axis if the frame is for a target's unit frame.
  Reply With Quote
02-27-16, 02:57 PM   #10
Layback_
An Onyxian Warder
Join Date: Feb 2016
Posts: 358
Originally Posted by Resike View Post
Lua Code:
  1. Health:SetFrameLevel(10)
  2. Health.backdrop:SetFrameLevel(8)
  3. Power:SetFrameLevel(Health:GetFrameLevel() - 4)
  4. Power.backdrop:SetFrameLevel(Health:GetFrameLevel() - 6)

SetFrameLevel only supports numbers between 0-20 so you also need to make sure to not give it a smaller/bigger numbers.
I would also suggest to always use at leas 2 level diferrences between frames due a strata bug in the game, and also you might want to show something between that two frame layers.
Hi Resike,

I've tried your solution and seems like "Health.backdrop" edge is sent behind the "Power" and even "Power.backdrop"...

EDIT: Argggg.... nvm. there was another SetFrameLevel under "Power" and "Power.backdrop".

Everything is fine now

Last edited by Layback_ : 02-27-16 at 03:30 PM.
  Reply With Quote
03-05-16, 08:40 AM   #11
Yukyuk
A Chromatic Dragonspawn
 
Yukyuk's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2015
Posts: 179
Originally Posted by Yukyuk View Post
Oops, my bad. I also get a error while opening a blp file.

What can I say, long day with lots of programming and creating tga files
This is what I do to get BLP files.
Open the file with XNview and do "save as" and choose the TGA format.
Gimp 2 can read TGA files and can save them as CXF files.

This way I can I can edit them if I want.
And save them and Export them as TGA files.
Then they can be used in an Adonn.
__________________
Better to fail then never have tried at all.
  Reply With Quote
03-05-16, 09:17 AM   #12
jeffy162
A Pyroguard Emberseer
 
jeffy162's Avatar
AddOn Author - Click to view addons
Join Date: May 2009
Posts: 2,364
You can use BLPNG Converter to change to .blp's. Read the page, it tells you what it can convert to .blp's. Gimp2 can export them all, so it's a "win-win" situation. You can use Blpc to convert various formats, also, but I linked it because it is a .blp viewer. You can get BLPView if you want to view .blp's natively on your machine. It's a shell extension, so it will provide thumbnail views on a Window's machine. I have a Window's 10 machine, and all of them work for me.
__________________
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 : 03-05-16 at 09:30 AM.
  Reply With Quote

WoWInterface » Developer Discussions » Graphics Help » Needs Graphics Help regarding frame level and layers.

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