I’m playing around with supporting different densities so I tried running my code on all my devices. I noticed the text renders a bit wrong at strange densities (I don’t use SDL_TTF.)
If you look at the second row in the pic you can see it, however on my devices the first two rows have stray lines at the top of the text and the third row has it at the bottom. The text is x1 with the y position next to it. I was able to replicate the problem by faking density as 2.5 and using SDL_SetRenderScale(myrender, 2.5, 2.5). The pic is from doing that which only has incorrect pixels on the second row
40 divides into 2.5 evenly (16*2.5==40), so I was a little surprised to see the problem. Does anyone know what the problem might be? I have no issues when density is a whole number and the devices I care about use whole numbers so I don’t really need to ‘fix’ this but I’d like to if possible.
I don’t want to mess with the code too much right now but putting 1 space between all the letters seemed to fix some places but not all. I suspect I might need at least density amount of space between letters? I’ll investigate it more later, I’m wondering if anyone already ran into this problem
I’ll try ceil(density) as the spacing. I tried my rounded rectangles code and got the below. However I found that on my desktop and laptop it looks perfect on both, its just tablets that look wrong which I don’t plan to support.
First is 2.5 density, second is a screenshot from my tablet. The difference between the circle are a +10 on the x and for the y it’s + 0 + .5 +1 +1.5 +2. I don’t need the tiny rounded rects that look like circles but I tried just to see if my code was correct
You were right, 2 pixels was enough. Letters are perfect. On tablets I can sometimes see the stitching on the rounded rectangles. The way I build them is I render the bottom right corner into a texture (I use a radius of 4 so I use 4*density), then use 3 fill rects for the left/middle/right and render the 4 corners from the texture with either rotation or flip, both gave me the same results.
The math formula seems correct, rounding the radius up doesn’t fix it. Essentially what I do is multiple every pixel by 16x16 and check each of the 16x16 if its within the circle. If so I increase the counter by 1, then write min(255, counter). The 3 rect on the left is x, x+1, x+2, middle is y+1, right is y+2, both the rendering destination x and y affects the results.
-Edit- Putting a solid 2px border along the x and y axis next to the corner piece is close to solving it. If you look at the bottom of the first two rectangles you can see the corner piece is about 1 or half a pixel too high. I can’t tell whats causing it because using print and looking at the values they all seem to be correct. But I really can’t see the problem on my tablet unless I screenshot and zoom in, so I think what I have for now is fine especially since I don’t plan on supporting tablets. I only wanted to run it there to see if my math was correct
