Sunday, July 21, 2013

Extensiones para Flash - Flash Extensions

Un pequeño resumen de lo que he ido aprendiendo sobre el tema este de extender la API de Flash:
(es un resumen de verdad. Lo iré completando con capturas y más detalles).

Por un lado los paneles.
El primero que hice era un renombrador para la biblioteca. Lo he rehecho para AS3. Funciona bastante bien. Es capaz de renombrar por patrón (arrays del tipo xxxx_n_m, o xxx_carpeta_n), sustituir patrones, añadir sufijos y prefijos, etc, etc.
La idea ahora es crear un panel de biblioteca alternativo, con opciones especificas para animación.
Los paneles los publico directamente en la carpeta de windowSWF. Nunca me puse en serio con el tema de los instaladores.

Otro proyecto, que de momento es un fracaso, es el pincel rasterizado. Un pincel tipo Photoshop (con presión) para abocetar en el propio IDE de flash. Para este proyecto estoy usando la conectividad con las DLL en C para tener acceso a la presión de la tableta directamente a través del sistema (desde flash no se puede que yo sepa).
Primer problemón: conseguir compilar los ejemplos en code-blocks. Esta la superé. Ya sé que puedo bajar el visual express, pero no me apaño.
Segundo compilar en 64 bits para poder usar la DLL en CC. Tambien superado. Esto no fue tan complicado. Baje la versión de 64 bit de Mingw y fue bastante rápido.
Tercer problema, al llamar a la tableta desde wintab me cargo el contexto que usa el propio Flash, así que aunque consiga leer la presión (que no he podido), Flash se queda sin acceso a la tableta luego.
Así que ahora estoy intentando acceder a la tableta a través de Realtime Stylus de Windows. Ya veremos si sale algo o no. Acceder a estas cosas desde una DLL es un rollo porque no sé lo que está fallando, y probar el programa es un dolor (abrir y cerrar Flash cada vez). Además me apaño fatal con las funciones de C que hay que usar para comunicarse con Flash (que no soy programador vaya! :D)

Otra tragedia añadida es que Adobe se ha cargado las funciones de acceso a los bits de los bitmaps de jsfl, Al menos en CS6 y CC. No actualiza los bitmaps o lo hace mal. Esto se carga otras ideas que tenía yo en mente. A ver que pasa. En CS3 sí parece ir bien. Lo he reportado y ya veremos que dicen. La verdad es que creo que nunca ha funcionado como dice el manual. Se alteran los bits de los objetos de la biblioteca, no sólo los de la instancia, pero bueno, eso me da más igual. Lo mismo lo he interpretado erróneamente.

No he conseguido manipular los bits desde la DLL. Pero en CS3 si he podido manipularlos desde el propio script. Al menos salen cosas curiosas. Es bastante lento pero algo es algo. Con un pincel/lápiz no muy grueso, que no obligue a refrescar una región grande, debería funcionar bien.

Con estas funciones estoy generando efectillos curiosos en el propio IDE que se pueden exportar como secuencias de png, sin más post-proceso añadido, ya que esos bitmaps están en la propia biblioteca.

Otro proyecto que usa esto es el warp deformer exportable. Pensado para crear animaciones de deformación en juegos. Se genera un bmp a partir de los manejadores. Los manejadores se dibujan en la capa de herramientas del api y el bitmap sustituye al original para la visualización. A la hora de exportar, el bitmap de visualización se ignora y sólo se pasan los parámetros de deformación para el bitmap original. De momento sólo uso deformaciones lineales. El panel sirve para inicializar la maya de deformación de cada bitmap y dar acceso a los controles para animar posteriormente (también para resetear la maya, copiar y pegar parámetros y en un futuro ajustar parámetro de la maya). Estoy muy contento con el resultado.
En el futuro me gustaría aplicar la maya a composiciones de bitmaps también.

El último proyecto es una ventana dinámica para sustituir instancias. En CC lo han mejorado un poco, pero se echan en falta cosas. A ver como resulta.

Wednesday, June 5, 2013

Daily Sketch Forum primeros de junio

CGTalk Daily Sketch Forum.

Tengo algo en los dientes:
I have something in my teeth:




La chica en la Luna:
The girl on the Moon:


Hacia la luz:
(este no tiene mucho sentido pero me gustó la idea)
Into_the_light:
(this one makes no sense really but I liked the idea)


Alas perdidas:
Lost_Wings:


La linea en la arena:
The Line in the Sand:

Tuesday, March 19, 2013

La guardiana

Un avance de cómo esta quedando esta ilustración. Si no pasa nada estará terminada esta semana o la siguiente, aunque estoy un poco liado la verdad.
A glipse of how this illustration is turning out. It should be finish this week, or the next one, although the truth is I'm a little busy.

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.

Wednesday, March 13, 2013

Más entradas en el Daily Sketch Forum

Últimas entradas en el CGTalk Daily Sketch Forum.
Last entries in CGTalk Daily Sketch Forum.

El lado oscuro de la luna:
The dark side of the moon:
 
 



el punto verde:
the green spot:
 


los 3000: (conmemorando los 3000 posts que llevan en el foro)
the 3000:
 
 

Tuesday, March 12, 2013

Promo Jeffrey Space

Update: Han quitado el video. They have remove the video :(

Os dejo el video promocional de Jeffrey Space: el juego en el que he estado trabajando con el equipo de Lab-cave. En breve publicaré una entrada con un resumen de lo que ha sido el projecto desde el punto de vista del desarrollo visual. (ver aquí)
El montaje en After es mio así que si podeis me decís que os parece (las tipo de las cartelas me lo dieron eso sí). Espero que lo disfrutéis.
Here you have the promotional video of Jeffrey Space: the game I've been working on along with the people of Lab Cave. I'll publish soon a brief report of how this project has been from the visual development point of view. (see here)
The editting in After is mine, so I hope you can leave a comment about that (they gave me the typography style for the main texts). I hope you enjoy.

 

Friday, March 8, 2013

CGTalk daily sketch forum

He estado trasteando con el CGTalk Daily Sketch Forum. Se trata de hacer un boceto en el tiempo límite dado, basado en el título del post. Aquí lo que he ido subiendo. Me lo he pasado bien. Hay muy buen rollete. Todos los retos rondaban la media hora. Con algunos tardé un poco más.
I've been playing around at the CGTalk Daily Sketch Forum. The deal is to draw a sketch within de given time based on topic's title. Here what I posted so far. It's been fun and everybody is cool. All challenges were about half an hour. Some of them took a little more than that.

el líder ha muerto:
leader is dead:

 
 
 

sombra blanca:
white shadow:


dios de la guerra
war god:

camino a la perdición:
road to perdition:
espada en la piedra:
sword in the stone:

Wednesday, March 6, 2013

currante P103834

 
Sketchbook Pro y Photoshop en mi cintiq-12.
Ser gris es una elección. El título intenta reflejar la clase de curro de este buen señor. El cuadro muestra como se las apaña para no ser anulado.
Es un trabajo personal.
Los ojos son demasiado brillantes a propósito: intento mostrar su fuerza de carácter: no es una persona gris por dentro ni por fuera.
El encuadre un poco alto para centrar la gorra y los ojos más que la cara.
Nada muy ambicioso. Intento mejorar la velocidad, sin irme a los detalles demasiado pronto (unas 6-7 horas).
He gugleado las chapas para buscar referencias, para el color mayormente.
gracias,
Jorge
Sketchbook Pro & Photoshop on my cintiq-12.
Being grey is a choice. The title intends to reflect the kind of job this person has. The portrait shows how he manages to avoid being override.
This is personal work.

Too intense eyes color on purpose: trying to convey the fact that the character is not a grey person inside, neither outside.
The frame is high, to keep attention on the eyes-hat area, instead of the face.
It isn't an ambitious work. I'm trying to get more speed, at least in the previous steps, avoiding going into details too early. it's been like 6-7 hours.
I've used googled badges for reference (color mostly).
thanks,
Jorge


Sunday, March 3, 2013

Guerrera y perro cerdoso

Parejita para el soldado medieval. Todo en sketchbook, salvo una reparación con liquify en photoshop en la zona del cinturón.
Partner for the illustration with the knight riding the wooden horse. Done in sketchbook, except for a fix using liquify around the belt area.
Pongo una de en proceso también.
Some work in progress too.
 

Friday, March 1, 2013

animation reels - traditional

De momento la reel traditional solo tiene fragmentos de Titeuf. Es el trabajo más relevante aparte de Tante Hilda, y de esta última aún no puedo poner nada. El que está en color lo he sacado del trailer oficial.
Right now the traditional animation reel contains only fragments from Titeuf. It's the most relevant work, apart from Aunt Hilda, and from this one I can't post yet. The colored one belongs to the official trailer.


Reel Traditional Animation from Jorge Pozo on Vimeo.

animation reels - digital

Voy a empezar a usar el blog como portfolio, así que además de subir cosas que tengo en la web o en el portafolio normal, incluyo las reels de animación.
I'm about to start using the blog as a portfolio, so in addition to uploading the stuff I have in my web or my current portfolio, I'm posting my animation reels.

La de Hilda tendrá que esperar hasta el estreno claro.
Of course, Hilda's reel will have to wait until the movie is released.

Esta es la reel de animación digital: (créditos debajo)
This is the digital animation reel: (breakdown below)


jorge pozo demo reel flash/digital animation from Jorge Pozo on Vimeo.

créditos:
Flash reel (índice en azul arriba a la derecha)
1-Piloto serie 'Las Cuevas' para 'Ink Apache'. Animación tradicional rough en flash. Layout, diseños, asistencia y color a cargo de Ink A.
2-'Animaliens' de 'Ink Apache'. Animación flash. Diseño, layout y postproducción a cargo de Ink A.
3-Entrada para canal 'Boing' con 'Ink Apache'. Animación tradicional en flash y referencia para el 3D (esfera). 3D y postpro de Ink A.
4-Cortinilla 'Canal 10' (invierno y primavera). Al fondo se ven animaciones de Ink A. también). Flash por símbolos. Setup y animación en flash.
5-Chica (en color) saltando como loca: para anuncio de TV (Imagina Ser - ver anuncio de la pagina de 'Ink Apache'). Fueron varias animaciones, algunas, como esta, terminadas del todo y otras en rough. Flash.
6-Fragmentillos de película de 7 minutos para conmemoracion del año Xacobeo para 'Bren Entertainment'. Animación y BG es de 'Totemo'. Me encargué de coordinar la animación, animar algún plano, montarlo y añadir los efectos de postpro (el rayo no salía, lo he puesto para suavizar la transición).
7-La animación de la flor para Ink Apache. Publicidad.
8-Los animales en círculos rojos y el niño jugando al futbol pertenecen a la serie de Disney "JJ quiere..." a través de Ink Apache. Serie de animación limitada flash para niños en la que he animado varios episodios (unos 5 minutos por episodio).
9-La explosión y los carbonillas son un fragmento de un anuncio del canal 'Calle 13'. ('Los treches presentan...'). El diseño es de Ink Apache.

