101Level - Foro

Lección III: Animación y Spriting I

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado DevilEvil

  • *
  • *
  • 2.406
  • 599
  • Actividad:
    0%
  • Sexo: Masculino
  • ~The Evil One~
Lección III: Animación y Spriting I
« en: 28 de Noviembre de 2011, 01:31 »
Lección III: Animación y sprites
Profesor:
DevilEvil

Llegados a este punto, debemos comenzar a relacionar todo lo aprendido hasta ahora para tener una base sólida en la que empezar a aprender de verdad. Hasta ahora, tenemos todos los materiales básicos que usaremos durante toda nuestra experiencia como spriters. Además, poseemos conocimientos básicos de los conceptos generales del spriting y sus componentes. Hemos entrado en contacto con las imágenes bmp de 8 bits y con las tablas de colores (con las que ya sabemos trabajar). Deberemos tomarnos muy en serio esta lección, pues del grado C, supone la lección principal y es necesario superarla con eficacia. Aquí dejaremos los conceptos básicos para empezar, por primera vez, a trabajar seriamente con sprites.

Contenidos:
  • Sprites en Ragnarok Online
  • Edición de sprites
  • Sprites y paletas - Recolores
  • Sprites y acts
  • Tipos de sprites en cuanto a función
  • Tipos de sprites en cuanto a diseño
  • Creación y extracción de un sprite
  • Reglas de animación

Material necesario:
  • SPR Conview
  • Paletas (.pal)
  • Frames (.bmp/8bits)



Sprites en Ragnarok Online

En Ragnarok Online, los sprites son la base gráfica de todos los NPCs, cuerpos, cabezas, armas, escudos, objetos, y monstruos (a excepción de aquellos que usan el formato 3D *.GR2). Respecto a los sprites oficiales, todos los tipos mencionados anteriormente son sprites de 8 bits, los convencionales. Estos sprites están formados por imágenes bmp de 8 bits / 256 colores. En la lección anterior hemos trabajado con estas imágenes y con sus tablas de colores, por lo que no debería sonarnos raro el concepto de sprite que estamos explicando.

El sprite en Ragnarok Online es único por diseño salvo contadas excepciones (por ejemplo, el monstruo Hydra posee dos sprites, el sprite del cuerpo del monstruo, y el sprite del proyectil al atacar). No es absurdo mencionar esto, pues debemos saber que esto se da en Ragnarok Online pero no ocurre lo mismo en otros casos, como en Arcturus, donde los diseños, por lo general, están formados por múltiples sprites.

Por lo general, un sprite en Ragnarok Online, contiene varios frames (aunque puede darse el caso de que esté formado de una sola imagen, como muchos NPCs). Los frames que suele contener suelen ser de un solo diseño, como puede ser un cuerpo o un gorro, pero con varias direcciones. En algunas ocasiones tiene varios frames de la misma dirección dado que en esa dirección tiene lugar una o más animaciones. Cada tipo de sprite suele tener diferentes grupos de frames, que luego explicaremos con detalle.
Por último, aunque no profundizaremos ahora en este campo, debemos mencionar que en RO podemos trabajar con otro tipo de sprites más avanzados aunque más complejos que los convencionales: los sprites de 32 bits (formados a partir de imágenes TGA). Su principal ventaja, como vemos en la imagen anterior, es que permiten aplicar zonas de semitransparencia libremente, con la opacidad deseada.



Edición de sprites

Los sprites generalmente se editan usando SPR Conview. Esto es porque generalmente trabajamos con sprites convencionales, de 8 bits. Sin embargo, a veces trabajaremos con sprites de 32 bits o bien sprites con estructuras diferentes que nos impedirán usar SPR Conview, dado que es una herramienta poco potente. En estos casos, para limitarnos a unos pocos programas en lugar de usar más de los necesarios, utilizaremos siempre ActOR (1 ó 2) cuando encontremos sprites diferentes a aquellos con los que normalmente trabajaremos. A pesar de que ActOR sea una herramienta orientada a la edición de acts, también es un potente editor de sprites. Permite la formación de sprites a partir de imágenes, al igual que SPR Conview, sin embargo, en ActOR debemos insertar imagen por imagen.

Dejando de lado ActOR, nos centraremos en SPR Conview. Hay dos funciones básicas que serán las que más usemos.


Estas funciones son las que corresponden al menú "Convert" (convertir). Podemos convertir de Sprite a BMPs, o de BMPs a Sprite. Es decir, desfragmentar sprites en imágenes, o construir sprites a partir de una serie de imágenes. Imágenes y sprites son conceptos muy cercanos. Si una imagen es un bombón, un sprite es una bolsa con muchos bombones, y el act será la persona que coja los bombones y los ordene apropiadamente en una caja.

En la imagen vemos abierta la ventana de la función SPR to BMPs. En la primera casilla de entrada, pinchamos en Browse y seleccionamos el sprite que queremos abrir (extraer todos sus bmps). La segunda entrada podemos rellenarla o dejarla en blanco (eso significa que la ruta de salida donde se guardarán las imágenes del sprite será la misma que el directorio donde se encuentre dicho sprite). Le daremos al botón convert para finalmente convertir el sprite el bmps. El recuadro blanco nos informará si todo ha salido correctamente o si, de lo contrario, ha habido un error. Por lo general, los errores suelen deberse a errores de formato. No podemos usar esta función con sprites cuyas estructuras sean diferentes a las soportadas por SPR Conview. Aunque los sprites oficiales no deberán de dar ningún problema con esta función.


La segunda función, la más interesante para los spriters, es la función que permite convertir nuestros frames en sprites. Debemos tener cuidado con el formato (8 bits/256 colores) y con la paleta (todos los frames deben tener la misma paleta que el primer frame, dado que si no es así, puede que una vez formado el sprite, al aplicarse la paleta del primer frame sobre todas las demás, resulte que algunos frames presenten un desorden en los colores).

El procedimiento en sí es sencillo, tan solo debemos añadir todos los frames (con el botón Add) del sprite. Sería bueno añadirlos todos de una sola selección, asegurándonos que previamente estuvieran ordenados por el nombre. Es importante tener los frames en orden, porque dificultaría enormemente el trabajo posterior con el act. Debemos asegurarnos que estén todos en orden, y si no lo están, usaremos los botones de la derecha que nos ayudan a cambiar la posición jerárquica de los frames. Podemos también quitar aquellos frames no deseados. Si son más de uno, podemos seleccionarlos en el recuadro blanco y pulsar en Remove.

La casilla de abajo es para localizar la ruta de salida del sprite formado y el nombre que queremos que tenga. Podemos sobreescribir otro sprite, o especificar solamente la ruta de guardado.

Es importante mencionar la casilla Encode. Por lo general, la desactivamos para sprites con más de un frame para evitar un común error que ya fue mencionado en Designer's Vademecum. Citamos el error:
Citar
FRAME MESS UP

A veces al contruir un sprite con SPR Conview mediante la función “Bmp to SPR” tenemos este tipo de error. Al guardar el conjunto de bmps como un sprite, abrimos el sprite y encontramos los frames desfigurados.

Síntomas: Frames desfigurados.
Causas: Desconocidas. Se suele referir a las causas como a las diferencias entre proporciones de los frames.
Tratamiento: Para corregirlo, debemos desactivar la opción “encode” cuando estamos en la ventana de la función de conversión “Bmp to SPR”.

Finalmente, le damos a Convert para construir nuestro sprite. Los errores aquí son siempre de formato, en caso de que los haya en el recuadro blanco.



Sprites y paletas - Recolores

En la lección anterior aprendimos cómo crear una paleta de colores a partir de una imagen de referencia del sprite. Y aquí es cuando aplicaremos la paleta que hemos creado. En primer lugar, abrimos el sprite que deseamos recolorear, con SPR Conview (podemos abrirlo desde File > Open, o bien, arrastrando el sprite a la ventana del programa). Naturalmente, es conveniente que se trate del mismo sprite del que hemos extraído la imagen de referencia, dado que las probabilidades de que el recolor sea gráficamente apropiado son muy bajas de no ser así.

Tendremos que seguir la siguiente función para abrir nuestra paleta con SPR Conview:


Una vez hayamos pinchado en la función "Open Palette", escogeremos la paleta que hemos creado para nuestro sprite. Una vez lo hayamos hecho, debemos comprobar que todos los frames del sprite se ven correctamente con esta paleta:


Si todo es correcto, procedemos a guardar la paleta:


Sin embargo, todo el proceso aquí seguido es el ideal. Es posible que durante nuestra experiencia en el spriting nos surjan complicaciones. En teoría, si seguimos las pautas aquí seguidas, como son:
  • Frames de formato BMP 8 bits/256 colores (profundizaremos en futuras lecciones de grado superior la realización de sprites con frames de formato TGA)
  • Paleta de colores común para todos los frames del sprite
  • Los colores recoloreados deben ser los mismos para todos los frames del sprite (es decir, no variar de colores una misma parte de un diseño en cada una de las direcciones, sino que debemos usar siempre el mismo color para el mismo objeto que forma parte del diseño del sprite. Por ejemplo, unos zapatos deben estar dibujados con el mismo color y tonalidades en una dirección como en otra)
  • El tamaño de los frames no debe ser excesivamente mayor en relación con los demás sprites de RO, dado que podemos tener un error. Para solucionarlo, debemos fraccionar el/los frame/s (profundizaremos en este proceso en futuras lecciones de grado superior).


Sprites y acts

Al menos en lo que a RO se refiere, los sprites y los acts son hermanos, no pueden funcionar independientes el uno del otro. Por eso, cuando abrimos un sprite o un act con ActOR (el 1 aparentemente abre sprites, el 2 aparentemente abre acts, pero en última instancia, ambos abren spr&act), se abren ambos archivos. De lo contrario, no podríamos trabajar correctamente con este programa. Ambos archivos deben tener el mismo nombre y encontrarse en la misma ruta para ser abiertos conjuntamente por ActOR.


Según el tipo de sprites, encontramos diferentes acciones en su archivo act complementario. En la siguiente lección explicamos el funcionamiento de estas acciones para cada tipo de sprite con detalle.

Muchas veces nos dicen que debemos usar, para sprites semejantes, acts semejantes. Y esto tiene su explicación. La principal relación que debe cumplirse para que podamos usar el act de otro sprite para un nuevo sprite es que tengan tamaños similares para cada uno de los frames. Es decir, que el tamaño (anchura x altura) del frame 1 del sprite 1 sea similar o igual al tamaño del frame 1 del sprite 2, y así con todos los demás frames. De no ser así, tendremos que corregir los tamaños o bien cambiando manualmente el tamaño de los frames que no coinciden, o bien manualmente diseñar el act para el nuevo sprite (esta última opción resulta mucho más tediosa en realidad, aunque más exacta). Respecto a la segunda relación, y fundamental para que funcione, es que el tipo de sprite sea el mismo. Es decir, no podemos usar el act de un monstruo para el sprite de un equipable, eso jamás. No funcionaría y es de sentido común que en nada se parecen. En lo que respecta a monstruos, debemos tener en cuenta que algunos son también mascotas. No pasa nada si hacemos un monstruo nuevo que no sea una mascota (por ejemplo, una variante de poring) y le aplicamos el act del poring mascota, pero es más apropiado no hacerlo. Por ello, debemos ver el número de acciones que tiene (en la lección siguiente estudiaremos el número y la función de todas las acciones para cada tipo de sprite).



Tipos de sprites en cuanto a función

Los sprites se pueden clasificar, en cuanto a función, en las siguientes categorías:

