View Single Post
10-15-17, 02:25 PM   #1
CC_WOW
A Deviate Faerie Dragon
 
CC_WOW's Avatar
AddOn Author - Click to view addons
Join Date: Nov 2016
Posts: 19
What parts of an addon's GUI should be "pixel perfect"?

I've recently tried to build a more elaborate GUI, and run into so many glitches that I'm entirely stumped. There's always some pixel or another that looks off and this is seemingly unrelated to the resolution or UI scaling (I tried several). I just read this thread here (http://www.wowinterface.com/forums/s...416#post325416) and now I'm confused; Do I really need to round down any and all coordinates everywhere in the entire GUI?

What I've done so far:
* Made sure that the addon scales with a pixel-perfect factor, like so:

Code:
function GetScaleFactor()
    
    local screenResolution = ({GetScreenResolutions()})[GetCurrentResolution()]
    local screenWidth, screenHeight = strsplit("x", screenResolution)
    local scale = 768/screenHeight -- This is the scale factor that will scale textures to the native resolution that the client uses internally... Or so I believe

    return (1/scale)

end
I have applied this scale factor to EVERYTHING so that I can use basic pixel width, height etc. in my settings. For my usual 1080y this scales the frames by 1/0.71111..., which is similar to 1/UIParent:GetScale() when disabling the "UI Scale" manual override option. I believe this to be correct, however it clearly is not enough!

* Made sure the main (parent) frames are not positioned between pixels by rounding them to the nearest integer value. This seemed to have fixed the issue at first, except... now it is back.

I have many GUI elements that are aligned relative to their parent (e.g, centered), but font sizes, icons, and many parent elements themselves are using the same scaleFactor * size (from settings) calculation. The only idea I have left now would be to round everything and somehow hope it will look as it does when unscaled (i.e., in my sketches), so that 1px margins are actually 1px. Does that actually do anything if things are already using 1px borders etc.? Anything else that I missed?

Basically, I would try and write a function that applies the scale and rounds down, like this:

Code:
function Scale(x)

    return math.floor(GetScaleFactor() * x + 0.5)

end
I would apply this to all SetPoint() calls that use offsets, although I'm not sure if that'll do when also using "centering" via SetPoint("LEFT"), SetPoint("RIGHT") to center vertically without any offset being given. In my mind, if the parent is positioned on an integer coordinate, and the child is of an integer size (after applying Scale(x) on those values), then it should work UNLESS (always something... sigh) the child's height is not even. Surely there must be an easier way to not have a GUI look like crap?
  Reply With Quote