Tips de Desarrollo Web

Escrito por Juan David Nicholls

NAVEGACIÓN

Animación Digital con Blender

Hola a todos! En este artículo vamos a ver una introducción a la Animación Digital y algunos tips que he aprendido trabajando con la herramienta Blender. Este es tan solo un abrebocas a lo que es este gran mundo de la animación y espero que les guste al igual que a mi! PD: La idea de este conocimiento es poderlo aplicar a la Web con WebGL/Canvas! :D

Enlaces interesantes

Animación

 

Generación de la Idea

Como con cualquier otra idea, antes de empezar a desarrollarla con una herramienta se recomienda realizar un StoryBoard, el cual no es más que un guión visual que nos permite definir paso a paso lo que queremos lograr y poder ir refinando la idea hasta obtener una historia en la cual nos basaremos de ahí en adelante. Esto es importante para que no empecemos a desarrollar sin tener un objetivo previo, recuerda que siempre es necesario saber a donde queremos llegar antes de dar un primer paso. En este punto toda idea es bienvenida, más toda crítica esta prohibida.

Diseño de los Personajes:

Los personajes no definen la historia, es la historia la que define el personaje. Recuerda que todo lo que imagines, todo ser vivo existe únicamente dentro del Universo de tal obra.

  • Arcos de Personalidad:

Desglosamos y analizamos la evolución continua que tendrá cada personaje. Estos se dan a partir de acciones por parte de factores externos al personaje que lo estimulan a tal evolución (Edad, riqueza, sabiduría,…). Ejemplo:

  1. De la vida a la muerte
  2. De la juventud a la vejez
  3. De rico a pobre
  4. De ingenuo a sabio
  5. De cobarde a valiente
  • Rasgo dominante:

Es el carácter más reiterativo durante la historia que permite modelar las expresiones más recurrentes.

  1. Caracterización directa o explícita: Se presenta de manera directa las características del personaje, como por ejemplo con un narrador en tercera persona.
  2. Caracterización indirecta o implícita: Al espectador se le dan pistas del carácter del personaje a través de las funciones que desarrolla dentro de la historia.
  • Personajes arquetípicos:

Modelo de conducta predefinido para los personajes que sirven para completar la estructura narrativa.

  1. Héroe: Construido por su capacidad de sacrificio.
  2. Mentor: Es quien entrena al héroe, en su esencia se puede identificar la gran sabiduría y experiencia que posee. Posee cualidades que requieren una gran disciplina. Generalmente aparece en los momentos más difíciles del héroe (Climax).
  3. Guardián: Obstáculo en el viaje del personaje que debe de superar como parte de una prueba para poder continuar, por lo general es un aliado luego de ser vencido.
  4. Tramposo: Generalmente disminuye el peso dramático del relato. Se define como un payaso que a través de actos inconscientes ayuda o retrasa al protagonista como al antagonista.
  5. Doble cara: Su personalidad cambia en el relato de manera conveniente, logrando generar tención en el espectador por la desconfianza que crea en relación al protagonista.
  6. Heraldo: Medio por el cual se presenta el objetivo al protagonista.
  7. Sombrío: Características dentro del ser que se quisiera omitir o eliminar. Es como un mentor para fines negativos, puede ser el mismo antagonista o un aliado.
  • Ficha técnica:
  1. Descripción Física: Estatura, Peso, Color de ojos, Cabello, Señas particulares, Atuendo, Accesorios y armas.
  2. Poderes y habilidades: Inteligencia, Fuerza, Velocidad, Vigor, Resistencia, Agilidad, Reflejos, Habilidades de Combate, Habilidades especiales, Poderes físicos super humanos, Poderes mentales super humanos, Limitaciones y debilidades, Fuente de poder.
  3. Datos biográficos: Nombre real, Alias, Fecha y Lugar de Nacimiento, Fecha, Lugar y Causa de muerte, Parientes conocidos, Doble identidad, Ocupación, Ciudadanía, Estado Legal, Estado civil, Nivel educativo, Aliados y Enemigos.

Nota: En este punto se recomiendan realizar 2 actividades como:

  1. Bocetado: Entre los integrantes desarrollar bocetos de cada uno de los personajes a partir de las siluetas teniendo como referente todo el desarrollo conceptual previamente descrito junto con los estereotipos visuales de los personajes.
  2. Hoja modelo: Entre los integrantes desarrollar el conjunto de expresiones faciales y corporales a partir del arco de personalidad. Aquí se encuentran las vistas tanto frontal como lateral para ser modelados.

Diseño de Escenarios

  • Simetría:

En la composición básicamente es un sentido estético de armonía manteniendo la proporcionalidad. La simetría tiene varias dimensiones como un espacio de tiempo, como una relación espacial, como una transformación geométrica en la escala, la rotación en un sentido reflejante funcional, o como un aspecto abstracto de los objetos, modelos teóricos, el lenguaje, la música, al igual que en mismo conocimiento.

  • Ley de los tercios:

Estrategia compositiva usada en el diseño, como en las artes visuales. Se basa en la división de la imagen en tres franjas de igual tamaño tanto de manera horizontal como vertical, las líneas imaginarias usadas para dicha división generan en las intersecciones puntos de tensión caracterizados por poseer mayor interés en relación a los demás puntos, ideales por tanto para ubicar los elementos más importantes en la composición.

Nota: En este punto se recomiendan realizar 2 actividades como:

  1. Mapa de Contexto: Identificar los espacios que se requieren diseñar de acuerdo al guión. Aquí debemos generar un plano general en planta que defina los espacios, dimensiones, interacciones y ubicación geográfica. Mediante una herramienta de visualización 3D se realiza el levantamiento del plano.
  2. Bocetado: Después de haber definido los espacios se realizan bocetos en línea utilizando puntos de perspectiva.

Tiempo

Duración de las cosas sujetas a mudanza (Grabación), Magnitud física que permite ordenar la secuencia de los sucesos (Narración), Cada una de las partes de igual duración en que se divide el compás (Ritmo). En el espacio-tiempo es donde se desarrollan todos los eventos físicos del Universo, el hombre por tanto alude a la necesidad de considerar unificadamente la localización geométrica en el tiempo y el espacio, ya que la diferencia entre componentes espaciales y temporales es relativa según el estado de movimiento del observador.

Elementos de Diseño 

  • Principios de la Animación:
  1. Pendular: Timing (Noción del tiempo), Ease in and out on slow in and out (Aceleración y Desaceleración gradual), Arcs (Arcos), Exaggeration (Exageración), Straight ahead action and pose to pose (Acción directa y pose a pose).
  2. Bouncing Ball: Squatch and Strech, Anticipation (Anticipación), Weight and depth (peso y profundidad).

Bouncing Ball

Guión

  • Criterios básicos del relato:
  1. Tiene un inicio y un Final: Se opone al mundo real al formar un todo, es decir siempre existirá una última página porque tiene un inicio, una mitad y un final.
  2. Es una secuencia doblemente temporal: La sucesión de los acontecimientos de la historia (Lo que se narra) y lo que el espectador tarda en recorrer (Tiempo de lectura-visión).
  3. Es un discurso (No todo discurso es una narración): Por percepción el espectador siempre siente que hay alguien quien narra (Discurso de un narrador o por la imaginación).
  4. La percepción del relato vuelve irreal la narración: Existe una dualidad distintiva acerca del carácter de lo percibido ya que no están aquí y ahora, si no en un tiempo alterno.
  5. Es un conjunto de acontecimientos: El relato es la organización sistemática temporal de acciones dentro del orden propuesto.

image

  • Conflicto:

Es el acontecimiento principal de toda la historia, el cual afecta de manera directa al personaje y lo motiva a desarrollarse dentro de la Obra. Resolver el conflicto es el objetivo del personaje (Los obstáculos afianzan el conflicto).

  • Obstáculos:

El conflicto nace de la oposición de los obstáculos y el objetivo. Se manifiestan de muchas formas; situaciones, objetos, espacios o personas (Antagonistas).

  • Objetivo:

Es lo que el protagonista puede ganar o perder. Es el objeto de deseo, por el cual se disputan el protagonista y el antagonista.

  • Personaje:

El vínculo entre el espectador y la obra, es quien sufre y debe superar los obstáculos para alcanzar el objetivo (Definen toda la acción dentro de la obra).

  • El nudo dramático y los actos:

El relato se puede dividir en grandes momentos estructurales:

  1. 1er Acto (Antes de exponer el objetivo): Mediante un incidente rompe la rutina del protagonista.
  2. 2do Acto (Durante la búsqueda del objetivo): Proceso ascendente dentro de la búsqueda del objetivo (El Climax).
  3. 3er Acto (Después del Objetivo)

El nudo dramático y los actos

Guía de las buenas prácticas en Animación Digital

Guía de las buenas prácticas en Animación Digital

 

Blender

 

Hola Mundo con Blender

Blender básicamente es una herramienta que nos sirve para poder realizar todo el proceso de la animación, como por ejemplo el Modelado, el Animatic, el Layout, el Render, el Composing, etc. Ver aquí. Además de que en su modo de interacción se tiene la ventaja de que se puede trabajar con otros programas que ya se conocen como Maya. Ahh por cierto… es FREE!! :D

Descargar Blender

Cambiar el flujo de trabajo

imageEn Blender se cuenta con diferentes Vistas que nos permiten cambiar nuestro flujo de trabajo, ya sea la animación, la composición, la edición de vídeo, entre otras.

Atajos de teclado (Click en la siguiente imagen)

image

Entre los atajos más útiles están los que nos permiten modificar:

  1. La locación: G  (Previamente seleccionar el Objeto con Click Derecho).
  2. La rotación: R (Previamente seleccionar el Objeto con Click Derecho).
  3. La escala: S (Previamente seleccionar el Objeto con Click Derecho).
  4. Rotar la pantalla: Dejar presionado la rueda del Mouse mientras mueves el Mouse.
  5. Para trasladarse: Lo mismo que el paso anterior mientras dejas presionada la tecla “Shift”.
  6. Hacer zoom: Lo mismo que el paso 4 mientras dejas presionada la tecla “Ctrl” o en su defecto simplemente girar la ruedita del mouse.
  7. Borrar objeto: Click derecho para seleccionarlo y luego presionar la tecla X, Click en Borrar.
  8. Agregar objetos: Shift + A.
  9. Duplicar objetos: Shift + D.
  10. Visualización transparente: Z.
  11. Ubicar el Cursor 3D  en el Centro: Shift + C.
  12. Seleccionar varios objetos: B.

Ventanas Principales

  1. Ventana 3D (Podemos ingresar objetos y transformarlos).
  2. Ventana Outliner (Podemos seleccionar los elementos del Mundo).
  3. Ventana de Propiedades (El Render, las propiedades de los objetos, del fondo, los materiales, las luces, etc).
  4. Ventana de la línea de tiempo (Podemos observar el comportamiento de nuestras animaciones)

Ventanas de Blender

Numpad

Para activar/desactivar el teclado numérico en un portátil presionamos las teclas Fn + Bloc Num.

  1. Numpad 0: Vista de cámara.
  2. Numpad 1: Vista Frontal (La opuesta es Ctrl + Numpad 1).
  3. Numpad 2: Rotar hacia arriba (Ctrl + Numpad 2 para desplazarse hacia arriba).
  4. Numpad 3: Vista Lateral (La opuesta es Ctrl + Numpad 3).
  5. Numpad 4: Rotar hacia la derecha (Ctrl + Numpad 4 para desplazarse hacia la derecha).
  6. Numpad 5: Cambiar el tipo de vista (Perpestiva/Ortogonal)
  7. Numpad 6: Rotar hacia la izquierda (Ctrl + Numpad 6 para desplazarse hacia la izquierda).
  8. Numpad 7: Vista Superior (La opuesta es Ctrl + Numpad 7).
  9. Numpad 8: Rotar hacia abajo (Ctrl + Numpad 8 para desplazarse hacia abajo).

Nota: La diferencia entre la vista en perspectiva y la ortogonal, es que en esta última sin importar si los objetos se encuentran cercanos o no, se verán del mismo tamaño. 

Transformaciones

Transformaciones básicas en Blender

Como podemos observar en la imagen anterior logramos desplazar, rotar y escalar los objetos en cualquiera de los ejes, además mediante el circulo blanco tenemos la posibilidad de realizar estas transformaciones proporcionalmente, es decir afectar el valor en todos los ejes al mismo tiempo. Como vimos en la sección de atajos de teclado en este artículo tenemos también otra opción de realizar tales transformaciones de una manera mucho más sencilla.

Desplazamiento, rotación y escala con los atajos de teclado

Mediante estos atajos de teclado realizamos la transformación y para aceptar los cambios presionamos Click Izquierdo, de lo contrario presionamos la tecla Esc o Click Derecho para cancelar. Con estos atajos de teclado tenemos la opción de presionar X, Y o Z para alterar únicamente el eje correspondiente y para cancelar la transformación luego de haber sido aplicada presionamos ALT + G (Desplazamiento), ALT + R (Rotación) o ALT + S (Escala).

Durante el desplazamiento podemos dejar presionado Ctrl para que el movimiento sea realizado por cada unidad de grilla.

Desplazamiento por unidad de grilla

Y para un movimiento lento respecto al Desplazamiento, la rotación y la escala podemos dejar presionado Shift + A (Se basa de acuerdo al incremento de la grilla establecida) o tan solo presionamos Shift si aún deseamos que sea más lento y por lo tanto más precisa la transformación.

También podemos transformar nuestros objetos mediante el Panel de Transformación el cual se puede observar en nuestra ventana 3D (Se puede abrir/cerrar presionando la tecla N o acercando el mouse al símbolo + en la parte superior derecha y arrastrarla).

Panel de transformación en Blender

Cámara

Se puede entrar a esta vista presionando  Numpad 0 ó Click en Vista/Cámara. Estando en esta vista tenemos la opción de poder mover la cámara en el mundo para poderla posicionar donde nosotros deseemos con el mouse, pero antes debemos de ir al Panel de la Vista presionando la tecla N en la Vista 3D y Seleccionar la opción “Lock Camera to View”.

Bloquear la cámara a la vistaYa podemos movernos en el mundo y podremos observar que la cámara se mueve de igual forma para poderla ubicar donde más nos guste (Cuando ya este ubicada tan solo quitamos el chulito a la opción seleccionada previamente). Esta es por tanto la manera más sencilla para poder configurar la escena que se visualizará en el Render (F12 para entrar a esta vista y ESC para salir). Si el Render se encuentra muy oscuro es porque falta ubicar las luces en una mejor posición respecto a lo que se esta visualizando.

En este punto podemos guardar el Render como una imagen.

Realizar una copia del Render

Cursor 3D

En Blender para poder crear objetos y ubicarlos tenemos el Cursor 3D (El circulo rojo con blanco) el cual nos permite establecer la ubicación presionando Click Izquierdo en nuestra Vista 3D, después de esto los objetos que agreguemos aparecerán centrados en la misma posición.

Cursor 3D

Si quisiéramos ubicar un nuevo objeto centrándonos en otro objeto ya existente podemos hacer lo siguiente:

  1. Seleccionar el objeto existente con Click Derecho.
  2. Presionar Shift + S y nos saldrá diferentes opciones de la selección.
  3. Escoger la opción Cursor to Selected, la cual ubicará el cursor 3D en el objeto seleccionado.
  4. Agregamos un nuevo objeto (Shift + A seguido del objeto deseado).

Crear un objeto respecto al centro de otro

