Alignment Grid

Alignment Grid

71.7k Downloads

Grid doesn't display correctly on non-16:9 aspect ratio displays

m4xc4v413r4 opened this issue ยท 4 comments

commented

Hey m8,

I noticed the aspect ratio limitation and since I fixed that same problem on Leatrix Plus a couple years ago, feel free to check the code to fix it on your addon.

I have the code on this gist.

If you have any questions feel free to ask. I would fix it my self and just give you the finished code but I would be doing it blind since I have no access to WoW at all and without being able to test I would be winging it xD

But tbh the main thing is adding GetEffectiveScale to calculate real width and height.

commented

Oh wow, thank you! This looks great ๐ŸŽ‰

I've got some free time on Friday, so I'll take a proper look then and implement the fixes.

commented

I tried to implement a similar solution to the one you shared and couldn't get it to work ๐Ÿ˜ข

Ended up going with a different approach to fix the issue. Pretty confident it's there now! You can check out the changes in #2. Thanks again for taking to the time to open an issue and share your code with me. It's really appreciated!

commented

Just got off work and I checked it. Well, if it works it works :)

Any particular reason you couldn't get it to work with my example?

I honestly didn't even remember why I did half the stuff there so I looked at it for a bit and now I remember (god damnit, why don't I comment code eheheheh).

I made some comments specifically for you about why everything is there.

LeaPlusLC.grid = CreateFrame('FRAME') 
LeaPlusLC.grid:Hide()
LeaPlusLC.grid:SetAllPoints(UIParent)
-- Get the REAL Width (w) and Height (h), by real I mean your actual resolution (ie 1920x1080) because WoW works in a way where it has a fixed Height of 768 and then uses the scale to get to the real resolution. Plus, people change the UI scale and that messes things up too
-- For your specific case, since you only want the ratio, it's still correct if you don't do it like this with GetEffectiveScale, although i'm not sure in the case people change the UI scale
-- Also, by using this the grid scales with your resolution and with your UI scale, which was the intended purpose, that's why I didn't even bother having different size grids and instead used a fixed number for the square size that is relative to the resolution (you will see this code in a moment)
local w, h = GetScreenWidth() * UIParent:GetEffectiveScale(), GetScreenHeight() * UIParent:GetEffectiveScale()
-- Calculate the resolution ratio :)
local ratio = w / h
-- This was me choosing the size of grid squares I wanted. This way I know I always have squares that are 1/30th of the true resolution width and later I use this to make sure they're perfect squares and calculate how many I need vertically depending on the aspect ratio
-- Even though this already makes the grid scale like I talked before, you can make it a variable instead so you can use your "small/big/etc" commands with it and have it be even better
local sqsize = w / 30
-- Calculate the number of vertical (width) lines
local wline = floor(sqsize - (sqsize % 2))
-- Calculate the number of horizontal (height) lines
local hline = floor(sqsize / ratio - ((sqsize / ratio) % 2))
-- Draw the vertical lines
for i = 0, wline do
-- To be honest I did this with a CreateTexture because I didn't even know there was a CreateLine like you used so I would probably just keep your CreateLine
	local t = LeaPlusLC.grid:CreateTexture(nil, 'BACKGROUND')
-- This is just to get a different color on the middle line and all others
	if i == wline / 2 then t:SetColorTexture(1, 0, 0, 0.5) else t:SetColorTexture(0, 0, 0, 0.5) end
	t:SetPoint('TOPLEFT', LeaPlusLC.grid, 'TOPLEFT', i * w / wline - 1, 0)
	t:SetPoint('BOTTOMRIGHT', LeaPlusLC.grid, 'BOTTOMLEFT', i * w / wline + 1, 0)
end
-- Draw the horizontal lines
for i = 0, hline do
	local t = LeaPlusLC.grid:CreateTexture(nil, 'BACKGROUND')
	if i == hline / 2 then	t:SetColorTexture(1, 0, 0, 0.5) else t:SetColorTexture(0, 0, 0, 0.5) end
	t:SetPoint('TOPLEFT', LeaPlusLC.grid, 'TOPLEFT', 0, -i * h / hline + 1)
	t:SetPoint('BOTTOMRIGHT', LeaPlusLC.grid, 'TOPRIGHT', 0, -i * h / hline - 1)
end

I think that's all :/

commented

I managed to figure most of it out, but thanks for the detailed comments!

I remember why I couldn't get your approach to work for me: rather than choose the square size, I want to decide on the number of lines so I can guarantee that number will divide cleanly into 4 as well as 2. That way, I can tint the lines at 25% and 75%.