Quantcast Needs Graphics Help regarding frame level and layers. - WoWInterface
Thread Tools Display Modes
02-27-16, 03:25 AM   #1
Layback_
An Onyxian Warder
Join Date: Feb 2016
Posts: 356
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,273
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: 914
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 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 Flamescale Wyrmkin
 
Yukyuk's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2015
Posts: 133
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: 914
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 and Move Pad Plus.

Last edited by Fizzlemizz : 02-27-16 at 12:51 PM.
  Reply With Quote
02-27-16, 02:57 PM   #6
Layback_
An Onyxian Warder
Join Date: Feb 2016
Posts: 356
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
02-27-16, 02:59 PM   #7
Layback_
An Onyxian Warder
Join Date: Feb 2016
Posts: 356
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: 914
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 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: 356
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, 06:03 PM   #10
Fizzlemizz
I did that?
 
Fizzlemizz's Avatar
Premium Member
AddOn Author - Click to view addons
Join Date: Dec 2011
Posts: 914
Code:
local f = CreateFrame("Statusbar")
f:SetSize(50, 50)
f:SetPoint("CENTER")
f:SetStatusBarTexture("Interface\\Buttons\\Button-Backpack-Up")
--f:GetStatusBarTexture():SetTexCoord(0, 1, 1, 0)
Start the game with the above code then un-comment the TexCoord line and /reloadui and the bag will be upside down.

Actually, looking at your setup you might want the x-axis flip from > to < rather than Y-axis which is from ^ to v. X-axis flip will make images "face" each other when placed side by side.
__________________
Fizzlemizz
Maintainer of Discord Unit Frames and Discord Art.
Author of FauxMazzle and Move Pad Plus.

Last edited by Fizzlemizz : 02-27-16 at 06:11 PM.
  Reply With Quote
02-27-16, 06:27 PM   #11
Layback_
An Onyxian Warder
Join Date: Feb 2016
Posts: 356
Originally Posted by Fizzlemizz View Post
Code:
local f = CreateFrame("Statusbar")
f:SetSize(50, 50)
f:SetPoint("CENTER")
f:SetStatusBarTexture("Interface\\Buttons\\Button-Backpack-Up")
--f:GetStatusBarTexture():SetTexCoord(0, 1, 1, 0)
Start the game with the above code then un-comment the TexCoord line and /reloadui and the bag will be upside down.

Actually, looking at your setup you might want the x-axis flip from > to < rather than Y-axis which is from ^ to v. X-axis flip will make images "face" each other when placed side by side.
Yep... was X-axis flip not Y-axis flip haha...

And more about STATUSBAR, it is actually a media that is fetched from LibSharedMedia (LSM).

Lua Code:
  1. local STATUSBAR = LSM:Fetch("statusbar", "fer33");

So, instead of using this variable, I have set statusbar's texture with direct path like you just did, and SetTexCoord() worked on this.

Thus, I'm guessing that SetTexCoord() is not compatible with a media that is fetched from LSM.
  Reply With Quote
02-27-16, 07:00 PM   #12
Fizzlemizz
I did that?
 
Fizzlemizz's Avatar
Premium Member
AddOn Author - Click to view addons
Join Date: Dec 2011
Posts: 914
Originally Posted by Layback_ View Post
Thus, I'm guessing that SetTexCoord() is not compatible with a media that is fetched from LSM.
If your texture widget didn't have a compatible image you would just see a bright green square. SetTexCoord is just adjusting the view into that image. If you flipped on the Y into a verticaly symmetrical image you wouldn't see any change.
__________________
Fizzlemizz
Maintainer of Discord Unit Frames and Discord Art.
Author of FauxMazzle and Move Pad Plus.
  Reply With Quote
02-28-16, 01:37 AM   #13
Yukyuk
A Flamescale Wyrmkin
 
Yukyuk's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2015
Posts: 133
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-28-16, 02:47 AM   #14
Layback_
An Onyxian Warder
Join Date: Feb 2016
Posts: 356
Originally Posted by Fizzlemizz View Post
If your texture widget didn't have a compatible image you would just see a bright green square. SetTexCoord is just adjusting the view into that image. If you flipped on the Y into a verticaly symmetrical image you wouldn't see any change.
Hi again, Fizzlemizz!

Here's screenshot of the texture shape that I used.



As you can see, the image isn't symmetrical vertically or even horizontally.

And like I mentioned on previous reply, if I set the texture with its direct path

e.g:
Lua Code:
  1. frame:SetStatusBarTexture("Interface\\media\\textures\\statusbar.tga");

, Texture:SetTexCoord works perfectly.

