WoWInterface

WoWInterface (https://www.wowinterface.com/forums/index.php)
-   Graphics Help (https://www.wowinterface.com/forums/forumdisplay.php?f=14)
-   -   Needs Graphics Help regarding frame level and layers. (https://www.wowinterface.com/forums/showthread.php?t=53153)

Layback_ 02-27-16 03:25 AM

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.

Quote:

"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 :(

Resike 02-27-16 05:38 AM

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.

Fizzlemizz 02-27-16 10:13 AM

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.

Yukyuk 02-27-16 12:18 PM

Quote:

Originally Posted by Fizzlemizz (Post 313241)
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 ;)

Fizzlemizz 02-27-16 12:41 PM

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.

Layback_ 02-27-16 02:57 PM

Quote:

Originally Posted by Resike (Post 313237)
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 :)

Layback_ 02-27-16 02:59 PM

Quote:

Originally Posted by Fizzlemizz (Post 313241)
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);

Fizzlemizz 02-27-16 03:22 PM

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.

Layback_ 02-27-16 05:44 PM

Quote:

Originally Posted by Fizzlemizz (Post 313247)
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.

Fizzlemizz 02-27-16 06:03 PM

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.

Layback_ 02-27-16 06:27 PM

Quote:

Originally Posted by Fizzlemizz (Post 313249)
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.

Fizzlemizz 02-27-16 07:00 PM

Quote:

Originally Posted by Layback_ (Post 313251)
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.

Yukyuk 02-28-16 01:37 AM

Quote:

Originally Posted by Fizzlemizz (Post 313243)
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 :rolleyes:

Layback_ 02-28-16 02:47 AM

Quote:

Originally Posted by Fizzlemizz (Post 313252)
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:

Resike 02-28-16 04:59 AM

Quote:

Originally Posted by Yukyuk (Post 313253)
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 :rolleyes:

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

Yukyuk 02-28-16 05:44 AM

Quote:

Originally Posted by Resike (Post 313257)
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.

Resike 02-28-16 06:01 AM

Quote:

Originally Posted by Yukyuk (Post 313258)
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/

Layback_ 02-28-16 03:54 PM

Quote:

Originally Posted by Layback_ (Post 313255)
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?

Fizzlemizz 02-28-16 04:48 PM

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

Layback_ 02-28-16 08:27 PM

Quote:

Originally Posted by Fizzlemizz (Post 313276)
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 :(


All times are GMT -6. The time now is 07:43 AM.

vBulletin © 2024, Jelsoft Enterprises Ltd
© 2004 - 2022 MMOUI