¿Cómo puedo implementar un efecto de línea de exploración?


8

Estoy trabajando en un juego de plataformas de la vieja escuela en libgdx y quiero que tenga un efecto "scanline", como este:

maldita castilla efecto scanline

Mi primer intento fue hacer una pequeña textura y dibujarla en un quad de pantalla completa. Usé dos modos diferentes de cámara ortográfica (uno para el mapa de mosaico principal del juego y otro para representar la textura de la línea de escaneo). En algún momento, la textura se atasca en el mapa de mosaico y, a veces, es demasiado grande y cubre toda la pantalla en negro.

¿Es razonable mi enfoque usando dos cámaras y una textura? ¿Cuál es una buena solución para lograr este efecto?

Respuestas:


4

El problema de representar ingenuamente una pequeña textura de línea de escaneo en un gran quad de pantalla completa es que la textura se escalará, haciendo que lo que era un conjunto de líneas de escaneo de un solo píxel en la textura sea mucho más gruesa, más borrosa (dependiendo de su método de interpolación), y generalmente más feo.

En su lugar, debería mosaicola textura a través del quad de tal manera que conserve una relación de píxeles a texel de 1: 1. Esto implica ajustar las coordenadas de textura del quad para que sean mayores que 1 en la medida más lejana, y también configurar el parámetro de ajuste de texturas para que se repita en lugar de pinzar. Si su textura es de 64x64 píxeles y su pantalla es de 1024x768 píxeles, puede darse cuenta de que en el eje X debe enlosar la textura 16 veces (1024/64). Del mismo modo, en el eje Y debe colocarlo en mosaico 12 veces (768/64). Puede ajustar esta matemática para los límites reales de su textura y pantalla. Use esos números (16 y 12) como las extensiones máximas de las coordenadas de textura de su quad, y obtendrá un resultado mucho mejor. Dependiendo de cómo esté configurada actualmente su proyección ortográfica para los mosaicos, es posible que ni siquiera necesite cambiarla para representar esto.

Alternativamente, puede adoptar un enfoque de sombreado: renderice su escena normal a una textura, luego renderice esa textura como un quad de pantalla completa, pero omita cada línea impar de píxeles. Si conoce los límites de la pantalla en el sombreador, puede hacerlo con bastante facilidad (este es un seudocódigo , vagamente HLSL-ish, pero debería traducirse fácilmente):

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);
}

0

El problema con el uso de una cámara es que escalará la imagen. Lo que esencialmente desea es dibujar siempre la misma imagen con el mismo tamaño (100%). Supongo que es lo suficientemente grande como para cubrir siempre toda la pantalla.

Si este es el caso, una solución sería aplicar la transformación inversa de la cámara en la imagen para que dibuje en un tamaño de "píxeles perfectos".

La opción más fácil sería escalarlo usted mismo. P.ej. Si su cámara está ampliada al 75%, su imagen se escalará al 133% ( 1/0.75).


Usted dice que la imagen tiene que ser lo suficientemente grande como para cubrir toda la pantalla, ¿no es posible llenar un poco rectángulo con una textura pequeña?
Alexandre GUIDET

@AlexandreGUIDET No estoy seguro. Utilizo una textura para desvanecerme y desaparecer, y es un píxel de 1x1 que está escalado. Para líneas de exploración, desea que se repita. Debe verificar si libGDX tiene una opción para esto.
cenizas999

@AlexandreGUIDET, ¿intentaste esto?
cenizas999

Elijo un enfoque diferente usando otra cámara y dibujando el efecto de línea de exploración sobre la escena. Todavía no estoy satisfecho con el resultado porque la escena parece deslizarse detrás de las líneas de exploración. ¿Qué piensas acerca de usar un sombreador en su lugar?
Alexandre GUIDET
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.