¿Cómo puedo crear un fondo de gran espacio que se repita, de manera imperceptible?

14

¿Cómo puedo crear un fondo de gran espacio que se repita para un juego rts? Quiero tener nebulosas complejas y campos de polvo también, pero dado que las unidades tendrán mucho espacio para explorar, no puedo tener un jpeg de 120000px por 1200000px, así que quiero que se repita la imagen, pero no tener líneas de cambio entre segmentos.

Estoy usando esto con Babylon framework de Microsoft para web GL Canvas

SuperUberDuper
fuente
8
¿Consideró simplemente usar un sombreador de procedimientos en lugar de cualquier imagen? Una simple búsqueda en la web traer éste para arriba, que parece algo muy impresionante: casual-effects.blogspot.com.au/2013/08/starfield-shader.html
LeFauve
@LeFauve En realidad, me gusta mucho esta idea. ¿El juego recuerda las cosas generadas en el pasado cuando viajas de regreso? ¿Cómo puedo administrar esto en la memoria del navegador?
SuperUberDuper
@SuperUberDuper: no es necesario que "recuerde" nada siempre que se genere de manera determinista y local. Simplemente regenere los datos cuando sea necesario.
R .. GitHub DEJA DE AYUDAR A ICE
@LeFauve: Eso realmente debería ser una respuesta. Es mucho mejor que las respuestas dadas.
R .. GitHub DEJA DE AYUDAR A ICE
@R .. Estoy de acuerdo, también sería bueno tener algo de código en webGL;)
SuperUberDuper

Respuestas:

19
  1. Use desplazamiento de paralaje. Tiene múltiples capas de fondo que se desplazan con diferentes fracciones de la velocidad del punto de vista principal. Cuanto más baja es la capa, más lento se desplaza. Esta no es solo una excelente manera de proporcionar una ilusión de profundidad, sino que también hace que los fondos se vean menos repetitivos porque los objetos en las diferentes capas aparecerán en diferentes composiciones debido a que las capas no están sincronizadas.

  2. crea tus fondos procesalmente. En lugar de un gran gráfico de fondo, tenga varios elementos más pequeños y diferentes y colóquelos todos al azar en todo el mundo del juego.

Y por cierto: no uses JPEG cuando puedas evitarlo. Es un formato con pérdida que pierde más calidad cada vez que lo modifica y lo guarda, está muy optimizado para la fotografía y no admite transparencia. Use un formato sin pérdida con canal alfa como PNG. La única buena razón sería cuando su imagen de origen solo esté disponible en JPEG (la NASA publicó muchas buenas imágenes de astronomía que son de dominio público) y no desea modificarlas en absoluto.

Philipp
fuente
7

Una forma de crear un fondo infinito para un juego 2D es la siguiente:

  1. Con un software editor de gráficos (como iDraw para Mac), cree una imagen A que represente una parte de su fondo. Esta imagen debe tener un tamaño limitado.
  2. Duplicar A y reflejarlo en el eje Y, esto es B
  3. Ahora pegue (horizontalmente) juntos A y B, esto es AB .
  4. Finalmente, importe la imagen AB en su juego y repítala horizontalmente a través del código tantas veces como desee.

Espero que esto ayude.

Luca Angeletti
fuente
2
Tamaño limitado, pero no demasiado limitado. Cuanto más pequeña sea la baldosa, más obvia será la repetición en general.
cHao
1
O, en lugar de duplicar, use el filtro Offset en Photoshop y clone el sello sobre los bordes, o simplemente use el filtro "Make Seamless" de GIMP (Filtro → Mapa → Make Seamless).
wchargin
5

Las capas funcionan bien.

Aquí hay algunas matemáticas:

Supongamos que tiene una vía férrea mal hecha de tal manera que se __ __note la brecha entre ellas. Cuando la rueda rueda sobre ellos, forma una pequeña muesca (pequeña muesca).

Si la longitud de la pista es ly la rueda tiene un radio, rentonces 2pi res la circunferencia de la rueda, ration=l/(2pi r)si la relación es de 10.25, entonces la rueda obtendrá una muesca cada cuarto a medida que avanza un largo.

Esta es la forma más fácil que se me ocurre para explicar la cobertura de espacios.

Supongamos que tiene dos imágenes, si una tiene esta relación de un cuarto obtendrá un patrón de 4 fases, se repetirá después de 4 mosaicos. Suponga que tiene 1 fondo principal y 2 superposiciones, con myn fases. Luego, el patrón se repetirá después de m * n mosaicos.

Si bien no importará mucho, el patrón se verá mejor si los números son primos, ese es el mayor divisor común: 1. Por ejemplo, supongamos que tenemos algo de la fase 6 y algo de la fase 4, cada dos fases estas "se alinearán" " en un sentido.

