User Tag List

Resultados 1 al 7 de 7

Tema: [Tutorial] Dibujar distintos tipos de suelo (recuperado)

  1. #1
    Fecha de ingreso
    Jul 2004
    Ubicación
    Perrete City
    Mensajes
    25,090
    Agradecer
    286
    Agradecido 155 veces en 94 posts
    Mencionado
    11 Post(s)
    Tagged
    0 Tema(s)
    Entradas de blog
    30

    [Tutorial] Dibujar distintos tipos de suelo (recuperado)

    Hola chicos, el otro día os enseñé unos pequeños trucos para dibujar personajes estilo RPG de 16 bit. Pues hoy os aconsejaré sobre las mejores maneras de ponerles un suelo para que puedan recalificar a gusto xD

    Como vereis más adelante este será un tutorial que os dará las directrices básicas para que podais hacer varios tipos de suelo y superficies (hierba, madera, piedra, asfalto, agua, lava...).

    Pasemos a la acción ^^

    PASO 1: ELEGIR LOS COLORES
    ----------------

    Empezaremos por dibujar 4 tipos de suelo: hierba, madera, piedra y asfalto, así que tendremos que elegir colores acordes con cada superficie que podamos usar como base. Un ejemplo:



    Ahora que ya tenemos una base de la que partir hay que plantearse 3 cosas:
    - El suelo, debe tener cuantos menos colores mejor para ahorrar memoria de cara a la progrmación en GP32 (permitiéndonos mayor margen si se trata de la GP2X).
    - Cada tile (recuadro que representa el trozo de suelo), debe estar enfocado pensando en conjunto, es decir, teniendo en cuenta que el suelo no lo va a formar un solo tile, sino muchos iguales, que deben dar la sensación de ser uno solo de mayor tamaño.
    - Olvidados de los detalles muy vistosos a la hora de dibujarlos, lo único que conseguiríamos sería multiplicar ese detalle por un número de tiles inmenso, que distraería completamente la atención del tipo de suelo en sí. Los tiles de detalle solo deben usarse de forma esporádica. Posteriormente os enseñaré a diseñar algunos y a colocarlos debidamente.

    PASO 2: DETALLANDO LOS TILES
    ----------------

    Comencemos a detallar los tiles. Para ello empezaremos dibujando una serie de detalles básicos:
    - En el caso de la hierba haremos unas pocas briznas que iremos esxpandiendo hacia los laterales lo más homogéneamente posible para que a la hora de colocar dos tiles parezcan ser uno el doble de largo.
    - En el caso de la madera conviene pensar en que la superficie se puede hacer más o menos fina, dependiendo del tamaño de los tablones que dibujemos. Nos esforzaremos para que los tablones queden alternos y den sensación de encaje.
    - La piedra, esta es quizá la más difícil, pues hay que dar la sensación de que es un terreno agreste y hostil en muy pocos píxeles. Para ello usaremos colores oscuros simulando grietas o desgastes.
    - El asfalto, quizá sea la más fácil, simplemente hay que dibujar una trama de píxeles aleatoria y expandirla por todo el recuadro, usando colores que no se alejen mucho unos de otros en la escala RGB (Red Green Blue).

    Veamos como se puede llevar el proceso:



    El efecto de unos cuantos tiles juntos de cada tipo sería este:



    PASO 3: CREANDO TILES DE DETALLE
    ----------------

    Lo que se podría conocer por tiles de detalle son aquellos tiles destinados a "adornar", es decir, a ofrecer un poco de variedad entre la homogeneidad de los tiles de suelo mayoritarios. Los detalles que incorporan estos tiles son mínimos, lo suficientemente insignificantes como para crear un elemento a parte que superponer al mapa (consumiendo más memoria a la hora de implementarlo en un juego, además). Por eso, partiendo de los tiles que acabo de mostraros, haremos un tile de detalle para cada tipo de suelo. Empecemos:



    Ahora que ya tenemos algunos detalles en cada tile (unas flores en la hierba, agua derramada en la madera, hierbajos entre los cantos y una línea señalizadora de tráfico en el asfalto). Recordad que no se debe abusar de ellos, pues pueden saturar la imagen y desviar la atención del ambiente general de la imagen. Aquí os muestro unos ejemplos de cómo deben ser usados.



    PASO 4: CREANDO TILES ANIMADOS
    ----------------

    En último lugar tenemos los tiles animados, que suelen ser los que se utilizan para representar el agua, la lava, o algún detalle animado, como los charcos en los días de lluvia o la hierba mesada por el viento (qué poético xDDD).

    El proceso para crear estos tiles es exactamente el mismo que los anteriores, solo que llegado el momento hay que crear frames para hacer la animación. Aquí os dejo unos ejemplos que hice hace tiempo, creo que son el ejemplo perfecto:



    Este fuego consta de 4 frames animados en el orden: 1, 2, 3, 4, 3, 2, lo que permite reproducirlo en un bucle perfecto.



    Esta animación es la que usé un día para hacer "agua radiactiva", fijaos que solo son 3 frames animados en el orden: 1, 2, 3, 2, en bucle.

    Pues de esta manera se pueden hacer muchísimos tiles que os serán útiles para vuestros proyectos. Espero que este tutorial os ayude con ellos.

    Saludetes!

    ACTUALIZACIÓN: FUNDIENDO LOS TILES
    -----------------------------------

    A petición popular aquí os dejo una pequeña explicación para que aprendais a fundir los tiles para que no queden cambios tan bastos usando los normales.

    El primer paso consiste en coger la mitad de la derecha de uno y la mitad de la izquierda de otro y colocarlos juntos, ocupando lo que un tile normal, de este modo:

    ó

    Y a continuación viene el fundido, que es lo más fácil del mundo. Basta con coger la hierba y dibujar con dos o tres píxeles pequeñas hebras que se entrelacen con la grava. Para resaltarlo más, justo en el borde utilizaremos la gama de colores más oscura que tenga cada tile en el original, de esta manera será algo más visible la diferencia entre superficies. En el caso de la madera es tan fácil como darle un pequeño relieve si queremos que quede por encima de la hierba y aserrar los laterales, como si se hubiese partido o roto con el paso del tiempo. Quedaría más o menos así:

    ó

    Y esto es todo lo relativo a tiles, de momento ^^

    PD: He tenido que quitar los "esmailis" y alguna imagen para poder poner todos los dibujos importantes en el primer post.

  2. #2
    Fecha de ingreso
    Jun 2004
    Ubicación
    Madrid 2M12
    Mensajes
    6,498
    Agradecer
    4
    Agradecido 2 veces en 2 posts
    Mencionado
    0 Post(s)
    Tagged
    0 Tema(s)
    Entradas de blog
    27
    Yúhuuu! Gracias por rescatarlo Neoo

  3. #3
    Fecha de ingreso
    Jul 2004
    Ubicación
    Perrete City
    Mensajes
    25,090
    Agradecer
    286
    Agradecido 155 veces en 94 posts
    Mencionado
    11 Post(s)
    Tagged
    0 Tema(s)
    Entradas de blog
    30
    Cita Iniciado por wOw!
    Yúhuuu! Gracias por rescatarlo Neoo
    Ahora rescataré el otro ^^

    Mierda, el otro no lo encuentro con el google, lo tengo guardado en el disco duro, pero sin los links a las imágenes. Es lo único que me falta para poderlo restaurar.

    Si alguien lo encuentra que me de el link del tuto cacheado, porfa ^^
    Última edición por neostalker; 09/04/2007 a las 22:05

  4. #4
    Fecha de ingreso
    Aug 2006
    Ubicación
    Valencia
    Mensajes
    3,649
    Agradecer
    0
    Agradecido 0 veces en 0 posts
    Mencionado
    0 Post(s)
    Tagged
    0 Tema(s)
    Entradas de blog
    35
    ahora mismo te iba a pedir que los resubieras muchas gracias tío, a ver si me guarde el anterior o te lo encuentro cacheado y no ha desaparecido en combate como tantas cosas de mi disco duro...

    Gracias de nuevo y a ver si te curras uno sobre cómo hacer personajillos cómo ese ninja que estabas haciendo

    EDITO: has mirado en tu página personal de imaheshack?, ahi se quedan todas las imágenes que se suben
    Última edición por kennyspirit; 16/04/2007 a las 13:03

  5. #5
    Fecha de ingreso
    Dec 2004
    Ubicación
    MADRID, 40.443646,-3.616874
    Mensajes
    4,752
    Agradecer
    64
    Agradecido 35 veces en 26 posts
    Mencionado
    4 Post(s)
    Tagged
    0 Tema(s)
    Entradas de blog
    8
    Eres un genio del PIXL

  6. #6
    Fecha de ingreso
    Jul 2004
    Ubicación
    Perrete City
    Mensajes
    25,090
    Agradecer
    286
    Agradecido 155 veces en 94 posts
    Mencionado
    11 Post(s)
    Tagged
    0 Tema(s)
    Entradas de blog
    30
    Cita Iniciado por kennyspirit
    EDITO: has mirado en tu página personal de imaheshack?, ahi se quedan todas las imágenes que se suben
    Me temo que las imágenes que subo a Imageshack las incluyo sin haberme registrado, así que no puedo acceder a una lista con las imágenes que he subido

  7. #7
    Fecha de ingreso
    Oct 2004
    Ubicación
    Sinclair Village
    Mensajes
    229
    Agradecer
    0
    Agradecido 0 veces en 0 posts
    Mencionado
    0 Post(s)
    Tagged
    0 Tema(s)
    ¿Podrías colocar de nuevo el tutorial de pixel art de personajes?
    Me parece que se perdió en la última inundación del Foro...

    Gracias !
    C Nonsense in BASIC, 0:1

Permisos de publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •