Comunidad orientada al desarrollo de videojuegos

Creación y animación en Flash de personajes para Unity (1 de 3)

Flash y Unity

Cuando en Whootgames comenzamos el desarrollo de Disco Feeever nos encontramos con  un pequeño dilema: querer usar Adobe Flash para hacer las animaciones, y además poder usarlas en Unity, que no cuenta con soporte oficial para ello. Además, queríamos comprobar si nuestro animador podría librar de trabajo al programador usando directamente algunas características básicas de ActionScript para controlar el flujo de animación con play() y stop(), y ya, en la cúspide del pedir por pedir, que pudiesen mandar callbacks en determinados momentos.

Sabemos que existen varias maneras de animar 2D (con sistemas como Spriter, Spine o directamente en Unity), pero queríamos probar esta variante.

No tardamos mucho en encontrar dos posibles alternativas. Por un lado Uniswf de Flaming Pumpkin por un coste de $175, y una opción gratuita y open source llamada LWF (Light Weight Swf), de los japoneses Gree. Lo tuvimos claro desde el principio, ya que además del coste, colaborar en un proyecto open source es algo que siempre nos parece interesante.

En esta serie de tres posts os contaremos nuestras aventuras y desventuras con este sistema, sus ventajas y desventajas, con qué alucinamos y con qué nos tiramos de los pelos, empezando en esta primera parte por la creación de uno de los personajes a nivel gráfico, que en una segunda parte animaremos en Flash, y en una tercera integraremos en nuestro juego haciendo la conversión swf > lwf > Unity, explicando cómo instalar todo lo necesario para convertir e insertar los swf en Unity, que sin duda será la parte que más os interesará a los desarrolladores.

Empecemos por el principio 🙂

Creación de los personajes

En Disco Feeever todo es de coña, todo estereotipos, todo exageración (puedes ver un teaser aquí), y nuestro artista de concept nos preparó pequeñas joyas de personajes que nos podemos encontrar en fiestas, discotecas y otros saraos. Algunos ejemplos 🙂

Concepts iniciales personajes a color

En nuestro caso usamos Adobe Illustrator y Photoshop para crear los gráficos, pero valdría cualquier programa vectorial o fotográfico, dado que la salida final serán varios pngs. Y es  que lwf solo admite pngs sin compresión, no vectores, ni jpgs. Nuestro método de trabajo sería el siguiente: Concepts en Photoshop > Arte final en Illustrator > Retoques finales y salida a png en Photoshop.

Dibujar todas las partes por separado

La ventaja principal de trabajar con un programa vectorial como Illustrator es que creamos trozos, o formas, muy rápido, pudiendo retocarlas también de manera muy sencilla. Primero hacemos un outline  por encima del concept, sin añadir color, donde definimos las formas básicas. La elección de estas formas ya está determinada por la zonas que serán móviles. Así, ‘mentalmente’ primero, y con líneas después, preparamos los objetos como brazos, piernas, torso y cabeza. Si lo hacemos primero con líneas sin color es porque podemos trabajar más cómodamente encima del concept sin taparlo en ningún momento.

Aquí lo mostramos separado (las líneas se dibujan encima del concept) para que se vea más claramente cuál es el resultado de este primer paso.

Heavy en lineas

Colorear las formas

A estas líneas les aplicamos colores, un procedimiento que es muy rápido. Aquí usamos las opciones de colores globales de Illustrator para facilitarnos la tarea en el caso de que tengamos que cambiar un color. Con dos clicks podemos, por ejemplo, cambiar la tonalidad de todas las partes de piel de nuestro Heavy.

A continuación, ya con el esquema de color adecuado, procedemos a darle más vidilla al personaje, con sombras, iluminaciones y nuevos detalles, como costuras, el relieve de la muñequera o la calavera del pañuelo.

Heavy coloreado

Separamos en objetos que vayamos a animar después

Todos estos objetos los agruparemos para poder trabajar con ellos de manera independiente cuando animemos. Esta separación por partes, aunque en general es parecida, hay que decidirla personaje a personaje. en el caso del Heavy queremos que pueda mover los brazos, las piernas, torso, cabeza y que se le mueva el pelo, así que la partición quedaría algo así:

Heavy a trocitos

El siguiente paso es bastante sencillo. Por el nunca suficientemente valorado sistema de copiar y pegar, vamos copiando cada grupo (mano, brazo, antebrazo…) y pegándolos en archivos independientes de Photoshop, retocarlos si hiciese falta y guardarlos en png, asegurándonos de guardarlos con fondo transparente. Debería quedar algo así

Pelazo con transparencia

Y con estos archivos… pues tocaría ya meterlos en flash, tema que tocaremos en el próximo capítulo, que esperamos tener listo en breve 🙂

, , , , ,

6 thoughts on “Creación y animación en Flash de personajes para Unity (1 de 3)

  • también se puede usar el script por defecto de photoshop para exportar las capas automáticamente, pero cada parte osea brazo, pelo tiene que estar en una sola capa, y acomodar la opción de cortado, para que no salgan del tamaño de la imagen completa.

    • Jonathan Rivas says:

      Sería otra opción, exactamente, aunque se hace más rápido por el sistema de copiar/pegar, sobretodo porque el archivo ya tendría exactamente las medidas del objeto (brazo, ojo…). Es un buen sistema si se van a hacer variaciones a los sprites, como por ejemplo cambiar todo el personaje de tonalidad.

      Otro método también podría ser colocar cada trozo en un Artboard de Illustrator (una ‘página’) dentro de un mismo documento y luego exportarlos todos a la vez.

  • TitoSimon says:

    Buen tutoreportaje de las opciones 2D, seguiré atento. Lo que veo contraproducente es trabajar en vectores para terminar en un .png y montarlo en flash… pero si es la única forma de hacerlo así se hará.

    Otro detalle que se debería tener en cuenta a la hora de guardarlos en .png, esto recomiendo hacerlo desde la opción ‘guardar para web’ de photoshop donde mágicamente nos reduce bastante el peso de la imagen y te permite tocar valores para el png antes de exportarlo.

  • Jonathan RIvas says:

    La razón por la que habitualmente trabajo en vectores (para este tipo de proyectos en concreto) es porque puedo reutilizar muchos assets para distintas resoluciones. Pero hacerlo directamente en .png es otra opción perfectamente válida.
    La razón por la que pasarlo a flash en png en vez de directamente vectorial es por LWF, el sistema que usamos para animar, y que comentaré en profundidad en los siguientes ‘episodios’ del artículo, que llevo algo retrasado porque nos adelantaron salvajemente unas fechas de entrega y estoy a fuego :_D

  • Cristhian felipe quintana aros says:

    genial tu tutorial amigo… eh estado buscando como hacer los personajes de mi futuro vídeo juego con el cual he tenido varias dificultades ya que soy nuevo en esto

  • moonblue says:

    Es muy interesante!!! Pero no puedo localizar las siguientes 2 partes ¿están publicadas? Sería genial poder continuar con el proceso!! Muchas gracias!

Leave a Reply

%d bloggers like this: