¡Bienvenido a Universo Maker!
¿Es esta la primera vez que visitas el foro? Si es así te recomendamos que te registres para tener completo acceso a todas las áreas y secciones del foro, así también podrás participar activamente en la comunidad. Si ya tienes una cuenta, conectate cuanto antes.
Iniciar Sesión Registrarme

No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo Mensaje [Página 1 de 1.]

#1 Tutorial: Animaciones el Lun Oct 24, 2016 10:28 pm

Reputación del mensaje :100% (5 votos)

Faye Valentine

avatar

A petición de: @Natalie

Nivel: Bajo


Introducción: nunca sé qué poner aquí pero lo pongo igual


En este tutorial abarcaremos las animaciones. Sí, suena bastante básico, pero no tenéis idea la cantidad de personas que usan las animaciones predeterminadas del maker o simplemente colocan las animaciones frames por frame y ya. Esto no es que sea malo, pero siempre se puede mejorar, como  todo. Aquí no veremos "cómo hacer una animación de una bola de fuego" ni nada por el estilo, porque sería imposible. Cada habilidad utiliza una animación distinta y cada persona se la imagina de una forma distinta. Así que, en cambio, os voy a enseñar a cómo animar correctamente en el RPG Maker mediante trucos, técnicas y conceptos que aprenderéis a manejar. Esto requiere un nivel bajo, cualquiera puede hacerlo, es solo cuestión de ir aplicando las enseñanzas y desarrollarlas. Suficiente cháchara, ya sabéis que me gusta la acción.



Paso 1: La Interfaz


Antes de enseñaros técnicas y maravillas primero tenéis que saber con qué hacerlas, ¿no? El RPG Maker tiene una interfaz para hacer las animaciones que consta de muchos botones y opciones y en el centro una pantalla donde manipularemos las celdas del frame en el que trabajemos. ¿Que qué es una celda y un frame? Ya les hago un glosario. Pero primero una imagen para que observemos mejor.

*Disculpad que lo tenga en Inglés, pero son las mismas cosas para el español así que no os preocupéis =)

General Settings | Configuraciones Generales escribió:>Name | Nombre: El nombre de la animación. Funcionará solamente para identificarla.
>Graphic | Gráfico: el gráfico que usará la animación. A partir del VX se pueden utilizar hasta dos, XP y versiones anteriores usan una.
>Posición: donde se mostrará la animación con relación a la altura y anchura del objetivo. Puede ser: pies, cabeza, centro o pantalla. En caso de pantalla no habra objetivo alguno y la animación será mostrada en las coordenadas colocadas.

SE and Flash Timing | SE y Efectos de Flash escribió:>SE: todo efecto de sonido
>Flash: un destello de color y fuerza configurables que se mostrará por una cantidad determinada por el usuario de frames. Al ser un destello su fuerza siempre decaerá a 0 progresivamente.
>Hide Target | Ocultar Objetivo: ... no creo que necesite mucha explicación. Borra el gráfico del objetivo. No aplica a pantalla.

Al momento de configurar todo lo anterior mencionado se escogerá primero un frame que determinará en qué fotograma exactamente iniciará los efectos escogidos (sea SE, Flash, Ocultar objetivo o combinaciones de estos). Se puede colocar más de un comando de SE y Efectos de Flash en el mismo fotograma.

Comandos escribió:>Change Target | Cambiar Objetivo: este comando solo cambiará el gráfico del objetivo dentro de la interfaz, no en el juego. Funciona para posicionar mejor la animación en un gráfico determinado, por ejemplo si la animación será hecha para mostrarse sobre un chara, es mejor utilizar el chara como objetivo para posicionarlo exactamente.
>Paste Last | Pegar Último: pega el último frame copiado.
>Copy Frames | Copiar Fotogramas: copia un lote de frames
>Clear Frames | Limpiar Fotogramas: elimina un lote de frames
>Tweening: realiza una transición de frames a frames. Lo veremos más adelante Ópalo Guiño
>Cell Batch | Lote de Celdas: cambia la configuración de un bulto de frames.
>Entire Slide | Deslizamiento Completo: mueve una cantidad de píxeles determinada por el usuario en cualquier dirección.

Y ya hemos conocido la interfaz básica. Ahora empecemos conociendo las animaciones.


Paso 2: Animaciones y sus Bases


¿Qué es una animación? Una animación es un proceso donde damos la sensación de movimiento a imagenes, dibujos o cualquier tipo de objeto inanimado (plastilina, por ejemplo). En nuestro caso no trabajaremos con plastilina, trabajaremos con imagenes, normalmente prehechas, que constan de "frames". Ya he repetido la bendita palabra varias veces, ¿pero qué es un frame? Un frame es un fotograma, una fracción en una línea temporal donde ocurre cualquier cambio. De tal manera, en el fotograma 1 habrá una pelota, en el frame 2 la pelota se mueve ligeramente a la derecha, en el frame 3 se mueve más, y así sucesivamente, hasta que se tengan los fotogramas deseados para generar la animación de la pelota rodando.

@Pepito escribió:"Qué básico es esto, nos tratas como niños de kindergarten, háblame de algo interesante"

Recordad que lo básico es lo que repetiremos por siempre y para siempre, asi que siempre es necesario saberlo. Y es bueno recordarlo porque como dije en la introducción existen muchas personas que, como ya las animaciones vienen prehechas, no crean ellos animaciones, si no que van colocando cada gráfico frame por frame y ya está, ha quedado la animación.


Así luciría una animación prehecha. Yo no he hecho nada más que colocar gráfico por gráfico en cada frame. No le modifiqué, no le hice nada. Por tanto, aunque no luzca mal, tampoco luce genial. Luce aburrida. Es allí donde tenemos que hacer algo al respecto, aprender a animar mejor. Reitero, no podré enseñarte paso a paso como hacer animaciones, o sea, no puedo decirte "en este fotograma mueve la celda acá, en esta muevelo acá y cambiale así el tamaño" porque no sé qué quieres hacer tú o como lo quieres hacer, pero sí te puedo llenar de nociones para que tú mismo las hagas. Pero antes de entrar a lo divertido tendremos que aburrirnos un poco más con lo básico.

Cualquiera que haya abierto el maker a crear una animación sabrá lo que es una celda. Cuando colocáis un gráfico en el área de animación saldrá un recuadro que le rodeará con un número que lo identifica. Este número además sirve como prioridad. Si tienes una manzana en la celda 1 y una pera en la celda 2, la celda 2 se mostrará encima de la celda 1 siempre. Estas celdas tendrán nuestros gráficos y estas seran las que moveremos y modificaremos. Aquí sus propiedades:


>Pattern | Patrón: el 'frame' dentro del gráfico de la animación. Sabéis que los gráficos de animaciones tienen un formato determinado con un tamaño determinado. Pues si el gráfico consta de 25 frames, el patrón dirá si es el frame 5/25, 8/25 y así.
>X: posición horizontal de la celda
>Y: posición vertical de la celda
>Zoom: tamaño de la celda. Dato curioso: por defecto es 100, pero el tamaño real del gráfico es 200, no 100.
>Angle | Ángulo: el ángulo de la celda. Eso significa, claro, rotación.
>Flip | Espejo: hará un efecto espejo en la imagen o no.
>Opacity | Opacidad: se explica solo. Esto junto al tamaño y las coordenadas es lo que más usaremos.
>Blending | Mezcla: cómo se mezclará la imagen. Existen tres tipos: Normal, donde se mostrará el gráfico tal cual, sin efectos de ningún tipo; Add | Fusionado | Añadir (las traducciones varían), donde las partes más claras de la imagen brillarán y las más oscuras desaparecerán, Multiply | Multiplicar, ni idea de por qué se llama así, pero esta torna la imagen muy oscura y elimina el brillo de la imagen y del gráfico al cual se superpone.

Véamos cómo luce cada una Ópalo Guiño


*De izquierda a derecha: Normal, Añadir/Fusionado, Multiplicar