Puede usar esta técnica (especialmente con partículas y otras cosas) para crear muchas cosas "únicas" con muy poco esfuerzo.

De vuelta a la rueda del tren, si la relación es irracional, ¡las muescas cubrirán la rueda! Pero esto realmente no importa.

Alec Teal
fuente
5

Aquí hay otra idea que parece faltar:

En el caso de fondos de larga distancia, como cuadros de cielo, las capas de Parallax realmente no se sienten bien. Piense en las estrellas, por ejemplo, cuando camina sobre la tierra, o incluso mejor durante la noche, todas las estrellas se mueven juntas, aunque sabemos que están a cientos o pensamientos a un año luz de distancia. La cuestión es que están demasiado lejos para que podamos notar sus distancias. Dicho todo esto, todavía queremos una textura muy grande (digamos 120k * 120k), que se dibuje con nuestra potencia computacional limitada (que puede manejar 8k * 8k como máximo). Al igual que con el uso de múltiples capas de paralaje, debe crear diferentes texturas, cada una con diferentes tipos de detalles. Por ejemplo, una representa galaxias, otra es un montón de estrellas, etc. Pero esta vez, en lugar de moverlas a diferentes velocidades, deberían diferir en sus tamaños. Aquí hay un ejemplo: considere usar 3 texturas, uno es 2048 * 2048, otro es 729 * 729 y el tercero es 625 * 625. Dado que estos números son coprimos entre sí, al combinar estas 3 texturas en 3 capas, uno debe mover mcm (2048,729,625) = 764M píxeles desde el origen para ver que se dibuja lo mismo, que se siente como infinito. De hecho, puede agregar otras capas o cambiar el tamaño de cada textura y siempre obtendrá un resultado tan grande comomínimo común múltiplo de tamaños de textura.

Ali1S232
fuente
2
Esta y la respuesta de @ AlecTeal describe una técnica llamada Principio de la cigarra . Es una manera fácil de crear un fondo no aleatorio, muy grande y no repetitivo con muy pocos recursos.
Lie Ryan
4

Esto parece ser un trabajo para un sombreador de píxeles de procedimiento.

Las ventajas sobre el uso de una imagen son:

  • No necesita proporcionar mapas de bits enormes
  • Es de procedimiento, por lo que no tiene que repetir una imagen fija (puede variar infinitamente)
  • Si desea un efecto de paralaje, puede simular miles de planos, lo que sería poco práctico utilizando imágenes.
  • Puedes hacer efectos muy avanzados, como iluminación dinámica
  • La mayor parte del procesamiento se realiza por su GPU, dejando la CPU libre para otras partes de su juego.

Una simple búsqueda en la web muestra este sombreador http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html que se parece a lo que estás buscando.

No soy un experto en WebGL, pero según esta página , parece que usa el lenguaje GLSL normal (este es el lenguaje C-Like utilizado por las tarjetas gráficas para programar sombreadores). Esto significa que probablemente tendrá poco o ningún cambio que hacer para que funcione.

Sin embargo, puede intentar comenzar con un sombreador más básico para comprender cómo funciona.

Esta página de blog enumera todos los pasos para implementar un sombreador en WebGL. Ese parece un buen lugar para comenzar.

Otro buen lugar para encontrar ejemplos maravillosos de sombreadores es https://www.shadertoy.com/

LeFauve
fuente
Gran gracias! ¡Ahora tengo dificultades para elegir una respuesta!
SuperUberDuper
2
Bueno, si tienes la oportunidad de probar shaders, definitivamente es algo que será útil a largo plazo si quieres hacer juegos bonitos. El primer paso es un poco alto (me tomó 2 semanas lograr que mi primer sombreador se viera como yo quería), pero valió la pena a largo plazo.
LeFauve
2

Puede cortar su gran JPEG en pequeños segmentos y colocarlos (parte visible), ni siquiera necesita almacenarlo en una memoria todo el tiempo.

Y como en los juegos antiguos, algunas 'fichas' pueden repetirse. Esa era una solución común para la consola NES, eso incluso era compatible con el hardware.

Alexsey Shestacov
fuente
1
Es extremadamente difícil, si no imposible, cortar un JPEG en JPEG más pequeños que se coserán sin fallas visuales debido a la compresión con pérdida. Si opta por mosaicos, deberá utilizar un formato de archivo de compresión sin pérdidas, como PNG.
LeFauve
1
Estoy de acuerdo que PNG puede ser mejor, en el otro lado, texturas JPEG son comunes en gráficos 3D, y más importante Use JPEG 16x16 bloques para la codificación en.wikipedia.org/wiki/Macroblock corte correcto pueden no notan si no la codificación en menor Velocidad.
Alexsey Shestacov