Como posso implementar um efeito de linha de verificação?

Estou trabalhando em um jogo de plataformas da velha escola no libgdx e quero que ele tenha um efeito "scanline", assim:

Minha primeira tentativa foi fazer um pouco de textura e desenhá-la em um quad de tela cheia. Usei dois modos de câmera ortográfica diferentes (um para o mapa principal do jogo e um segundo para renderizar a textura da linha de varredura). Às vezes, a textura fica presa no mapa de blocos e às vezes é muito grande e cobre a tela inteira em preto.

Minha abordagem está usando duas câmeras e uma textura razoável? Qual é uma boa solução para alcançar esse efeito?

O problema de renderizar ingenuamente uma textura pequena da linha de varredura em um quad grande de tela cheia é que a textura aumentará de tamanho, tornando o que era um conjunto de linhas de varredura de pixel único na textura muito mais espesso, mais desfocado (dependendo do seu método de interpolação) e geralmente mais feio.

Você deveria colocar lado a ladoa textura no quad, de maneira a preservar uma proporção de 1: 1 pixel / texel. Isso envolve o ajuste das coordenadas de textura do quadrilátero para que sejam maiores que 1 na maior extensão e também a definição do parâmetro de quebra de texturas para repetir em vez de prender. Se sua textura é de 64x64 pixels e sua tela é de 1024x768 pixels, você pode imaginar que no eixo X você deve agrupar a textura 16 vezes (1024/64). Da mesma forma, no eixo Y, você deve colocá-lo lado a lado 12 vezes (768/64). Você pode ajustar essa matemática para os limites reais de sua textura e tela. Use esses números (16 e 12) como as extensões máximas das coordenadas de textura do seu quad, e você obterá um resultado muito melhor. Dependendo de como sua projeção ortográfica está atualmente configurada para os ladrilhos, talvez você nem precise alterá-la para renderizá-la.

Como alternativa, você pode adotar uma abordagem de sombreador: renderize sua cena normal em uma textura e, em seguida, renderize essa textura como um quad em tela cheia, mas omita todas as linhas ímpares de pixels. Se você conhece os limites da tela no sombreador, pode fazer isso com muita facilidade (esse é um pseudocódigo , vagamente HLSL-ish, mas deve ser traduzido facilmente):

float2    screenSize;
sampler2D textureSampler;
float2    textureCoordinate;

float4 main () { 
   // Interpolation of texture coordinates means that we don't get nice
   // integer boundaries we could take the modulus of.
   float half_y = textureCoordinate.y * screenSize.y * 0.5;
   float delta = round(half_y) - half_y;
   float delta_squared = delta * delta;
   if (delta_squared < 0.1) {
      return texture2D(textureSampler, textureCoordinate);
   } 

   return float4(0,0,0,0);
}

O problema de usar uma câmera é que ela redimensionará a imagem. O que você quer essencialmente é sempre desenhar a mesma imagem no mesmo tamanho (100%). Presumo que seja grande o suficiente para cobrir sempre a tela inteira.

Se esse for o caso, uma solução seria aplicar a transformação inversa da câmera na imagem para que ela desenhe em um tamanho "pixel perfeito".

A opção mais fácil seria escalá-lo você mesmo. Por exemplo. se sua câmera for ampliada para 75%, sua imagem será redimensionada para 133% ( 1/0.75).