Mostrar feed RSS

neostalker

[Lecciones] Creando un mapa usando tiles

Calificar esta entrada

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!

Enviar "[Lecciones] Creando un mapa usando tiles" a ¡Menéame! Enviar "[Lecciones] Creando un mapa usando tiles" a Technorati Enviar "[Lecciones] Creando un mapa usando tiles" a Digg Enviar "[Lecciones] Creando un mapa usando tiles" a del.icio.us Enviar "[Lecciones] Creando un mapa usando tiles" a Google Enviar "[Lecciones] Creando un mapa usando tiles" a Finclu Enviar "[Lecciones] Creando un mapa usando tiles" a Copada Enviar "[Lecciones] Creando un mapa usando tiles" a StumbleUpon Enviar "[Lecciones] Creando un mapa usando tiles" a Reddit Enviar "[Lecciones] Creando un mapa usando tiles" a FaceBook

Actualizado 13/09/2008 a las 03:45 por neostalker

Categorías

Comentarios

  1. Avatar de Locke
    Guay el tuto, ante eso ninguna pega.

    No se si te habras esmerado mucho con los tiles de ejemplo o si los has hecho rapidamente solo a modo de ejemplo ilustrativo, pero el suelo, con las sombras que tiene y la forma de moverse aparenta ser una pared vertical... y ademas es muy repetitivo. Un par de tiles intercalados con diferentes motivos quedarian mucho mejor ^^
  2. Avatar de Gusarapo
    Joer, muchas gracias, estas cosillas me vienen muy bien.
  3. Avatar de neostalker
    Sí, para el suelo no me he esmerado en exceso, prefiero que quede bien explicado. Además, dibujar escenarios no es mi fuerte

    No obstante creo que sirve para que la gente entienda el concepto.

    PD: Tenía pensado lo de intercalar algún tile diferente, pero me quedé sin tiempo para hacerlo. Igual añado alguno luego.

    EDIT: COÑE, ya entendí a qué te referías! No, si la idea es que aparente ser una pared vertical, el suelo es solo el borde superior. Utilicé los Sonic como inspiración que recurren a este tipo de suelo también
    Actualizado 13/09/2008 a las 02:38 por neostalker
  4. Avatar de neostalker
    Montajito con material del Sonic 3



    Montajito con material del Super Mario World



    Juas, Anarchy ha debido modificar lo hora del foro por fin y ahora este post aparece intercalado
    Actualizado 13/09/2008 a las 02:44 por neostalker
  5. Avatar de Locke
    Si la cuestion es quejarse, no puedes evitarlo xD
  6. Avatar de Aiken
    juer pues el suelo es un poco estrecho es todo acantilado
    la verdad es que con lo bien que queda el resto, el suelo queda ahi como metido con palanca y no queda bien.

    A mi tus tutoriales me molan, pero no lo que veo es que lo pones demasiado facil, supongo que porque a ti se te hace obvio, pero para que lerdos como yo podamos seguirlo deberian ser mucho mas paso a paso ... que te has hecho un escenario en 10 lineas!!


    Aiken
  7. Avatar de Locke
    Ahhhh, ahora lo pillo. Seria mas facil de ver si la parte de arriba fuera de hierbecilla ^^
  8. Avatar de neostalker
    Pero entonces me diríais que es poco original!
  9. Avatar de kennyspirit
    podrías haber puesto al sonic corriendo encima del suelo que habría molado un huevamen y parte del otro
  10. Avatar de doble-h
    que programa utilizas para el pixel art????

    y para las animaciones?

    saludos!
    Actualizado 09/10/2008 a las 13:08 por doble-h
  11. Avatar de AOJ
    Neostalker tio, eres un auténtico master del píxel art

    Ya tardas en pedirle a Coelo que te enchufe en su curro. O en ir a visitar alguna empresa que haga juegos para teléfonos móviles, que ahí seguro que hay posibilidades de tener curro interesante como "pixelartista"

    Y aunque no te guste hacer fondos, este te ha quedado genial. Mola mucho como encaja con Sonic y Mario xDDDD
  12. Avatar de neostalker
    El programa, como he dicho muchas veces es el Character Maker Pro (en la sección de tutoriales tienes uno para saber como manejarlo de manera báscia). Para hacer el gif, el Animation Shop de Jasc Software.

    Gracias por los piropos AOJ, espero que el jamón te haya gustado
  13. Avatar de doble-h
    muchas gracias!!!!!
  14. Avatar de Neodreamer
    Una duda neostalker, los tiles que has usado en el ejemplo, son verticales...luego como haces la animacion de planos si las divisiones horizontales forman parte de varias verticales? no se si expreso bien la pregunta.
  15. Avatar de neostalker
    Creo que no he entendido del todo a lo que te refieres, Neodreamer, pero trataré de explicarte.

    En este caso, he utilizado tiles para componer un fondo, simulando que existen varias profundidades, cuando realmente solo existe una. Esto está hecho así de cara a montar luego un gif animado.

    Si hablamos de hacer gráficos para un juego, lo lógico sería que cada fondo tuviese sus propios tiles (con transparencias) y que se superpusieran entre sí en función de la posición o la velocidad "del foco de la cámara".