Genial, ¿no? Os puedo decir para qué sirven mejor cada una. Usad Normal cuando tengáis algún gráfico demasiado puro, natural (rocas, hojas); usad Añadir/Fusionado cuando el gráfico sea un efecto de partículas (curación, fuego, agua, viento, cualquier efecto chachi), y yo dejaría Multiplicar para casos muy específicos, como habilidades de oscuridad.

Ahora que sabemos como luce y para qué sirven los mezclados creo que es hora de entrar un poco en la animación como tal.

Como ya sabéis, animar algo es dar la sensación de que algo se mueve, así que grabaros la parte de "algo que se mueve" para toda la vida porque tenéis que saber que las cosas no son estáticas. Animemos un espadazo por ejemplo. Si yo colocara la imagen allí y cambiara su patrón hasta el frame necesario y ya, sin mover nada, así luciría:


Todo es cuestión de imaginación y creatividad. Así como está allí parece que quien dio el espadazo parece haber torcido las muñecas para darlo en vez de zarandear los brazos como debería. ¿Lo pilláis? Tenéis que crear mociones. Es importante el efecto de moción porque al fin y al cabo eso estamos haciendo animar, llevar algo a la vida, generar movimiento, ergo, moción. Así que, ¿por qué no le damos vida a ese sablazo? Empecemos colocando en el primer fotograma la celda más arriba de forma diagonal, pero en el siguiente fotograma que vaya al centro, esto es una técnica de moción que logra dar un efecto de rapidez. Ahora tendremos que balancear esta brusqueza con una transición (pero sin perder velocidad) hasta abajo diagonalmente del objetivo. El resultado luce así:


Sería solo cuestión de colocarle un flash y un sonido de corte y listo, tenéis una buena animación.

Vimos una moción de movimiento linear, ¿pero cómo hacemos de una moción frontal? Como un golpe por ejemplo. En ese caso no trabajaremos con coordenadas de desplazamiento sino con el zoom. Así luciría un golpe hecho de la manera sosa:


Y así se ve con efectos de zoom:


¿Podéis apreciar la mejora? Seguro que sí. Hay tres frames donde unas rayas (que las líneas generalmente representan movimiento, si habéis visto comics o leído manga sabéis que es así) pasan de abarcar la pantalla hasta reducirse a una pequeña conglomeración donde finalmente estalla el golpe. Esos tres frames dan una sensación de algo se está dirigiendo hacia el objetivo y cuando el golpe quiebra es cuando ese algo le pega. Podría ser un golpe, un bastonazo, quién sabe. Eso depende de tu habilidad. Las animaciones pueden llegar a ser abstractas y representar lo que tú quieras. Por ejemplo, cambiandole la tonalidad a una animación de fuego, a azul, puedes representar un "fuego fatuo" o quizá una "fuego de maná". Es cuestión de imaginación y de saber plasmar las cosas. Oh, por cierto, nunca os olvidéis de poner flashes cuando algo impacta con el objetivo. Mirad la diferencia =)


Eso y el sonido da una sensación en nuestro cuerpo de que hemos golpeado algo, lo cual, lo creáis o no, es un estímulo positivo al jugador ya que da cierto placer al sentirse más real, más tangible, las acciones que realizamos.

Antes de pasar al bonus también quería resolver la duda de @Natalie ya que al fin y al cabo este tutorial fue pedido por ella. Ella preguntó sobre cómo hacer una animación de pantalla completa. Tomé la animación del tal LexusX (que por cierto son buenísimas para efectos chachis de resplandores y tal) e hice dos versiones: una donde cómo se vería sin cambiarle el zoom y otra cambiándole el zoom. Así también vemos la importancia de cambiarle el tamaño a las cosas.

Sin zoom:


Con zoom:


¿Qué diferencia no? Mucha, así que por favor jugad con los tamaños de las cosas =) Ah, y @Natalie, para hacer la animación a pantalla completa solo busca el menú de posición:


Escoges Screen | Pantalla, y abres las propiedades de la celda para colocar el zoom en 400. Eso es todo.



Bonus #1: Lote de Celdas


Esta es la herramienta más útil que tiene la interfaz de animación junto al tweening, pero del tweening hablaremos luego. Por ahora centrémonos en el Cell Batch | Lote de Celdas. Antes de hablar sobre ella, primero conozcámosle:


Vemos opciones con las que ya estamos familiarizados, ¿no? Pues bien. La función de esta herramienta es aplicar los cambios a un determinado grupo de celdas en una determinada cantidad de frames. Por ejemplo, las celdas de 3 a 5 desde el frame 1 al 10 se colocarán en la coordenada X -35, coordenada Y: 0, y con un zoom de 120. Si ya hiciste una animación y quieres cambiarle el tamaño a todos las celdas de todos los frames, en vez de hacerlo uno por uno solo coges el Lote de Celdas y los modificas de un solo tirón. ¿Genial no?

Una acotación: cuando cambias las coordenadas X y/o Y no estás añadiéndole o sumándole a las coordenadas, sino que las colocarás en ESA coordenada. Para desplazar coordenadas tenemos la función de Deslizamiento Completo, mencionada al inicio.



Bonus #2: Tweening


Debes amar al tweening. Debes querer al tweening. Debes orar por el tweening. Tweening es amor y es vida.

Dejaré que wikipedia explique por mi qué es el tweening:
Wikipedia escribió:[...] es el proceso de generar cuadros intermedios entre dos imágenes para dar el aspecto de que la primera imagen se convierte suavemente en la segunda imagen

Eso es tweening en su regla. Pero nosotros utilizamos una función, no lo hacemos manualmente, entonces realmente ¿qué hace la función dentro de la interfaz? Simple. Genera una transición de gráficos de un frame indicado hasta un frame final también indicado y reproduce, en el medio, los gráficos correspondientes. ¿No entendieron? Me explicaré mejor.

Digamos que tengo una animación como la de LexusX, que tenía 45 tochos frames. Por la vírgen maría y la santa trinidad que es supremamente cansino tener que colocar 45 celdas sobre 45 frames manualmente, una por una... así que para ello utilizamos nuestro mejor amigo, el tweening. En el frame 1 colocaremos el frame 1 del gráfico, o patrón, como queráis llamarlo. Luego nos vamos hasta el final, el frame 45, y colocaremos el frame 45 del gráfico o patrón. Apretáis tweening, le dáis a OK, y listo. De hecho eso hice con la animación de LexusX que coloqué arriba =P

También sirve para otras cosas. Digamos que tengo un gráfico de una pelota. En el frame 1 lo pongo en las coordenadas X 0 Y 0. En el frame 10 pongo la misma pelota en la coordenada X 0 Y 100, luego aplico tweening. ¿Cual será el resultado? Así es, el tweening efectuará la transición y rellenará automáticamente los frames del 2 al 9 y generará el movimiento de la pelota. Es bastante útil, pero no abuséis de ella, para hacer mejores mociones es preferible realizarlo de manera manual, como he hecho con el sablazo. Eso, por cierto, me lleva al siguiente bonus.



Bonus #3: Easing



El easing es un concepto técnico pero yo lo explicaré mucho más fácil. Es básicamente la transición que tiene un movimiento de manera suave. El resultado es muy limpio y profesional y es útil para un sinfín de cosas. Se puede utilizar el efecto de "piel de cebolla" para acentuar este efecto. Os dejo una imagen para que os hagáis una idea:

*Fuente de la imagen: CreatixBox

Así, el movimiento puede empezar siendo rápido pero en su final es suave hasta que se detiene. El easing puede no solo incluir efecto lineal sino también de rebote, de stretch, de fade in o de fade out. Por hoy solamente abarcaremos de fade (in & out) y de linealidad.

Así se ve un movimiento lineal sin easing:


Y así se ve un movimiento lineal con easing (y con fade out):


¿Cuantas veces mejor se ve, ah? ¿diez? ¿veinte? La verdad es que es un efecto genial, le da vida a la animación (por extraño que suene) y puede otorgar tanto realismo como un toque caricaturesco, depende de como la utilices. Les explico como se logra:

En la imagen he utilizado tres nociones: piel de cebolla, easing y un fade out.

>Piel de cebolla: la pelota está en una posición en el primer frame pero al segundo se aleja bruscamente de su posición original, sin embargo se coloca el mismo gráfico en la posición en la que estaba con una menor opacidad. Para las opacidades es mejor manejar los siguientes valores (255 > 168 > 100 > 55 > 0) Para la piel de cebolla depende de que tan duradero quieras que sea, pero nunca debe durar más de 4 frames, y lo normal son 2. De tal manera, hice el mio con 2, uno con opacidad 100 en el frame 2, y otro con opacidad 55 en el frame 3. Al cuarto desaparece.

En los últimos 3 frames se hace otro efecto de piel de cebolla donde se coloca el mismo gráfico que se está utilizando en ese frame procurando que la celda quede debajo pero un poco más a la izquierda (o de donde la moción venga) de la original, con una opacidad de 100. Al siguiente frame la celda original se habrá movido un poco a la derecha, así que se colocará otra celda de cebolla a la izquierda de la original pero a la derecha de la primera celda de cebolla, la cual además ya tendrá opacidad de 55. En el tercer frame desaparece la primera celda de cebolla, la siguiente cae a opacidad 55, y en el cuarto frame ya ninguna existe. Esto genera un efecto de "arrastre" bastante genial para los efectos de movimiento, útil para espadazos o cualquier cosa que tenga una moción linear.

>Easing: la pelota se mueve bruscamente de su posición en el frame 2, pero a medida que los frames aumentan su desplazamiento en la coordenada determinada (en mi caso X) va decreciendo. Si en el frame 2 se movió 60px, en el frame 3 se mueve 40, en el frame 4 se mueve 20, en el frame 5 10, en el frame 6 5, y en el frame 7 2, en el frame 8 1. La suavidad de la transición dependerá del efecto que queráis lograr. En mi caso ha sido bastante rápido pero con una suavidad notable.

>Fade out: los últimos frames, usualmente 3 o 4, el gráfico va perdiendo opacidad hasta llegar a 0. Fade In es el proceso contrario, donde al inicio el gráfico está en 0 y tras 3 o 4 frames el gráfico gana opacidad hasta llegar a 255.



Bonus #999: Efecto de Blink | Pestañeo



Este si será rápido ya para terminar de una buena vez xD. Con este efecto lograremos dar a entender al jugador que el objetivo ha sido dañado. Muchos RPGs de antaño hacían esto. Se logra haciendo que en el momento que la animación "golpea" (ya hablamos de esto), ocultamos al objetivo por un frame, y 1 o 2 frames más adelante lo volveremos a ocultar. La frecuencia de pestañeo dependerá de vosotros, pero no puede ser, obviamente menor a uno. De tal manera que sería algo como:

FRAME 3; ocultar objetivo por: 1 frame; FRAME 4; nada; FRAME 5; ocultar objetivo por: 1 frame; FRAME 6; nada

Y terminaría viéndose así:




Créditos: no necesarios

*Este tutorial fue creado en el RPG Maker VX Ace, pero funciona para todas las versiones del RPG Maker.



Última edición por Faye Valentine el Vie Oct 28, 2016 6:49 pm, editado 3 veces

#2 Re: Tutorial: Animaciones el Lun Oct 24, 2016 10:40 pm

Kululu

avatar
Este tutorial es de excelente calidad.

No solo está muy bien explicado y en un buen formato, también incluye conceptos que aplican a animación real fuera del RPG Maker.

Todas las nociones aquí expuestas (easing, tweening, etc.), con un nombre u otro, aplican a animación convencional.

Ópalo Reputación  por el excelente contenido.



     

¡Visita mis galerías de Tumblr y DeviantArt!

#3 Re: Tutorial: Animaciones el Mar Oct 25, 2016 1:35 am

Reputación del mensaje :100% (1 voto)

Tomate

avatar
Más allá de tu conocimiento sobre estos aspectos, valoro sobremanera tu buena intención de ayudar y la majestuosa cantidad de tiempo que has dedicado a tu publicación para compartirlo de la manera más adecuada, ordenada, ilustrada y eficientemente posible. ¡Es una delicia! ¡Es un trabajo impecable digno de alabanza! Ópalo Aplaudiendo Ópalo Aplaudiendo Ópalo Reputación Ópalo Reputación Ópalo Hachimaki Ópalo Hachimaki

