[Layback_]

Originally Posted by SDPhantom 1: If you're using the backdrop system, just set it on the StatusBar. You can also create textures directly on them so there's no need to create container frames for them and waste resources. 2: You have your health bar at FrameLevel 3 and power bar at FrameLevel 2. When you create a frame that's a child of another, it automatically gets its parent's FrameLevel+1. This means the container frames you use for textures and backdrops for the power bar share the same FrameLevel with your health bar and are melding together with it. This could be fixed easily by following the answer above. Normally, you shouldn't mess with FrameLevel unless you need to bump it up by a specific amount. Don't set it to a solid number. For example, leave your power bar at its default and do this instead on your health bar: Health:SetFrameLevel(Health:GetFrameLevel()+1)

Hi SDPhantom,

Based on your advice, I made some modifications, but I'm unsure whether I did correctly or not.

Please have a look at the code below:

A.CreateHealth = function(f, unit)
    A.CreateHealthBar(f, unit);
    A.CreateHealthText(f, unit);
end
 
A.CreateHealthBar = function(f, unit)
    local Health = CreateFrame("StatusBar", f:GetName() .. "HealthBar", f);
    Health:SetFrameLevel(Health:GetFrameLevel() + 1);
    Health:SetStatusBarTexture(HEALTH_BAR);
    Health:SetStatusBarColor(0, 0, 0, 1);
 
    if unit == "player" then
        Health:SetPoint("TOPRIGHT", f, "TOPRIGHT", 0, 0);
        Health:SetSize(f:GetWidth() - 10, f:GetHeight() - 10);
    end
 
    Health:SetBackdrop({
        edgeFile = BACKDROP,
        edgeSize = 1,
        insets = {
            left = 1,
            right = 1,
            top = 1,
            bottom = 1,
        },
    });
    Health:SetBackdropBorderColor(1, 0, 0, 1);
 
    Health.bg = Health:CreateTexture(nil, "BACKGROUND");
    Health.bg:SetAllPoints(true);
    Health.bg:SetTexture(BACKDROP);
    Health.bg:SetVertexColor(0.5, 0.5, 0.5, 1);
 
    f.Health = Health;
    f.Health.bg = Health.bg;
end
 
A.CreateHealthText = function(f, unit)
 
end
 
A.CreatePower = function(f, unit)
    A.CreatePowerBar(f, unit);
    A.CreatePowerText(f, unit);
end
 
A.CreatePowerBar = function(f, unit)
    local Power = CreateFrame("StatusBar", f:GetName() .. "PowerBar", f);
    Power:SetFrameLevel(f.Health:GetFrameLevel() - 1);
    Power:SetStatusBarTexture(HEALTH_BAR);
    Power:SetStatusBarColor(1, 1, 1, 1);
 
    if unit == "player" then
        Power:SetPoint("BOTTOMLEFT", f, "BOTTOMLEFT", 0, 0);
        Power:SetSize(f:GetWidth() - 10, f:GetHeight() - 10);
    end
 
    Power:SetBackdrop({
        edgeFile = BACKDROP,
        edgeSize = 1,
        insets = {
            left = 1,
            right = 1,
            top = 1,
            bottom = 1,
        },
    });
    Power:SetBackdropBorderColor(0, 0, 1, 1);
 
    f.Power = Power;
end
 
A.CreatePowerText = function(f, unit)
 
end

This currently results in...



The frame level issue has been successfully fixed(?), but the border issue is still remaining.

The backdrop has been added directly to the status bar frame, but it seems to be sitting right behind the status bar so that the border is only shown when the unit loses the health.
(Which is same for PowerBar as well)

I have gone through the API to review how SetBackdrop function works and could not figure it out

The image file that I used for edgeFile can be found on the attachment.
(Which is just 16x16 white square in fact...)