Otra opción muy útil es la posibilidad  de hacer reflexión respecto a un eje utilizando el Cursor 3D, es decir poder crear un espejo de un objeto basándonos en un eje, para entender mejor esto observemos:

  1. Creamos un objeto y lo movemos hacia un lado de donde se encuentre ubicado el Cursor 3D.Creamos un objeto en Blender
  2. En el menú del Pivote cambiamos a Cursor 3D (Para que podamos hacer reflexión del objeto respecto a la posición de nuestro cursor)image
  3. Presionamos Shift + D para duplicar el objeto y luego la tecla Esc para cancelar el agarre (Automáticamente el nuevo objeto quedará ubicado en la misma posición que el actual).
  4. Y para hacer reflexión por ejemplo respecto al eje X presionamos Ctrl + M y luego la tecla X.
  5. En este punto podemos visualizar como se refleja nuestro objeto respecto al eje del cursor y para salvar los cambios presionamos Enter o Click Izquierdo.Reflexión de un objeto en el eje X
  6. Para poder realizar transformación de los 2 objetos al mismo tiempo sin que se modifique su posición podemos cambiar el Pivote a Orígenes individuales (Obviamente debemos seleccionar el otro objeto con Shift + Click DerechoOrígenes individuales

Después de esto podemos realizar una transformación como escalar los objetos y podremos observar que la posición no cambia, el origen de cada objeto sigue siendo por tanto el mismo.Escalar objetos conservando la posición de manera individual 

Iluminación

Como vimos en la parte de la cámara, cuando entramos a la vista del Render, los objetos pueden verse muy oscuros dependiendo de la ubicación de las luces, por tanto podemos presionar Shift + A y en el menú tenemos una opción de poder agregar varios tipos de lámparas que podemos ubicar en la escena (Como si fuera el sol, o tan solo para una área específica, un lugar, etc).

Manejo de luces en Blender

En la Ventana de Propiedades de Blender contamos con la opción de poder configurar la Oclusión Ambiental del Mundo, esto básicamente consiste en que podemos simular la iluminación ambiental de manera global en donde el cielo visible actúa como la fuente de luz.

Oclusión Ambiental

Luego de tener seleccionada esta opción podemos volver a entrar a nuestra vista del Render y ver los cambios aplicados respecto a la iluminación.

Iluminación con la oclusión ambiental activada

Si en el método de iluminación observamos muchos puntos negros en el Render podemos ir a las propiedades del Mundo y aumentar la cantidad de muestras de rayos para un resultado mucho más suave (Cuanto mayor sea el valor más se demora en generar el Render).

Aumentando la cantidad de muestras de los rayos de las luces

Materiales

Después de seleccionar un objeto podemos ir al Panel de Propiedades y entrar en la sección de Material, en donde podemos crear nuevos materiales como elegir materiales existentes, a cada material se le puede asignar un nombre para identificarlo como configurarle otras propiedades como el color.

Nuevo Material en Blender

En Blender tenemos la opción de poder copiar el material que tiene un objeto a muchos más objetos de una manera muy sencilla:

  1. Seleccionamos todos los objetos a los que le queremos asignar un material ya creado (Recuerda que se selecciona con Click Derecho y para seleccionar varios objetos debes mantener presionada la tecla Shift).
  2. Por último seleccionamos el objeto que ya tiene el material asignado.
  3. Presionamos Ctrl + L y seleccionamos la opción de Materiales para crear un enlace en cuanto a estos datos del objeto.

Luego de asignarle el material a nuestros objetos podemos suavizar el sombreado para quitarles las facetas y que estas no sean visibles en el Render.

Suavizar el objeto

Y por lo tanto cuando entremos a visualizar el Render podremos ver tales cambios aplicados, dándonos una perspectiva mucho más real del objeto. Render de un objeto suavizado

Animación

Blender es una herramienta que viene lista para empezar a animar, desde que creamos un objeto nos muestra el Fotograma (KeyFrame) activo dentro de Blender, el cual podemos visualizar en nuestra línea de tiempo (Un fotograma contiene la información de uno o más parámetros del objeto en un tiempo determinado).

Ventana de línea de tiempo

Nosotros en el método de interacción Modo de Objeto podemos presionar la Tecla I y visualizar los diferentes parámetros que podemos capturar de un objeto al momento de insertar un Fotograma Clave en nuestra línea de tiempo

Diferentes Keyframes que se pueden insertar

Por ejemplo cuando insertamos un KeyFrame Location este nos permite guardar en el tiempo las posiciones de X, Y y Z del objeto.

Para insertar 2 KeyFrames como ejemplo para ver un cambio de ubicación durante el transcurso del tiempo hacemos lo siguiente:

  1. Seleccionamos el Objeto (Click Derecho).
  2. Tecleamos “I” y Click en Ubicación (Esto creará un primer Keyframe con la ubicación actual del objeto).
  3. Nos movemos en la línea de tiempo con el Click Izquierdo (Podemos mover la rayita verde de manera continua dejando presionado el click izquierdo mientras movemos el Mouse).
  4. Movemos el Objeto (Click derecho sobre el objeto y lo soltamos con Click izquierdo), aquí básicamente modificamos los parámetros de la ubicación.
  5. Insertamos otro KeyFrame, tecleando “I” y dando Click en Ubicación (Esto es porque solo estamos modificando la ubicación).
  6. Dale Play para ver que es lo que pasa! :D

Keyframes

  • Asignación automática de Fotogramas Claves

Blender para ayudarnos a realizar nuestra animación nos brinda la opción de asignar KeyFrames de manera automática, en donde nosotros solo nos tenemos que preocupar por movernos en la línea de tiempo y realizar posteriormente la transformación, Blender automáticamente insertará un KeyFrame del cambio del objeto.

Primero habilitamos la inserción de KeyFrames de manera automática en la Ventana de Línea de Tiempo dando Click en el Botón Rojo (Cuando hayamos terminado de realizar la animación debemos recordar deshabilitarla)

Asignación de KeyFrames de manera automática

En las llaves podemos configurar que solo capture únicamente los parámetros que nosotros deseemos, de lo contrario el capturará todos los parámetros como por ejemplo los de la traslación, rotación y escala del objeto. Para poder ver de una mejor manera cuando se vayan insertando los KeyFrames nos vamos a nuestra Vista de Animación en Blender.

Vista de Animación en Blender

Como Blender se encuentra escuchando todo el tiempo insertamos nuestro primer KeyFrame, seleccionando nuestro objeto en Modo de Objeto, presionamos la Tecla G y luego sin mover el Mouse la Tecla Enter (se insertará un KeyFrame en la posición donde se encuentra el objeto actualmente).

Y para que se vayan insertando los demás KeyFrames de manera automática únicamente debemos de realizar los siguientes pasos:

  1. Movernos en nuestra línea de tiempoMovernos en nuestra línea de tiempo
  2. Realizar la transformación, por ejemplo cambiando la ubicación del objeto presionando la Tecla G y dando Click Izquierdo en la nueva ubicación

Traslación en un eje

Y automáticamente Blender insertará el nuevo KeyFrame el cual podemos observar muy fácilmente en nuestra Vista de Animación

Fotogramas Clave en nuestra Vista de Animación

Ya luego para poder visualizar la animación puedes darle Play. Recuerda desactivar la asignación automática de fotogramas claves luego de haber finalizado la animación :D

La animación por defecto entre 2 KeyFrames la podemos cambiar en el editor de curvas Graph Editor seleccionando los 2 nodos del parámetro a modificar

Cambiar la

Aquí acabamos de modificar la interpolación de Bezier a Lineal para que la velocidad de la animación sea constante respecto a la Ubicación en el eje Y.

  • Animación Infinita

Una opción que tenemos es la posibilidad de hacer que la animación sea infinita, por ejemplo que se mantenga constante. Para esto seleccionamos los 2 nodos en el Graph Editor, Click en Channel/Extrapolation Mode y seleccionamos Linear Extrapolation

Extrapolación Lineal

Podemos observar que la animación por lo tanto se mantendrá de manera infinita

Ejemplo de Extrapolación Lineal

  • Emparentar objetos

Otra opción con que contamos en las animaciones es la posibilidad de emparentar objetos, para que todos los comportamientos que tenga un elemento padre los herede el hijo. Para realizar esto podemos seguir los siguientes pasos:

  • Crear nuestro objeto (El hijo)

Crear una esfera

  • Cambiamos nuestra vista 3D a Wireframe (Para verla transparente) 

Vista Wireframe

  • Creamos un objeto de tipo Lattice (El objeto de tipo Lattice nos permitirá recubrir nuestro objeto, es invisible y será el padre el cual modificará la geometría y comportamiento del hijo)

Creamos un objeto de tipo Lattice

  • Antes de continuar escalamos el objeto de tipo Lattice para que cubra nuestro objeto hijo

Escala el objeto lattice

  • Emparentamos nuestros objetos (Primero seleccionamos el hijo con Click derecho, luego con Shift presionado el hijo y por último Ctrl + P y seleccionamos la opción Lattice Deform)

Emparentar con la opción Lattice DeformCon esto ya podremos observar que todos los comportamientos que haga el objeto padre (Lattice) los heredará el hijo (Esfera), pero todos los comportamientos del hijo no dependerán del padre, es decir a nuestra esfera le podemos agregar más comportamientos de los que tenga el padre.

Continuación del Artículo

http://www.nicholls.co/blog/post/Continuacion-de-Blender

blog comments powered by Disqus