PixelPerfect en Unity 2D

Si os poneis manos a la obra en haver un proyecto con estética de los años 80 del siglo pasado lo mas probable es que opteis por una de las 2 opciones, o modificais la escala de vuestros assets gráficos con un editor externo o trabajais con gráficos de la época (16x16 pixeles o 32 x 32 pixeles) y utilzais el propio Unity para escalar el gráfico al tamaño deseado.


Para ello es necesario preparar los gráficos para que no os queden distosionados al aplicar el algoritmo de antialiasing al escalar el gráfico desde su tamaño original (16x16 pixeles en este ejemplo) a la escala deseada en nuestro juego.


Cuando importamos una imagen Unity configura de manera predeterminada algunos filtros para suavizarla cuando la muestra en la pantalla. Esta puede ser una buena idea para otro tipo de juegos, pero no para los PixelArt.

Al importar los graficos del juego debemos configurar Unity para que el escalado será correcto debemos modificar el filter mode a Point (no filter).


y seguidamente el modo de compresion a None.


Tambien es necesario modificar el valor del Pixel per Unit (PPU). Puede encontrar esta configuración también en Sprite Mode del Sprite. Es 100 por defecto. Cámbielo a su tamaño de mosaico en píxeles (por ejemplo, en nuestro caso tenemos mosaicos de 16x16).

Ahora que hemos configurado nuestra PPU, necesitamos decirle a la cámara qué tan grande queremos que se base en esa PPU para que un píxel en pantalla corresponda con un píxel en nuestro juego.

Para obtener ese tamaño solo necesitamos hacer una fórmula simple:

Tamaño ortográfico de la cámara = resolución vertical / PPU / 2
Una vez que tenga ese tamaño, haga clic en el objeto Cámara principal y coloque ese valor en la configuración Tamaño:


En nuestro caso tenemos 180px como resolución vertical y 16px PPU así que:

180/16/2 = 5.625

Es importante mencionar que en nuestro caso renderizamos todo en una resolución pequeña y luego escalamos. No coloque la resolución vertical deseada (en nuestro caso 720p) sino la que está renderizando.

Finalmente para garantizar que el movimiento pixelado de Sprites sea coherente entre sí, configure Spans settings para establecer el ajuste adecuado para el proyecto. 

Abra la Configuración de ajuste (menú: Edición> Snap Settings...)
Para Mover X / Y / Z, establezca sus valores en 1 / PPU (en nuestro ejemplo 1/16 = 0.0625)
 

La configuración de ajuste no se aplica de forma retroactiva. Si hay GameObjects preexistentes en su escena, seleccione cada uno de ellos y haga clic en Ajustar todos los ejes para aplicar la configuración del Snap.

El mundo a través de 1bit

Una de las cosas que admiro es la capacidad que tienen algunos diseñadores y artistas para crear un mundo con personalidad a través de imagenes a 1bit.


Unos de los ejemplos más aclamados son juegos como Gato Roboto o 1-Bit Rogue. Juegos donde los gráficos a 1bit son parte de la identidad del propio diseño del juego.


Para todos aquellos que os gustaria provar de hacer un juego con este estilo tan especial me gustaria compartir los recursos que he encontrado que podrian ser de gran utilidad. Para ello la mejor página de recursos es Itch.io.

Aquí podeis ver un conjunto de recursos de 1bit que pueden ser interesantes:

1 Bit-Game Assets Pack



CanariPack 1BIT TopDown

 


CanariPack 1BIT TopDown1700+ 1Bit Game Assets & PixaTool


75 Free 48x48 1-Bit Fantasy Sprites


16x16 1-bit RPG Forest Tile Set
 

1-Bit RPG Tileset 32x32 Pixels



1-Bit Icons

1 bit Sci Fi Pixel Art Tileset (16x16)


16x16 1-bit Church Interior Tile Set

Gráficos en 8bits para juegos modernos en Photoshop

Uno de los proyectos que tengo en mente es hacer algun juego con tecnologia actual pero con un aspecto de 8bits. Uno de los aspectos que más se debe que cuidar son los gráficos ya que al trabajar con imagenes pixeladas podemos tener problemas cuando las manipulamos.


Despues de analizar algunos juegos de 8bits podemos observar que basicamente los gráficos utilizados tienen dimensiones pequeñas segun los estandares actuales. Durante esa época se utilizavan sprites base de 16x16 pixeles y 32x32 pixeles añadiendo varios para hacer imagenes más grandes. 
Yo personalmete trabajo con Adobe Photoshop y para cambiar las escalas de los sprites. Debemos tener en cuenta algunos trucos antes de utilizarlos en Unity como assets de un juego. Lo mas habitual para trabajar con Sprites 2D en un modo actual es o simlemente utilizar los sprites en el tamaño original y dejar que Unity se encargue del escalado utilzando el sistema de Pixel Perfect del motor a partir de la versión 2018.2.


O rescalar los gráficos manualmente utilizando un programa de edición de imagenes. Si necesitais hacer esto debeis optar por una de las dos  opciones que Adobe Photoshop nos ofrece para trabajar manteniendo la cualidad de los graficos en el escalado.

Con las parametros originales de Photoshop lo mas probable sea que al escalar los graficios nos pase una cosa como esta:


Para solucionarlo debemos ir a las Edicion > Preferencias > General y modificar las opciones de escalado a Nearest Neighbor (preserve hard edges) y a partir de aquí escalar las imagenes normalmente.


El segundo metodo consiste en tener en cuenta las propiedades de escalado cuando modificamos el tamaño de un sprite. Ahora, en Imagen > Tamaño de imagen puede cambiar el tamaño de la imagen. Esta opción también es accesible presionando Alt + Ctrl + I en el teclado.

Una vez que se abre la ventana Tamaño de imagen, puede cambiar el ancho y la altura del archivo. Asegúrese de que la opción Restringir proporciones esté marcada para que Photoshop pueda llenar automáticamente el ancho o la altura apropiados de la imagen cuando complete la otra información. Esto es opcional Sin embargo, se recomienda esta acción para que la imagen se escale correctamente.


Finalmente haga clic en el menú desplegable en la parte inferior de la ventana Tamaño de imagen y cambie la opción a Nearest Neighbor (preserve hard edges)

Con estas dos métodos prodrá obtener images a cualquier tamaño manteniendo el efecto de pixel perfect de sus imagenes.


PixelPerfect en Unity 2D

Si os poneis manos a la obra en haver un proyecto con estética de los años 80 del siglo pasado lo mas probable es que opteis por una de las...