1
$\begingroup$

I want to create an isometric game, and therefore I want to use blender to create tile-map elements which I will compose together with Tiled Map Editor later on. I have followed several tutorials describing the camera settings. My setup looks like this:

enter image description here

You can clearly see that the cube is perfectly aligned within the camera. Even when maximizing zoom inside the 3d view, it does not miss a pixel.

Rendering this with cycles (128x18, hdr lightning, transparent background, png zero compression) gives me the following:

enter image description here

Doesn't look that bad, right? Well If I now open Tiled, creating a map with a Tile Size of 128x64 and use the image from before as 128x128 tile, I get the following result

enter image description here

One can clearly see the thin border around every tile. This is my problem. How can I prevent this from happening? Of course this is reproducible when concatenating images with paint, thus I have to resolve it either with blender or something in between blender and the map creation.

My guess is that it has to do with the anti-aliasing. When zooming in, due to the nature of anti-aliasing, some pixels are semi transparent.

Of course One could change the camera scale or the object size to counter that, but this will cause further issues as other edges are overlapping their "boundaries" then causing weird artifacts. Of course, I could increase size and then cut away the outer pixels with an exact mask, but doing so this starts to get really complicated.... Isn't there a better way?

enter image description here

Improve this question
$\endgroup$
0

1 Answer 1

Reset to default
1
$\begingroup$

Using the 'Box' filtering method seems to fix the problem :

'Box' Pixel filter

If that don't work well for you (ie, because the Box filtering isn't as nice looking), you can try something less practical...

Render in x4 resolution (512x512), without anti-aliasing, then reduce the image size with Gimp* or whatever :

'Blackman-Harris' with a near-zero Width

I tried with Gimp, but I'm pretty sure ImageMagick will give you similar results, with the advantage that you'll can greatly automatize the process.

Improve this answer
$\endgroup$
5
  • 1
    $\begingroup$ Well, that's more or less my answer which I linked above. $\endgroup$
    – Gordon Brinkmann
    Commented Nov 17, 2022 at 12:59
  • 1
    $\begingroup$ I don't think so ; yours don't explain how to get an actual anti-aliasing that fix the problem. However, you explain way better what happens and why it happens :) $\endgroup$
    – thibsert
    Commented Nov 17, 2022 at 13:06
  • 1
    $\begingroup$ No, of course I don't explain how to get anti-aliasing, because anti-aliasing on the transparent background will always result in the edge being partly transparent, which will create a visible seam which is the actual problem in the question. $\endgroup$
    – Gordon Brinkmann
    Commented Nov 17, 2022 at 13:11
  • 1
    $\begingroup$ Of course. The question seemed to focus on Left and Right border, and my answer address that particular problem ; I just realized that didn't fix the 'oblique' borders. $\endgroup$
    – thibsert
    Commented Nov 17, 2022 at 13:20
  • 1
    $\begingroup$ The only problem is, my answer was originally for Eevee where you can set the Filter Size to 0 (manually, but the slider will stop at 0.01) which is not possible in Cycles. So it will never be perfect without tweaking it. You could manually adjust the Alpha to only have 0 or 1, but instead of being semi-transparent on the edge it would then be semi-black which isn't really better. $\endgroup$
    – Gordon Brinkmann
    Commented Nov 17, 2022 at 13:25

Not the answer you're looking for? Browse other questions tagged .