Arte en Videojuegos V: Mosaicos [NB Original]

Mega Man 8 bit deathmatch (c) CutmanMike

Los mosaicos o tiles, son un elemento bastante utilizado en juegos, como ya hemos mencionado en artículos previos. Sus principales usos son para optimizar recursos tanto de espacio, como de capacidad visual, y de tiempo de desarrollo.

Para la elaboración de mosaicos, lo más importante es  tener presente son las orillas de la imagen. La principal característica de un mosaico es que se repite múltiples veces, y debe estar pegada una imagen completamente a la otra. Si nuestras imágenes no están diseñadas de una manera que se vea natural esta transición, el mosaico que resultara de repetir estas imágenes una junto a otra estará lleno de filos y lugares donde podemos claramente ver que algo simplemente “no queda”.  

Como principalmente se utilizan para construir volúmenes más grandes, si no se acoplan las orillas de nuestro mosaico entre si parecerá que está hecho de muchos pequeños bloques (que es exactamente lo que es, pero no lo que queramos que sea aparente).  Para hacer funcionales los mosaicos, es importante que las 4 orillas de la imagen que usemos puedan pegarse a la orilla opuesta de nuestra imagen para que así se pueda repetir y ver natural.

Para este articulo utilizaré un ejemplo de algo que se utiliza un poco más al hacer texturas para programas 3d, pero que opera bajo el mismo principio de tener una imagen repetible. Este trabajará con una fotografía, pero el procedimiento se puede aplicar a cualquier tipo de imagen.

Utilizaremos esta imagen:

Figura 1

Aquí tenemos una fotografía de algunas piedras. Es una imagen en su estado normal, no es tile-eable, refiriéndome a que no podría repetir esta imagen sin que se notara claramente una línea obvia donde no concuerdan las orillas de extremos opuestos (o sea, la de arriba al topar con la de abajo de la siguiente repetición, y vice versa). Lo primero que querríamos hacer es reducir esta fotografía a un área que nos interese repetir, que sea interesante y podamos trabajar con ella.

Figura 2

Utilizamos la herramienta de Crop (el atajo es la tecla C) en Photoshop para seleccionar un área deseada. Los mosaicos comúnmente es mejor trabajarlos como cuadrados, y muchas veces utilizar una resolución de potencia de 2 (2×2,4×4,8×8,16×16,32×32,64×64), simplemente porque facilita la programación y la eficiencia de recursos, y porque nos da un buen estándar de medidas con las cuales  trabajar para hacer que nuestras imágenes concuerden, ocupen un área proporcional de resoluciones comunes de pantalla y faciliten el proceso de integración.

En este ejemplo recorte mi imagen a una de 300×300 pixeles, ya que no la utilizaré en ningún proyecto.

Figura 3

Ahora que tenemos nuestra imagen recortada, vamos a ir a nuestro menú de Filters->Other->Offset. Aquí tendremos 2 campos de texto, que son para desfasar la imagen esa cantidad de pixeles verticalmente y horizontalmente. Queremos poner una cantidad que sea la mitad exacta del tamaño de nuestra imagen, en este caso por ser una imagen de 300×300, será de 150 y 150 este Offset.

Nos aseguramos que este seleccionada la opción de Wrap Around y damos OK, y nuestra imagen terminará similar a lo que vemos arriba. Lo que estamos haciendo es empujando la imagen y repitiéndola de manera que todas las orillas ahora se encuentran en el centro, dejándonos ver cómo interactúan entre sí. Si hubiéramos simplemente repetido la imagen sin haberla tratado, así es como se verían todas las orillas, haciendo bastante ruido visual. Ahora tocará darle algo de limpieza.

Figura 4

Para este proceso escogeremos el Healing Brush Tool, que es el que se ve como una “curita” , y está directamente arriba del pincel normal. Esta herramienta la preparamos haciendo Alt+Click en algún sitio que no sea una orilla de la imagen, y luego haciendo trazos cortos trataremos la orilla. Lo que hará es que analizará pixeles en el área relativa a donde presionamos al seleccionar con Alt+click, y lo utilizará para pintar con texturas, tonos y pixeles que estaban presentes sobre donde lo utilicemos como pincel.

Otra herramienta que podemos utilizar que funciona similar es la de Clone Brush. O, si estamos trabajando con arte más caricaturizado, podemos simplemente usar el pincel normal o las herramientas que hayamos usado

Figura 5

Aquí he dejado una versión bastante sucia de lo que le he modificado con esta herramienta a la imagen. Se ve claramente donde la he manipulado, pero bastante menos que lo que se veía antes. Con algo más de cuidado y trabajo se puede hacer que realmente se pierda donde se juntaba la imagen entre sí, pero para propósito de demostrar el proceso lo he dejado aparente. Algo importante es tratar de mantenernos lo más alejados de las nuevas orillas exteriores de nuestra imagen cuando estemos trabajándolo, para así no tener que repetir el proceso y dar otro offset junto con otra pasada.

Figura 6

Aquí tenemos ahora como se vería nuestra imagen repetida 4×4 veces, así permitiéndonos ver cómo ha afectado el proceso que le dimos. De nuevo, teniendo más cuidado y dándole una pasada más limpia a todo se puede hacer que realmente no tenga orillas, que es lo que importa, para que así repitiendo nuestra imagen incluso siga sin notarse tan claro donde es que se repite.

Ésta solo es una manera de hacer mosaicos, existen muchas más. Realmente no hay una sola manera “correcta” de hacer las cosas, simplemente es de encontrar la forma que más nos sirve a cada quien, y esta es una eficiente que yo he encontrado para tratar con ello.

Link: Introducción al uso de Mosaicos (Niubie)