Page 1 of 1
[Solved] Sprite batch and zooming - stripes between tiles
Posted: Fri Feb 21, 2014 4:00 pm
by Germanunkol
I'm sure I've seen this problem described here before, but can't find the answer.
In trAInsported, I now (finally) got around to change the map rendering to use sprite-batches. However, when I scale the map I get these disgusting black stripes between tiles:
I have tried using math.floor() for the coordinates to all love.graphics.translate functions, but no changes so far. Any hints?
Re: Sprite batch and zooming - black stripes between tiles
Posted: Fri Feb 21, 2014 8:01 pm
by Kadoba
This problem is called called texture bleeding. It can happen even without using sprite batches. The most common way around this is to pad each tile with a 1px wide border with the same color as the neighboring pixel. You can also render the viewing area to a texture and scale that instead but it has limited use.
Re: Sprite batch and zooming - black stripes between tiles
Posted: Fri Feb 21, 2014 9:06 pm
by Jasoco
If you're not doing any scaling when drawing, or are drawing full size to a canvas, then make sure to floor the X and Y of everything you draw. Otherwise do what was mentioned above.
The lines are images being drawn at fractions of a pixel and being blended with the background.
Re: Sprite batch and zooming - black stripes between tiles
Posted: Fri Feb 21, 2014 9:18 pm
by slime
viewtopic.php?f=4&t=77022&p=161092#p161090
Tools like
TexturePacker and
ShoeBox can do the extrusion automatically when they generate a texture atlas from individual images.
Re: Sprite batch and zooming - black stripes between tiles
Posted: Mon Feb 24, 2014 10:18 am
by Germanunkol
Thanks, that worked.
I ended up writing a bash script and using imagemagick, because I don't understand TexturePacker's license and didn't want to buy it, and ShoeBox doesn't run on Linux. For anyone who's interested, the following will pad all files in the current directory and save them into the output/ subdirectory.
Code: Select all
#!/bin/bash
mkdir -p output
for file in *.png
do
convert -size 130x130 xc:none \
$file -background none -repage +1+1 \
\( -clone 1 -crop 1x1+1+1 -repage +0+0 \) \
\( -clone 1 -crop 1x1+128+128 -repage +129+129 \) \
\( -clone 1 -crop 1x1+1+128 -repage +0+129 \) \
\( -clone 1 -crop 1x1+128+1 -repage +129+0 \) \
\( -clone 1 -crop 128x1+1+1 -repage +1+0 \) \
\( -clone 1 -crop 128x1+1+128 -repage +1+129 \) \
\( -clone 1 -crop 1x128+1+1 -repage +0+1 \) \
\( -clone 1 -crop 1x128+128+1 -repage +129+1 \) \
-flatten \
-set colorspace RGB output/$file
done
After that, I used Gimp to put the files back together (cause I needed a special order).
Gimp has a nice feature: you can set up a grid by going to "Image->Configure Grid..." and then setting width and height to your tile size. Then enable snap to grid and show the grid (both in the "view" menu). Now you can open all tiles as layers (File->Open as Layers) and simply drag them into their position.