El flickering o bleeding, es un glitch gráfico que aparece a la hora de renderizar escenarios creados a partir de tilesets. El problema está derivado por el redondeo de punto flotante producido en los shaders, en concreto a la hora de mapear las coordenadas UV de las texturas. El resultado son unas lineas verticales u horizontales que aparecen de forma aleatoria entre los tiles, estropeando la experiencia visual del programa.
Una solución rápida y efectiva a este problema, es añadir pixeles extra en la periferia de cada tile, de forma que estos correspondan en color a los pixeles vecinos. A continuación se muestra un ejemplo:
En el ejemplo se muestra como se ha pasado de tener un tileset con las images totalmente pegadas, a otro con las imágenes separadas por pixeles extra, con los que se proyecta la imagen en todas las direcciones, de forma que cuando suceda el redondeo de coordenadas UV, se procesen pixeles que estén en el contexto deseado y así eliminar ruidos indeseados, como es el flickering o bleeding.
Con el fin de realizar este proceso de forma rápida y sencilla, he escrito esta aplicación web:
