Tuesday, March 19, 2013

Trabajando en Jeffrey Space

Un pequeño repaso a cómo ha sido el trabajo con el equipo de Lab-Cave.
A small review of how it's been working with Lab-Cave's team like.

Todo empezó con esta prueba: Una simulación de cómo podría ser el juego. Buscaban profundidad, un estilo desenfadado y cartoon.

Everything started with this test: a simulation of how the game could be. They were looking for depth and funny cartoon style.
 
Junto a la prueba de animación envié un mini-dossier con sugerencias para el juego y propuestas de personajes.
Along with the animation test, I sent a short document with ideas and suggestions about the game and the characters.

En un comienzo Jeffrey era mucho más rana, lógico también porque se comportaba más como una, cazando con la lengua y tal. Os dejo también ideas que sugerí para dinamizar al personaje que finalmente no cuajaron:
At the beginning Jeffrey was much like an ordinary frog. It was logic since it behaved like one: catching bugs with its tongue and that sort of things. I also attach some ideas I tried back then to dynamize the character.

- la prueba de gordura dinámica (es interactiva), dejando que parte de la apariencia fuese definida dinámicamente durante el juego dependiendo de lo que comiese Jeffrey, y
-Dynamic fatness test (it's interactive), leaving some of the appearance defined in real time . depending on what Jeffrey ate, and
  
 

- la prueba para lengua (también interactiva), dibujada en tiempo real, para paliar la falta de continuidad que conlleva el sistema de poses por franjas de ángulos.
-Tongue test: realtime drawn (also interactive), to palliate the stepped animation using a limited amount of poses/angles.





Esa idea de rana-rana se abandonó en los primeros bocetos para buscar algo más humanizado y personalizable de formas más radicales y atractivas.
This ordinary frog was abandoned in the first sketches to find something more humanized and customizable in more attractive and radical ways.
Así llegamos a estos primeros Jeffreys.
And so, we found these early Jeffreys.

Jorge Pozo · Copyright Lab-Cave · Jeffrey Space

Como todavía estaba yéndome demasiado a lo cartoon, le dimos una vuelta más y dimos con el Jeffrey que nos acompañaría el resto del camino, aunque hubiese que cambiarle de traje.
It was still too much cartoon, so we went further until we found the true Jeffrey, who was with us the rest of the way, although his suit was changed.

Jorge Pozo · Copyright Lab-Cave · Jeffrey Space
 
Siguió a Jeffrey el diseño de los bichos, los trajes y armas, y las temáticas de fondo. Han hecho falta muchos diseños para dar con los apropiados, a nivel estético y de jugabilidad.
Following Jeffrey's design came the design of the bugs, suits and weapons, and background themes. It took us many sketches to find the appropriate level of aesthetic and gameplay.
 
 
Jorge Pozo · Copyright Lab-Cave · Jeffrey Space
Jorge Pozo · Copyright Lab-Cave · Jeffrey Space
 
 
Jorge Pozo · Copyright Lab-Cave · Jeffrey Space

Muchos bichos no pasaron la prueba
Many bugs didn't pass the trial
 
Jorge Pozo · Copyright Lab-Cave · Jeffrey SpaceJorge Pozo · Copyright Lab-Cave · Jeffrey Space
 
Primeros test de animación. El sistema consistía en varias poses, a elegir dependiendo del ángulo de disparo con poses de transición para suavizarlo. Resultó demasiado pesado para sacarlo en bitmaps, y se recortó drásticamente.
First animation tests. Several key poses depending of the fire's angle plus several transitions to smooth everything. All this was too much expensive in memory terms, so eventually was drastically simplified.
Jorge Pozo · Copyright Lab-Cave · Jeffrey Space
 
 
Y para terminar algunos elementos del juego en detalle y screenshots. La primera es la ilustración principal del juego.
And finally some screenshots and detailed assets. The first one is the main cover illustration:

 
Jorge Pozo · Copyright Lab-Cave · Jeffrey SpaceJorge Pozo · Copyright Lab-Cave · Jeffrey Space
Jorge Pozo · Copyright Lab-Cave · Jeffrey SpaceJorge Pozo · Copyright Lab-Cave · Jeffrey Space
 

Spriter
Los jefes grandotes necesitaron una técnica distinta. Están compuestos de bitmap enormes y no se les puede animar pose a pose. Lab-cave decidió dar una oportunidad a Spriter. Encontramos el interfaz del programa difícil de usar (todavía está en desarrollo). Uno de los jefes lo saque en Spriter, pero al final para el otro escribí un script para exportar directamente las animaciones de flash a Spriter (que usa formato XML). El segundo jefe ha sido más rápido y sencillo de preparar. Usando la interfaz de flash para generar los bitmap y la animación. Pulsa aquí para ir al post donde hablo de este script.
Big bosses needed a different technique. They have huge bitmaps and can't be animated frame by frame. Lab-cave decided to give Spriter a try. We found the interface somehow difficult to use (the software is still in development). One of the bosses I did it inside Spriter but eventually I write some jsfl code to export the animations directly from within flash into Spriter (which use xml format to store all the data). The second boss was incredibly more easy to prepare. I could generate the bitmaps and the animation much faster using flash straight forward. Click here to go to the post where I talk about this.

Visor/exportador de xml para fondos
BG xml viewer/exporter
Los fondos se almacenaron en formato XML. Me las apañé para parsear el documento en flash, crear un previo para comprobar cómo se vería más tarde en el juego y finalmente para crear el xml partiendo del montaje flash. El suguiente paso sería conseguir que el script generase también los bitmaps a partir de los diseños vectoriales directamente. Sería lo más sencillo y rápido y también lo más fácilmente actualizable.
Backgrounds were stored in xml format. I managed to parse this document into flash to check how it would be watched later ingame and then to export the final document directly from within flash ide.
Next step would be working with vectorial and add the exporting bitmap task to the script. In this way I can use vector design just like final assets, making everything easier, faster and easy to update and mantain.

Automatización de la exportación de bitmaps usando jsfl y c++.
Bitmap export automation using jsfl y c++.
 
Trabajar con flash me permite sacar provecho del lenguaje de programación de la interfaz, el jsfl (flash javascript). Con él puedo abrir automáticamente todos y cada uno de los archivos fuente del proyecto y exportar los frames con el nombre correcto.
Working with flash allow me to take advantage of the jsfl (the language used to program the flash UI). Using its capabilities I can open automatically every source fla file in the project and export the frames at different resolutions using the appropiate names.
Pero así y todo no ha sido suficiente. El punto de registro para animar a Jeffrey se situó lo suficientemente a un lado para dejar sitio a Jeffrey para hacer sus movimientos sin salirse de la zona de exportación. Pero el punto de registro final tenía que estar entre los pies de Jeffrey, centrado en el bitmap (todos los bitmaps se alinean al centro-abajo). Una imágen para ilustrar el problema.
But that wasn't enough. The registration point for all the animations was placed far enough to make room for Jeffrey to do all the movements without leaving the export area. But the final registration point had to be centered in Jeffrey (between his feet) and each bitmap ). All images are aligned bottom-centered. An small picture to illustrate the problem.





Para resolver el asunto escribí un programilla en C++ usando las librerias sfml para manipular las imágenes a nivel pixel. El programa detecta la imágen mínima (azul) y le añade espacio vacio a un lado hasta conseguir que el centro quede entre los pies, en el lugar exacto. Todas las imágenes se recortan la misma cantidad por debajo (el máximo se calcula en una primera ronda explorando todos los frames y viendo cuánto es lo máximo que se puede cortar sin cargarte nada).
To solve this I wrote a small program in C++ using the sfml libraries to manipulate the images at pixel level. The program detects the minimum size and then add transparent pixels at one side to leave the center at the right place between Jeffrey's feet. The bottom side was cropped the same amount on every image looking for the maximum, exploring all the images in a first round.

Este programa escribía los ficheros jsfl también, los ejecutaba y esperaba a que las imágenes se terminaran de exportar, antes de hacer todo el proceso de centrado/recorte.
This program write the jsfl files, then execute them and wait for the images to be exported, before doing these cut/center tasks.
 
Podeis ver el trailer oficial en este post:
The official trailer is here, in another post:

Muchas gracias al equipo de Lab-Cave, ha sido un placer trabajar con ellos. Espero que podamos repetir pronto.
Thank you very much to the Lab-Cave team. It's been great working together. I hope we will repeat the experience soon.