Breakdown:
Flash reel (blue index up right)
1-Tv Series Pilot 'Las Cuevas' by 'Ink Apache'. Traditional animation rough on flash. Layout, designs, cleanup & color by Ink A.
2-'Animaliens' by 'Ink Apache'. Flash animation flash. Design, layout & postproduction by Ink A.
3-Animation for 'Boing Channel' with 'Ink Apache Studio'. Traditional animation on Flash.
4-Commertial for 'Canal 10' (winter and summer). At the backgound you can see animations from Ink too. Symbols Flash. Design by Ink A.
5-Jumping girl (in color) for TV commercial (Imagina Ser - full video at Ink Apache website). I animated several characters and cleaned some of them (this included). Flash.
6-Little fragments from the 7 minutes animation conmemoring Xacobeo Year for Bren Entertainment. Animación & BG by 'Totemo'. I was in charge of coordinate animation (2 animators, 1 assistant, 1 BG artist), compositing and adding effects (AE) (lighing bolt wasn't part of the original animation, only smoothing the transition)
7-Flower animation for TV commercial for 'Ink Apache' (flash)
8-Animals in red circles and kid playing soccer belong to the Disney's tv show "JJ quiere..." (Ink Apache). Flash limited animation 5 min. length series for children. I've animated several episodes.
9-Explosion and funny carbonized people part of tv promotional series of "Calle 13" channel ('Los treches presentan...'). Design by Ink A.

Sunday, February 24, 2013

flash to spriter scml jsfl script

Trabajando con Jeff, me he encontrado con el problema de tener que pasar unas animaciones desarrolladas en flash a Spriter (Brashmonkey) y como el interface de este programilla aún necesita un poco de rodaje, me salía más a cuenta intentar convertir de algún modo lo que ya tenía hecho.
Working at Jeff, I had to deal with the problem of converting some flash animations to Spriter (Brashmonkey). Being the Spriter's interface still in development, I prefered converting them through scripting.

Seguro que ya lo ha hecho alguién por ahí, pero no he podido encontrarlo, y tampoco es demasiado complicado y me ayuda a repasar mi jsfl.
Maybe this is already done (possibly), but I couldn't find it. Anyway it's not that complicated and it helped me practising my jsfl scripting.

En caso de que alguién tenga el mismo problema espero que le sea útil. En mi caso, animando un bicho gordo y feo, había partes del cuerpo con reuses desincronizados y la verdad, rehacerlos a mano me parecía un dolor.
If you have the same problem I hope you'll find this useful. In my case, an ugly and fat bug animation, there were several reuses (overlapped) and I didn't have the heart to redo all in Spriter.

Dejo aquí un link al código y un ejemplo (CS5). Hay que colocar los frames y las capas de un modo concreto y abrir el script(desde el cuadro de dialogo para editarlo, luego botón derecho->run script o doble click para ejecutarlo sin más) y se genera un scml junto al fla de turno.
Click here to get the script and one sample (CS5). Layers and keys must be arranged and named following the example. Then open the script (through open dialog to edit it and then RMB->run script or double click to execute it straight away) and the scml file will be created next to the fla file.