My UI grid's lines show up thick or thin depending on the resolution

I have an issue where a grid I’m making (which is a sprite being tiled in an image) has lines that show up thin or thick at times. Would anyone have any suggestions on the fix for this? It seems to work well in some resolutions, but in others (like Free Aspect) it renders this way.

This is due to scaling / aliasing, and maybe depends on how you position these tiling background images. If you have one tile image for each tile then replace that with a single background image for the entire window. That will also be more efficient to render.

The scaling resolution is set to 4k which means any resolution lower than that will scale the GUI up (make it bigger). At least any resolution that does not match the 16:9 layout will likely exhibit this aliasing issue.

You can ignore “free aspect” since you don’t have that in an actual build, and you can force your build to only use 16:9 aspect ratios. If you want to support other ratios and resolutions, test them specifically. Check the best practices for multi-resolution.

You may want to design the canvas for this inventory view without a canvas scaler, and instead just scale it by a uniform value (eg 2x) for 4k resolution. If you prefer to downscale from 4k you’d have to make sure the lines are thick enough in 4k so they won’t disappear in 2k. If you design the window to support both 4k/2k resolution you could simply use separate tiling background for either resolution to avoid any issues altogether.

If you want this window to have free scaling you won’t get rid of the line thickness issues unless you actually draw the lines with a line renderer.

Thank you! I was hoping that there would be some solution that allowed scaling, but I guess not. I’ll have to get rid of the canvas scalar.