[Lecciones] Creando un mapa usando tiles
por
- 12/09/2008 a las 21:57 (6193 Visitas)
Hola! Cuánto tiempo desde mi última lección de pixel art!
Esta vez os traigo un pequeño ejemplo que os enseñará a hacer un mapa compuesto por tiles, probablemente una de las mejores maneras para hacer un escenario grande sin tener que cargar una imagen gigantesca con todo el escenario.
Y qué es un tile? Pues la respuesta la teneis en Wikipedia
Son realmente útiles a la hora de programar para GP32, GP2X, etc porque un juego que cargue los escenarios por tiles solo necesita mostrar unos cuantos en pantalla, no todo el escenario. De esta manera se ahorra muchísima memoria y se optimiza el rendimiento.
Os preguntareis qué juegos son los que aprovechan mejor montar los mapas a base de tiles, la respuesta es sencilla: Cualquiera que muestre un escenario a base de imágenes cambiantes y que sea de gran tamaño. Los mejores ejemplos son los juegos de plataformas (Sonic & Knuckes, Super Mario Bros 3, Ristar...) y los RPGs (Final Fantasy VI, Chrono Trigger, Tales of Phantasia...). Un juego tipo Street Fighter 2, que solo muestra unos indicadores de salud, puntos y tiempo, dos personajes y un fondo no suelen utilizar este sistema porque el fondo se ve casi entero en pantalla constantemente, por lo que es más fácil cargarlo en memoria al completo en vez de por secciones.
Bueno, pasemos al tema. Agarrad vuestros ratones que empezamos!
PASO 1
Empezaremos por lo básico, como en las lecciones anteriores. Unas pocas líneas y unos pocos colores planos para esbozar lo que queremos. En el ejemplo que os voy a poner, crearemos un escenario del tipo plataformero, por lo que trabajaremos con un suelo, un horizonte y un cielo, que estarán en diferentes planos.
Cada tile tendrá unas dimensiones de 32x32 píxeles.
PASO 2
Ahora que ya tenemos algo con lo que trabajar, tenemos que empezar a colorear como más nos guste, pero tendremos que estar atentos a una cosa: Algunos tiles han de concordar por sus límites inferior, superior y/o laterales de manera que se puedan juntar varios formando estructuras coherentes. Para superficies que necesiten degradados, como puede ser el cielo, recordad que podemos utilizar la técnica del dithering
PASO 3
Finalmente solo nos queda terminar con los detalles, perfeccionar los efectos de iluminación y corregir las posibles incongruencias con los bordes. La mejor manera de hacerlo es poner en el lienzo el tile con el que estamos trabajando y pegar duplicados suyos en cada lado, de manera que podamos ir trabajando con los bordes y hacer que concuerden unos con otros. El resultado final sería este:
Ya tenemos nuestro pequeño sistema de tiles, ahora solo hay que colocarlos en la posición adecuada para crear un trozo de mapa.
Si os fijais, acabamos de formar una imagen de 320x256 píxeles con apenas 8 tiles. De esta manera un juego debidamente programado solo necesitaría meter en memoria esos 8 recuadros y mostrarlos varias veces en determinadas posiciones, en vez de memorizar una imagen muy grande y representarla solo una vez. Además, usar este método siempre tiene otras ventajas, como la de establecer un sistema de durezas y colisiones, pero eso ya es harina de otro costal
Y de regalo aquí os dejo una animación de como quedaría el escenario en movimiento, dando velocidades diferentes a los tiles en función de su perspectiva en el plano.
Orden de planos:
Saludos y que lo disfruteis!