lunes, 2 de marzo de 2015

Skybox de la primera pantalla



Una de las cosas con las que quería trabajar es el Skybox. Ese fondo del juego inalcanzable que ponemos. Normalmente se trabaja con cielos, horizonte, eligiendo entre nublado, día, noche y poco más. Y quise hacer algo distinto. Si estamos en un mundo onírico y fantasioso no es muy inmersivo que el fondo sea de lo más normalucho.

Una de las primeras ideas fue poner el cubemap al revés. Es decir que el cielo fuera suelo y el suelo fuera el cielo, montañas por encima de la cabeza y nubes bajo tus pies. Así además me serviría como primer referente de que la dirección de la gravedad en un mundo imaginario no tiene por que ser la normal. Pero no funcionaba, el fondo llamaba demasiado la atención, y parecía completamente desconectado del escenario que vamos pisando. Daba la sensación de que el escenario estaba flotando dentro del skybox, algo que es cierto pero que no debería notarse tanto.


Entonces comencé la búsqueda de skyboxes por Internet, buscando alguno que pudiera modificar para darle un estilo interesante y que pegase con el estilo visual por el que quiero llevar al juego. Encontré uno tipo fantasía, pero sin pasarse, cielo azul, montañas, y la luna de día. Estña hecho por “The Mighty Pete”, estaba distribuido bajo licencia GNU GPL 2, así que puedo usarlo, hacerle perrerías, etc, lo que quería... salvo una pequeña restricción que hace y que me ha parecido muy graciosa:

No tienes permiso para convertir este Skybox en un tipo con pérdida como jpg. Lo siento, pero si he esperado 4 días a que se renderizase, puedes poner archivos más grandes y limpios. Además solo salva espacio en disco, en memoria ocupa lo mismo y es más lento para convertir para el motor del juego.”

Así que respetaré su voluntad, voy a cambiar su imagen, pero mantendré en formato targa para que no se enfade xd. Para entender algunos problemas que he tenido hay que entender el concepto de cubemap que se usa para el skybox. Son 6 texturas que hacen las paredes de un cubo desde dentro, y encajan perfectamente. Aunque tradicionalmente se muestran como 1 imagen plana, como si fuera uno de estos recortables de figuras geométricas que hacíamos de pequeños. Así que el skybox original es algo así:

Skybox

Una vez que he juntado todo en una imagen, me pongo a hacer pruebas de posibles tratamientos gráficos. Aunque photoshop sea el gran programa de retoque fotográfico del mundo, para estas cosas prefiero usar The Gimp, ya que tiene algunos efectos y plugins muy interesantes y con más posibilidades que los que trae por defecto photoshop, además como se pueden programar en Phyton, es fácil encontrar packs con auténticas maravillas de la comunidad. Aunque creo que casi todo lo que he hecho es con el plugin Gimpressionist, que permite efecto muy curiosos. Me quedé con los que más me gustaron y como no me decidía por un estilo u otro publiqué en facebook la siguiente imagen para pedir consejo.

Estilos gráficos

El resultado fue que ganó la 5 seguida por la 2. Y un compañero me sugirió que quedaría muy bien la 2 con una leve animación. Así que pensé cómo podría hacerlo. O bien conseguía dar el efecto al cubemap en gpu con un render to texture, o bien tenía muchos cubemaps e iba cambiando de uno a otro. Tenía preocupación por el impacto en rendimiento de ambas cosas. Por un lado el proceso de 6 imágenes de 512x512 en gpu (y que las uniones entre ellas queden bien, no se pueden tratar por separado) y por el otro la memoria que se puede necesitar. Con querer una animación remotamente fluida, de 2 segundos, a 15fps, serían 30 cubemaps, y cada uno son unos 6 megas, me iría a unos 180 megas de memoria de vídeo solo para el fondo. Lo cual en un pc gamer es una chorrada, pero en algunos entornos puede tirar abajo el juego. De todas formas no encontré nada hecho para gpu, ni una forma sencilla de hacerlo, miré el código fuente de Gimp, pero implementar eso en GPU es casi un proyecto entero, al menos una práctica. Y aún haciéndolo estático, el problema de los bordes entre caras en la versión modificada eran lo suficientemente gordos como para llevarme unas cuantas horas y si tenía que repetir eso 30 veces para la animación (además al azar, no se puede controlar mucho la generación), el tiempo para el fondo se me iba de las manos, así que esa bonita idea se ha caído por ahora.

El efecto número 5, que es como si estuviera hecho con palillos de colores, no funcionaba bien en el juego, los palillos eran demasiado grandes y parecía que el fondo estaba demasiado cerca, además hacer el empalme de esos palillos grandes en diferentes direcciones era jodido. Por otro lado, el 2, el de tipo Van Gogh tiene esos remolinos que van siguiendo las pinceladas, y que hace que si no se siguen esas figuras de una cara a otra se note mucho el corte. Es muy difícil de encajar. Así que lo siento por los que votaron, pero pasé a usar el tipo 3, que tiene las formas más pequeñas que el tipo 5, y no tiene grandes formas que unir, aunque si una dirección de pintado.

Lo que hice fue cuadriplicar cada tapa, es decir tener 4 techos y 4 suelos, y poner cada uno en su sitio para que las transiciones entre cada pared y su suelo y techo fueran tenidas en cuenta por el algoritmo de pintado. Tras eso “solo” tenía que unir los 4 techos y los 4 suelos en uno de cada. Y lo hice por triángulos, se nota un poco en la dirección de las pintadas en el techo, pero no se nota una línea clara de pegado cutre, aunque no lo haya hecho así, el resultado final es como si hubiera cambiado el desarrollo del prisma al siguiente.

Skybox rombos

Y en el vídeo se ve el resultado. Es bastante bueno, parece que estuvieras dentro de un cuadro. Intentaré que el avance de la pantalla sea en su mayor parte hacia el lado de la luna que es el más bonito con diferencia. Es posible que tenga que retocar el color. Si el skybox representa algo muy lejano no debería verse el color muy vivo. Tal vez el cielo sí, pero las montañas deberían tener un color con tono más azulado para que parezcan más lejanas. Veré como lo hago.

No hay comentarios :

Publicar un comentario