Reescalar tus sprites sin perder el aspect ratio (Tutorial)

Cuando estamos haciendo un videojuego debemos intentar optimizar y reutilizar recursos lo máximo posible. Una de los puntos a tener en cuenta es con los enemigos y es que simplemente cambiando de color a un sprite y sus atributos, tendremos a un nuevo enemigo listo para usar y de forma muy barata.

Si además queremos aprovechar ese sprite como un boss, podemos simplemente hacerlo más grande pero ojo, queremos dejar de tener en cuenta el aspect ratio?

En este tutorial, os mostraré como reescalar sprites gracias a Pixel Punch, un programita muy útil que seguro que os da unas cuantas ideas.

Si no estáis entendiendo exactamente a lo que me estoy refiriendo, no hay problema, acompañadme tras el salto y os explico junto a un puñado de imágenes los paso a seguir y sus utilidades.




Introducción

Antes de empezar os quiero explicar los usos de este tutorial y para ello la manera más sencilla que se me ocurre es con algún ejemplo. En este caso el primer juego que se me viene a la mente es Rogue Legacy, un fantástico juego de dificultad endiablada y aspecto adorable.

Uno de los enemigos del juego es el típico esqueleto. Os lo muestro:

Dejando de lado la horrorosa linea exterior negra que es más delgada en proporción a la resolución del sprite (evitad hacer eso), hasta aquí todo bien. Un enemigo a la misma escala que los demás elementos del juego. De hecho mide lo mismo o un poco menos que el pj al que controlamos.

Pero una de las cosas que utiliza Rogue Legacy para tener una gran variedad de enemigos es lo que comentaba al principio del post, cambiar colores y tamaños de un mismo enemigo para tener una variedad significativa y con bajo coste de producción.

Así por ejemplo, podemos encontrarnos con una pantalla como la siguiente:

No nos fijemos en el personaje principal porque está deformado (En Rogue Legacy cada vez que empezamos una partida lo hacemos con un personaje creado al azar con extraños efectos). Vemos a dos esqueletos como el de más arriba pero de otro color y significativamente más grandes. Pero si nos fijamos en el suelo por ejemplo, vemos que la escala es muy distinta. Un pixel del esqueleto son como 16 de los usados en el escenario.

Los esqueletos del ejemplo han sido ampliados sin tener en cuenta el aspect ratio del resto del juego. Están a a otra escala y aunque en este caso en particular no me molesta demasiado, no suele ser una opción demasiado atractiva.

Con este tutorial os voy a mostrar una forma de hacer que ese enemigo pueda conservar el mismo tamaño de píxeles con un esfuerzo relativamente bajo.

Creando un sprite

Como una imagen vale más que mil palabras vamos a explicarlo con un ejemplo real. Vamos a suponer que estamos haciendo un juego y vamos a crear a un enemigo. Por ejemplo, se me ha ocurrido que sea un ogro barrigón con un garrote.

He utilizado pocos colores (seis) porque me ha dado por ahí, por darle un toque más retro si cabe,  pero sirve perfectamente como ejemplo.

Supongamos que no queremos alargar la producción demasiado así que con 10 enemigos distintos ya tendríamos suficientes pero claro, vamos a tener que rizar el rizo para que nuestro juego no se haga demasiado repetitivo a primeras de cambio. Para ello podemos usar el recurso de seguir un esquema de colores para que el jugador aprenda a reconocer los distintos niveles de dureza de cada enemigo.

Al usar tan pocos colores se me ocurre cambiar el sprite completo pero si por ejemplo, nuestro ogro no tuviera restricción de colores, bastaría con cambiar el tono del garrote y del cinturón, por ejemplo.

Pero claro, si queremos que uno de estos ogros pegue significativamente más fuerte, lo mismo un simple cambio de color no será suficiente y necesitamos que sea lo suficientemente vistoso para que el jugador reconozca el peligro de forma inmediata.

Ahora es cuando vamos a reescalar los sprites.


Reescalar sprites sin conservar el aspect ratio


La forma más sencilla, lo que nos viene a la cabeza es no rehacer al enemigo por completo. Simplemente ampliarlo por el tamaño que necesitemos (x2 x3 x4...)

Se nos quedaría algo así.

Si ampliamos la imagen y comparamos el original con el x4, nos encontramos con que por cada pixel original se han creado 16 en un bloque de 4x4. El pixel morado es el tamaño mínimo en la siguiente imagen.

Si lo ponemos en contexto nos encontramos con que las resoluciones no coinciden y eso afecta al aspecto general a no ser que esa sea nuestra intención.

Haciendo un rápido mockup podemos ver el efecto con una versión del enemigo x2.

Reescalar conservando el apect ratio

La idea es escalar al enemigo conservando la proporción de los píxeles y tenemos dos opciones, o repintar encima de la previa versión ampliada o pasar nuestro sprite original por un pequeño programa llamado Pixel Punch.

Con este programa podremos modificar el tamaño del sprite pero respetando el aspect ratio pasando por distintas opciones. Simplemente arrastramos nuestra imagen en el programa y listo.

Al pasarlo por el programa sacaremos un resultado parecido al que os muestro en la comparación.

Como veis en la fila de arriba, los sprites son de distintos tamaños pero con la relación de pixels 1:1.

El resultado es muy aproximado aunque seguro que vamos a querer darle algunos retoques pero no es, ni mucho menos, tanto trabajo como se intuía antes de empezar.

Tras cuatro retoques, podemos darle algo más de detalle o si queremos incluso añadirle algún elemento extra ya que estamos como un casco con cuernos, una tira de cuero cruzando su torso o un pollo muerto colgando de su puño. A gusto del artista y dependiendo de lo mucho que os queráis liar y de lo que queráis diferenciarlo del resto si por ejemplo, lo estamos convirtiendo en un mini boss.

En este caso me limitaré a darle un poco más de detalle.

Si volvemos al ejemplo del videojuego, veremos que respetar las escalas siempre es una opción que le aporta calidad al título. Este es un ejemplo gráfico muy simplista pero creo que es suficiente para haceros una idea.

Conclusión

Profesionales como Alonso Martin, creador de Hearth Forth Alicia (si no lo conocéis corred a echarle un vistazo), utilizan este programa que, como él dice, es un "huge time saver". En su caso, después de multiplicar el sprite con el programa, lo vuelve a reducir a la mitad para que los algoritmos del mismo no tengan que "inventarse" tantos píxeles.

No hay una manera mejor o peor de hacer las cosas y es que hay que valorar lo que queremos, el tiempo del que disponemos y hacer un balance para encontrar el equilibrio.

Ahora que se lleva el pixel gordote, lo mismo el reescalado agresivo no es un problema e incluso nos sirve como excusa artística. De hecho me remito una vez más a Rogue Legacy, un juego de éxito que usa el reescalado en pos de una mayor variedad de enemigos de forma rápida y sencilla. Incluso usa un outline de color negro horrible, de un tamaño menor al de los píxeles que conforman los sprites pero aún y asi, en este caso funciona.

Os invito a hacer vuestras pruebas, jugar con Pixel Punch, dejarle unos pavos si os gusta lo suficiente (el programa es gratuíto) y más adelante hablaremos sobre la rotación de sprites, un tema complicado para el que no quiere salirse del pixelart más clásico.

A dibujar!




Reescala tus sprites con | Pixel Punch