Tipo de spriteFunción
HeadgearDentro de esta categoría, encontramos tres tipos: Up headgear, mid headgear, y low headgear. La principal diferencia entre los Up headgear y los mid-low headgears, es que los de arriba, por lo general, poseen 5 direcciones, mientras que los mid-low headgears suelen poseer solo 3 direcciones visibles. Esto de sebe a que si el mid o low headgear está presente en la cara (como pueden ser unas gafas, una máscara o algo en la boca), solo se verán las direcciones frontal, diagonal izquierda frontal y perfil izquierdo. Son equipables y están directamente sobre el personaje, por lo que el aspecto de diseño se convierte aquí en el más importante y es donde más cuidado deberemos tener.
InventarioEn esta categoría entran todos aquellos objetos de inventario, independientemente de que sean equipables, usables, o misceláneos. Están formados por un solo frame. El sprite no es la imagen que aparece en el inventario, sino la imagen que aparece cuando lo seleccionar o lo tiras al suelo. Hay por lo general dos tipos de acts usados en RO para este tipo de sprites. Un act de aproximadamente 108 bytes que hace que el sprite se vea en el suelo con el tamaño normal de la imagen, y otro act cercano a 1 kb que hace que el sprite se vea en el suelo con la imagen aumentada. Dependiendo de la naturaleza de nuestro objeto, si queremos resaltarlo y darle importancia, quizá debamos hacer que se vea aumentado en el suelo.
MontruosAquí la función del sprite es de hacer de enemigo. El act será por lo general simple (a excepción de las mascotas), pues solo tendrá las acciones: stand, attack, receive attack, death. Por lo general, están formados de aproximadamente 50~80 frames, aunque depende mucho del propio diseño. Será fácil reconocerlos dado que no hay muchos sprites que suelan tener ese rango de número de imágenes (a excepción de trajes decorativos y headgears detalladamente animados)
Armas y escudosSu función es la de aparecer cuando nuestro personaje ataca o se encuentra en posición de lucha. Su complejidad no reside en su diseño, pues están formados de aproximadamente 7 frames sencillos y por lo general pequeños. Más bien, lo complicado es preparar el diseño para cada tipo de job y para cada sexo. La daga que usa un asesino hombre no es la misma que usa un arquero ni la misma que usa una asesina, debido a ello el act y muchas veces el diseño son diferentes, aunque se siga tratando de la misma arma. Una misma arma equipable por 3 jobs debe tener, 6 acts y 6 sprites, uno para cada job y sexo. Todo lo mencionado también se aplica a escudos.
NPCsSu función es muy sencilla, y el diseño es meramente decorativo. Poseen una sola acción, la de estar ahí. Por lo general poseen dos frames, uno frontal y otro de espaldas. Sin embargo, algunos de ellos están animados e incluso se mueven, por lo que aumenta considerablemente el número de frames. En aquellos que se mueven, el act requiere también una acción de movimiento.
CabellosPoseen por lo general 15 frames, a excepción de aquellos animados. Es importante, a la hora de diseñarlos, hacer que todas las visiones queden bien ajustadas al cuerpo, y habrá que ser cuidadoso con el act. Un ligero error de 1 ó 2 pixels podría estropear toda la estética y funcionalidad del diseño.
CuerposSon los diseños más grandes en cuanto a número de frames a excepción de cuando son meramente decorativos. El número de frames es aproximadamente 116~120. A la hora de diseñarlos, dada su dificultad tanto en dibujo como en act, hay que hacerlo sobre la base de un diseño ya existente, y así evitar futuras complicaciones con el act. Basta con tener una sola complicación con el act para abandonar el sprite por la dificultad que plantea. Si con los cabellos debiamos ser cuidadosos en seguir la misma estructura de los cabellos oficiales, en el caso de los cuerpos debemos seguir esta filosofía a rajatabla. No se trata de coger una imagen y ponerse a dibujar un traje, hay que pensar mucho de cara al futuro cuando empecemos nuestro traje. También, a la hora de diseñarlo, debemos tener en cuenta el tipo de arma que usará. Si queremos que use arcos, debemos seguir la estructura estética de los jobs de arco para no tener que diseñar nuevas armas (acts y sprites) exclusivas para él. Por ello, debemos fijarnos en tres puntos: altura del job, manos del job (para coincidir con las armas) y cuello del job (para coincidir con las cabezas). En cuanto a diseño, podemos hacerlo todo lo diferente y original que deseemos.
OtrosDesde emoticonos y animaciones hasta la máquina tragaperras. Todos estos sprites forman parte de animaciones del propio juego y debemos adaptarnos a su misma estructura si queremos cambiarlos. No podemos cambiar el act y los tamaños a nuestro gusto, debemos tener cuidado con preservar la estructura para evitar futuros errores.



Tipos de sprites en cuanto a diseño

