¿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
Respuestas:
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.
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.
fuente
Una forma de crear un fondo infinito para un juego 2D es la siguiente:
Espero que esto ayude.
fuente
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,rentonces2pi 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.
fuente
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.
fuente
Esto parece ser un trabajo para un sombreador de píxeles de procedimiento.
Las ventajas sobre el uso de una imagen son:
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/
fuente
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.
fuente