However, if I get a path of media after fetching from LibSharedMedia

e.g:
Lua Code:
  1. local STATUSBAR = LSM:Fetch("statusbar", "fer33");
  2. frame:SetStatusBarTexture(STATUSBAR);

, Texture:SetTexCoord starts not working D:

Last edited by Layback_ : 02-28-16 at 04:07 AM.
  Reply With Quote
02-28-16, 04:59 AM   #15
Resike
A Pyroguard Emberseer
AddOn Author - Click to view addons
Join Date: Mar 2010
Posts: 1,273
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
XnView can open blps without any issue:

http://www.xnview.com/en/

If you want to edit them, then Photoshop and this plugin:

http://www.wowinterface.com/download...Photoshop.html
  Reply With Quote
02-28-16, 05:44 AM   #16
Yukyuk
A Flamescale Wyrmkin
 
Yukyuk's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2015
Posts: 133
Originally Posted by Resike View Post
XnView can open blps without any issue:

http://www.xnview.com/en/

If you want to edit them, then Photoshop and this plugin:

http://www.wowinterface.com/download...Photoshop.html
Yep, have xnview installed.
And at 24euro/month, Photoshop is to expensive for me.
Not really to expensive but I would not use it very often.
__________________
Better to fail then never have tried at all.
  Reply With Quote
02-28-16, 06:01 AM   #17
Resike
A Pyroguard Emberseer
AddOn Author - Click to view addons
Join Date: Mar 2010
Posts: 1,273
Originally Posted by Yukyuk View Post
Yep, have xnview installed.
And at 24euro/month, Photoshop is to expensive for me.
Not really to expensive but I would not use it very often.
You can get CS2 legally and free from here:

https://helpx.adobe.com/creative-sui...downloads.html

More info:

http://www.redmondpie.com/download-a...you-still-can/
  Reply With Quote
02-28-16, 03:54 PM   #18
Layback_
An Onyxian Warder
Join Date: Feb 2016
Posts: 356
Originally Posted by Layback_ View Post
Hi again, Fizzlemizz!

Here's screenshot of the texture shape that I used.



As you can see, the image isn't symmetrical vertically or even horizontally.

And like I mentioned on previous reply, if I set the texture with its direct path

e.g:
Lua Code:
  1. frame:SetStatusBarTexture("Interface\\media\\textures\\statusbar.tga");

, Texture:SetTexCoord works perfectly.

However, if I get a path of media after fetching from LibSharedMedia

e.g:
Lua Code:
  1. local STATUSBAR = LSM:Fetch("statusbar", "fer33");
  2. frame:SetStatusBarTexture(STATUSBAR);

, Texture:SetTexCoord starts not working D:
bump.

Anyone have ideas regarding this?
  Reply With Quote
02-28-16, 04:48 PM   #19
Fizzlemizz
I did that?
 
Fizzlemizz's Avatar
Premium Member
AddOn Author - Click to view addons
Join Date: Dec 2011
Posts: 914
I have to admit I thought SetStatusBarTexture() was just a method that encapsulated Texture:SetTexture which takes either a string path to and image file or r,g,b colour references.

Apparently not, StatusBar:SetStatusBarTexture appears to take either a string path to the image or a reference to an existing image which is presumably what is happening here.

If you:
Code:
local STATUSBAR = LSM:Fetch("statusbar", "fer33");
STATUSBAR:SetTexCoord(0, 1, 1, 0)
frame:SetStatusBarTexture(STATUSBAR);
you would presumably get the desired outcome... I think
__________________
Fizzlemizz
Maintainer of Discord Unit Frames and Discord Art.
Author of FauxMazzle and Move Pad Plus.

Last edited by Fizzlemizz : 02-28-16 at 05:37 PM.
  Reply With Quote
02-28-16, 08:27 PM   #20
Layback_
An Onyxian Warder
Join Date: Feb 2016
Posts: 356
Originally Posted by Fizzlemizz View Post
I have to admit I thought SetStatusBarTexture() was just a method that encapsulated Texture:SetTexture which takes either a string path to and image file or r,g,b colour references.

Apparently not, StatusBar:SetStatusBarTexture appears to take either a string path to the image or a reference to an existing image which is presumably what is happening here.

If you:
Code:
local STATUSBAR = LSM:Fetch("statusbar", "fer33");
STATUSBAR:SetTexCoord(0, 1, 1, 0)
frame:SetStatusBarTexture(STATUSBAR);
you would presumably get the desired outcome... I think
Hi Fizzle,

I'vs just tried your method and seems it's not working since STATUSBAR is returning a path to image file not the texture reference
  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