Tipo de spriteDiseño
HeadgearEl diseño de un headgear, sea low, mid o up, tiene que seguir muy cuidadosamente la estética del juego, pues por sí mismo se encontrará encima de otro sprite (cabello y cuerpo). Por ello, en la gran mayoría de las ocasiones y preferiblemente en todas las ocasiones deberemos usar los colores comunes de Gravity. Además de ello, a la hora de diseñarlo, preferiblemente deberíamos llevar con nosotros la referencia de cabellos oficiales, para llevar continuamente un control de los tamaños de altura y anchura.
InventarioPara este tipo de sprites, el diseño es muy sencillo, dado que es siempre igual. Necesitaremos la base de items de inventario, de 24x24. El diseño en sí puede tener ciertas características comunes que veremos más adelante cuando entremos en las lecciones de pixeling. Ante todo, debe ser bien visible, por lo que usaremos un contraste detallado en los bordes, oscureciéndolos frente a los colores interiores del diseño.
MontruosAunque sean muchos frames, debemos procurar hacer un diseño ligero, detallar solo aquellas partes que resaltan (como podrían ser la cara, el arma, etc.). Todas las partes de sombra, secundarias, etc. pueden ser detalladas rápidamente, sin profundizar mucho. Dos o tres tonalidades bien distribuidas pero de forma rápida podrían diseñar la mayor parte del cuerpo. En las partes principales dedicaremos tiempo al detalle. Dependiendo del tipo de diseño que estemos haciendo, podemos usar los colores de Gravity u otros colores más o menos saturados, más o menos brillantes. Todo a nuestra elección, pero debe quedar en consonancia con el juego. Recordemos que si variamos la saturación, es porque el diseño lo exige, no porque nos parezca a nosotros más bonito (un ejemplo sería diseñar un color más saturado para la textura del oro o el color del fuego).
Armas y escudosNo requieren un detalle exagerado, pero si deben verse claramente. Por ello, este tipo de diseños deben tener un buen contraste, y poseer preferiblemente los colores de gravity dada la proximidad a los sprites oficiales (monstruos, cabeza y cuerpo).
NPCsEn estos sprites podemos dedicar tiempo al detalle, de hecho es preferible, ya que su presencia es principalmente decorativa en la mayoría de los casos (me refiero al sprite, no al script obviamente). Podemos probar colores que no sean los comunes en RO, pero debemos tener cuidado a la hora de escogerlos no sea que nos pasemos en brillo o en saturación. La estética debe ser similar a la de los NPCs oficiales, no se requiere contraste alto.
CabellosDebe poseer la misma estética que los peinados oficiales y los colores comunes de Gravity son necesarios. Debido a que muchos diseñadores han realizado paletas para los cabellos modificando el color marrón oficial, se recomienda, a la hora de hacer un cabello personalizado, usar el color marrón oficial. Ya luego podremos aplicarle las paletas que deseemos, pero el sprite original debería estar en tonalidad marrón. Es importante también que las cabezas no sean demasiado grandes. Es verdad que hay diseños de cabellos personalizados que no cumplen con este precepto, pero es que luego resultará que al equiparse cualquier gorro, gráficamente tendrá un aspecto desequilibrado.
CuerposNo solo la estética sino que la propia estructura, tamaño y número de frames debe coincidir con el sprite oficial del que partimos. Colores de Gravity son obligatorios, ya que luego podremos diseñar todos los tintes que queramos para nuestro traje personalizado. Debemos tener cuidado también con el diseño general del cuerpo. Debe ser en cuanto a anchura parecido a los diseños oficiales de los trajes. También la proporción de piernas-torso debe ser la adecuada. Recordemos que en RO las piernas son considerablemente mayores que el torso, que resulta ser más pequeño de lo que debería en relación con el resto del cuerpo.
OtrosLa estética la pone el sprite en cuestión que estamos modificando. Si modificamos la máquina tragaperra, la estética que sigamos a la hora de diseñar una nueva debe ser parecida a la anterior. Se recomienda el uso de los colores de Gravity, pero se puede variar y ser mucho más flexible.



Creación y extracción de un sprite

<a href="http://www.youtube.com/watch?v=kUieLLXA5X0" target="_blank">http://www.youtube.com/watch?v=kUieLLXA5X0</a>



Reglas de animación

Cualquiera que previamente haya practicado animación, probablemente haya oído hablar de los 12 principios de animación de Disney. Conocerlos nos será muy útil, pues convertiremos la animación (algo que quizá veamos muy lejos de nuestras capacidades) en algo sencillo y relativamente rápido de conseguir.

Os convendría leer esta página: http://www.xsiforum.com/forum/index.php?topic=5444.0

Yo tendría muy en cuenta los principios 8, 9 y 11, ya que son probablemente los que más vida le den a los sprites en RO.
« última modificación: 07 de Agosto de 2013, 11:35 por DevilEvil »


 

Lección I: Introducción al Spriting y Pixel Art

Iniciado por DevilEvil

Respuestas: 0
Vistas: 6857
Último mensaje 23 de Octubre de 2011, 18:25
por DevilEvil
[Información] Academia de Spriting y Pixel Art

Iniciado por DevilEvil

Respuestas: 2
Vistas: 3408
Último mensaje 07 de Agosto de 2013, 11:34
por DevilEvil
Lección V: Line Art y Antialiasing

Iniciado por DevilEvil

Respuestas: 0
Vistas: 2341
Último mensaje 07 de Agosto de 2013, 11:31
por DevilEvil