En verdad, este tutorial es una de esas cosas "obligadas a mirar y leer" si quieres mejorar tu manejo con el programa. Sólo tengo elogios y agradecimientos para tí. Ópalo Contento

#4 Re: Tutorial: Animaciones el Mar Oct 25, 2016 4:47 am

Brrt

avatar
Me ha gustado mucho este tutorial, era algo que yo queria saber hace un tiempo atras como sacarle el jugo de esto Ópalo Gato de verdad muchas gracias, tome su Ópalo Reputación

#5 Re: Tutorial: Animaciones el Mar Oct 25, 2016 6:17 pm

Natalie

avatar
Mágnifico tutorial, ¡justo lo que necesitaba! Me pasaba eso, que solo las ponia frame x frame y se quedaban muy sosas... o no conseguía ponerlas en tamaño grande Opalo Triste

Pero tengo una duda, ¿tweening es autocompletar?

Lo he leido super despacito y memorizando cada cosa que explicabas, me ha venido super bien! Aplicaré los conceptos de easing, piel de cebolla, fade out/in y blink en las animaciones, ¡seguro que quedarán 100 veces mejor! Ópalo Gato

¡Muchas gracias por el tutorial!  Ópalo Reputación

#6 Re: Tutorial: Animaciones el Mar Oct 25, 2016 6:37 pm

Faye Valentine

avatar
@Natalie: sí, creo que en la traducción del maker en español pone 'autocompletar'. Me alegra que te haya servido.

Gracias a todos por sus comentarios =)

#7 Re: Tutorial: Animaciones el Mar Oct 25, 2016 6:48 pm

Ledai

avatar
Waahhh, gracias enormes por el esfuerzo de hacer estos tutos, y de tan buena calidad!!! excelente *.* Voy a tomarme nota para mejorar mis animaciones ^_^!!!!!
Ópalo Reputación te lo mereces!




Entérate de todas las novedades

#8 Re: Tutorial: Animaciones el Miér Oct 26, 2016 12:49 am

Natalie

avatar
@Faye Valentine  jooo, no me sale bien!! Opalo Triste





Y eso que está a 400 de zoom... lo que ves dibujado es como un engine, es el azul del agua la animación, que como ves ni poniendola a 400 ni a centro me sale bien Ópalo Triste

#9 Re: Tutorial: Animaciones el Miér Oct 26, 2016 1:11 am

Reputación del mensaje :100% (1 voto)

Ledai

avatar
Fíjate donde pone Posición "Centro" y dale a "Pantalla" y prueba a ver si mejora.




Entérate de todas las novedades

#10 Re: Tutorial: Animaciones el Miér Oct 26, 2016 1:23 am

Natalie

avatar
Ostras, pues ha funcionado! Opalo Sorprendido  ¡Gracias  @Ledai!  Ópalo Reputación





Parece que voy a tener que coger otra animación o retocar esta para quitarle ese espacio en blanco... :S

#11 Re: Tutorial: Animaciones el Miér Oct 26, 2016 1:32 am

Brrt

avatar
@Natalie y si realizas una vectorizacion del ataque? puedes hacero estilo png, creo yo. nose

#12 Re: Tutorial: Animaciones el Miér Oct 26, 2016 1:35 am

Reputación del mensaje :100% (1 voto)

Faye Valentine

avatar
@Natalie escribió:Ostras, pues ha funcionado! Opalo Sorprendido  ¡Gracias  @Ledai!  Ópalo Reputación





Parece que voy a tener que coger otra animación o retocar esta para quitarle ese espacio en blanco... :S

@Natalie:
Recuerda las coordenadas X y Y. Utiliza la herramienta de Lote de Celdas (o como sea que se llame en la traducción del español del XP xD es la que está debajo de Autocompletar), y coloca la Y en algo así como 192. Eso debería bastar. Si no, prueba bajándole un poco más hasta tenerla bien centrada.

Contenido patrocinado


Ver el tema anterior Ver el tema siguiente Volver arriba  Mensaje [Página 1 de 1.]

Permisos de este foro:
No puedes responder a temas en este foro.