ExeBlog, desarrollo de videojuegos y más

Blog de Exelweiss dedicado al desarrollo de videojuegos, industria del videojuego, advergaming, juegos online, etc

Artículos por tema: Arte y 3D

Normal Mapping: errores comunes

Por Daniel G. Blázquez
19 agosto 2009

Normal Mapping 101 – Common Misconceptions [PDF, 672 KB] es un breve documento creado por Nicholas Etheridge sobre los mitos y problemas frecuentes que se encuentran los grafistas al utilizar normal mapping.

Os dejo un pequeño resumen. Para más información echad un vistazo al PDF.

  1. No es necesario unificar todo el modelo en un sólo grupo de suavizado, y en algunos casos tampoco es deseable.
  2. Es posible reflejar (mirroring o fliping) una malla con normal mapping
  3. No es imprescindible el mapa especular con normal mapping, y viceversa.
  4. No es necesario que las mallas en alta o baja poligonización sean un modelo solido.
    1. Se puede utilizar geometria “flotante” en parte concavas (sólo es cuestión de retocar en Photoshop ;-) )
  5. La malla en baja no tiene porque “seguir” a la malla en alta al 100%.
  6. El trabajo no finaliza una vez generada el normal map (baked). Suele ser necesario realizar ajustes y retoques en Photoshop.
Comentarios desactivados

Animar sprites para juegos de móvil con Flash

Por Daniel G. Blázquez
7 diciembre 2008

Tal y como comenté en la charla sobre arte en videojuegos para móvil del CDV, cuando empezamos ha desarrollar juegos para móviles java hace cosa de 5 años, tuvimos que dar un nuevo enfoque a la animación de sprites debido a los altos requisitos de optimización de estos dispositivos.

Para animar cualquier sprite de la forma más óptima posible, es necesario:

  • Los fotogramas de la animación (sprites) sin espacios en blanco. Cada sprite tiene el tamaño mínimo posible y normalmente cada uno tiene un tamaño diferente.
  • Identificador o nombre de la animación (por ej., “prota_corre”, “prota_muere”, lo que sea…)
  • Script de animación para definir la secuencia de fotogramas (Por ej., 1, 2, 1, 3, 2…), para no tener que repetir gráficos.
  • Coordenadas de referencia para cada sprite. Esta coordenada dentro del sprite se utiliza para concatenar fotogramas de diferentes tamaños, además de ser utilizada por el programador para colocar el sprite en pantalla.
  • Total independencia del programador. Si se consigue separar código y arte ¡es increíble lo que favorece la productividad!


Algunos fotogramas de la animación “andar” del juego Mr. Bean. Los puntos de referencia (en rojo).

Las dichosas coordenadas de referencia

Hay que tener en cuenta que cada sprite puede tener su coordenada de referencia en un lugar diferente.En este punto nos planteamos cómo disponer de dicha coordenada de forma visual y rápida, sin tener una incomoda y larga lista de coordenadas.

Lo más práctico y rápido en ese momento fue crear una 2ª imagen por cada sprite para indicar la coordenada (o coordenadas) mediante un pixel de color. Esa imagen se procesaría posteriormente para extraer la coordenada.

Esto nos permitía poder realizar montajes más complejos de animaciones dependientes unas de otras.


El fogonazo del fusil (b) y los casquillos (c) depeden automáticamente del fúsil (a) gracias a este sistema de puntos (Storm Gunner).

Y entonces llegó “Flash”…

Pronto este sistema no fue suficiente para crear animaciones más complejas. En ese momento se nos ocurrió usar directamente algún programa de animación. Flash fue la solución. Las ventajas son incalculables…

  • Es el programa de animación más utilizado del mundo. El animador sólo se preocupa de animar. Aumenta el rendimiento y la producción se mejora.
  • La especificación del los ficheros SWF es pública. Es posible extraer la información de coordenadas y sprites del fichero. (gracias Josep!)
  • Permite reutilizar sprites.
  • Permite las transformaciones básicas (rotaciones y volteos)
  • Es posible combinar sprites con imágenes vectoriales.
  • Es posible crear diferentes paquetes de gráficos mediante el uso de capas. Por ejemplo, si necesitamos eliminar cierta animación para un paquete de gráficos en concreto, sólo hay que colocarla en una capa y ocultarla antes de exportar.
  • Todo el proceso es 100% independiente del programador. Se pueden hacer cambios de forma fácil y sencilla. Los cambios se puede probar al instante en el juego.


Sprites finales del protagonista de “Livingstone, Lost Again“.


Animación creada en Flash con sprites

No obstante, sigue siendo necesario disponer de un sencillo script para definir las animaciones y las secuencias de fotogramas:

STANLEY_IDLE = 1,1,1,1,1,2,3,3,3,3,3,2; 	//quieto
STANLEY_WALK = 4-11;
STANLEY_JUMP = 14-20;
STANLEY_CHANGIDLE = 31,31-35,35,35,35-31; 	//colgado del techo quieto
STANLEY_CHANG = 40-47;				//techo moviéndose
STANLEY_BHANGIDLE = 50,50,50-55,55,55,55-50; 	//colgado del borde quieto
STANLEY_BHANG = 58-64,20; 			//colgado del borde salta
STANLEY_SHOT = 23-29; 				//látigo
STANLEY_CROUCH = 99, 102;			//agachado
STANLEY_CRAWL = 100-105,104,103,102,101; 	//arrastrándose
STANLEY_WAKE = 102, 99;				//levantarse
STANLEY_WHANG = 110-116; 			//colgado del látigo
STANLEY_CLIMB = 67,67,67,67-70,70,70,70,69,68; 	//enredadera quieto
STANLEY_CLIMBH = 80-84; 			//enredadera horizontal
STANLEY_CLIMBV = 88-93;				//enredadera vertical
STANLEY_JUMPSHOT = 123-128; 			//látigo saltando
STANLEY_DIE = 132-137;	 	 		//muerte

Alternativa3D, nuevo motor 3D para Flash.

Por Daniel G. Blázquez
21 abril 2008

Alternativa3D es un impresionante motor 3D, super optimizado para Flash Player, creado por un grupo Ruso.

Nada mejor que una demos con un estupendo trabajo de texturizado para abrir boca (pulsa “t” para ver el mallado):

Las especificaciones no están nada mal para ser un motor por software (y encima sobre Flash):

Pese a que es un gran trabajo, tengo mis dudas sobre si es práctico utilizar este tipo de motores 3D no oficiales a largo plazo.

Está claro que en antes o después, Flash soportará aceleración por Hardware, pero aún así… no sé si me arriesgaría a desarrollar un proyecto serio sobre este tipo de plataformas, cuando ya existen sistema muy desarrollados (como Shockwave 3D o JAVA). O incluso que mañana Adobe le dé por sacar un Flash 3D oficial. :-?

Visto en drawlogic.com

Increible aplicación de modelado 3D sobre vídeo

Por Daniel G. Blázquez
22 febrero 2008

Esta aplicación desarrollada por Australian Centre for Visual Technologies podría revolucionar el mundo del 3D como en su día lo hizo Zbrush.

El sistema de modelado parece realmente sencillo (e impresionante). Se basa en modelar de forma interactiva sobre un vídeo de referencia, de forma que al cambiar los fotogramas de la película, el modelo reajusta su posición.

El mapeado también lo hace de forma automática, obteniendo las texturas preprocesadas del propio video.

Enlace al vídeo

Vía ateneupopular.com

Comentarios desactivados

PNG de 8 bits con canal alfa (la alternativa en IE6)

Por Daniel G. Blázquez
30 octubre 2007

Internet Explorer 6 no acepta PNG’s de 32 bits con transparencia. Es un fastidio para miles de diseñadores web. Además, el filtro de Microsoft AlphaImageLoader y otras soluciones que hacen uso de él son contraproducentes.

El formato mágico

Pero, por casualidad encontré una alternativa para IE6 que podría ser útil en ciertos casos y con la que tendríamos transparencias reales en los navegadores modernos, y transparencia binaria en IE6 (como la del GIF).

Se trata de utilizar un formato especial de PNG, en el que tendríamos una imagen indexada de 8 bits con un valor alfa especifico por cada uno de los colores de la paleta (Más información en la especificación PNG).

Imagen 32 bits optimizada con PNGOUT (3,36 KB)
Imagen de 32 bits optimizada con PNGOUT (3,36 KB)

Imagen 8 bits con canal alfa (2,42 KB)
Imagen de 8 bits con canal alfa optimizada con PNGOUT (2,42 KB).

Los navegadores modernos muestran correctamente este formato, pero IE6 no aplica bien el alfa y elimina todas la zonas semitransparentes, dejando sólo las zonas opacas. Esta opción puede ser válida para pequeños iconos o similares.

Ejemplo como queda en IE
Ejemplo de como quedaría en IE6

Para utilizar esta triquiñuela, sólo tenemos que reducir el número de colores de la imagen y del canal alfa, y después optimizarla con PNGOUT. ¡Ojo! Photoshop no carga bien este tipo de imágenes.

También podemos utilizar Fireworks, de los pocos programas capaces de trabajar con imagenes de 8 bits con alfa.

Comentarios desactivados

Comparativa de aplicaciones de 3D

Por Daniel G. Blázquez
3 octubre 2007

Gracias a Josep me he enterado de una interesante comparativa entre varias aplicaciones de gráficos 3D desarrollada a lo largo de 12 meses por un profesional del sector. La comparativa es bastante completa y exhaustiva, incluyen precios, tipos de licencias, características, idiomas, sectores donde se utilizan, etc.

Como resumen te dejo la siguiente frase:

Todas las aplicación 3D son buenas y no hay ninguna mejor que las demás. Hoy en día, todas estas aplicaciones 3D pueden hacer todo lo que sueñas [...]

Las aplicaciones comparadas:

Seam Carving: espectacular tecnología para manipulación de imágenes.

Por Daniel G. Blázquez
22 agosto 2007

Continuan con más novedades en el Siggraph 2007. Hace unos días presentaban OpenGL 3, ahora anuncian una nueva tecnología de escalado y manipulación de imágenes llamada Seam Carving [PDF] de resultados asombrosos (¡y rápidos!). Esta técnica se basa en preservar con métodos automáticos o manuales ciertas zonas de la imagen a la hora de escalarla.

Mejor un vídeo que mil palabras:

Enlace al vídeo [youtube]Actualizado:


  • icono rss RSS