101Level - Foro

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

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

Desconectado DevilEvil

  • *
  • *
  • 2.406
  • 599
  • Actividad:
    0%
  • Sexo: Masculino
  • ~The Evil One~
Lección I: Introducción al Spriting y Pixel Art
« en: 23 de Octubre de 2011, 18:25 »
Lección I: Introducción al Spriting y Pixel Art
Profesor: DevilEvil

Bienvenidos a la primera lección introductoria de Spriting y Pixel art. En ella estableceremos las bases prácticas y teóricas del Pixel Art aplicado al Ragnarok, comenzando desde las ideas más básicas y la adquisición de los materiales fundamentales para el diseño de sprites en RO.

Contenidos:
  • El Pixel Art
  • Terminología básica
  • Componentes de un diseño completo
  • Control de cada componente
  • Herramientas fundamentales
  • Normas generales de diseño
  • Metodología principal de diseño

Material necesario:
  • Editor de imágenes (Recomendado: GraphicsGale)
  • Paleta de colores comunes
  • Tabla de colores comunes
  • Tabla de todos los colores de RO
  • Editor de sprites (Recomendado: SPR Conview)
  • Previsualizador de sprites
  • ActOR 1 y ActOR 2
  • Extractor de GRF
  • Imágenes base
  • Imágenes referenciales



El Pixel Art
El Pixel art es una de las ramas del arte digital que consiste en la creación de imágenes pixel por pixel. Nació por necesidad, y se empezó a desarrollar en una época donde no había otro tipo de arte digital para la creación de imágenes. Por ello, el inicio del Pixel Art y su época dorada coinciden con el inicio de las computadoras, videojuegos, etc. Sin embargo, debemos tener en cuenta, que aunque lo que vamos a aprender aquí es Pixel Art, existe una gran diferencia con lo que fue en el pasado. La técnica del Pixel Art ha ido desarrollandose a lo largo de los años, así como su estética. A pesar de que sigamos teniendo que diseñar pixel por pixel, la variedad de técnicas y formas de pixelar que tenemos hoy es enormemente variada.

El píxel es la unidad mínima de una imagen digital. En las imágenes bitmap encontramos una matriz de puntos, donde cada uno de esos puntos es un pixel. Por ello, en el Pixel Art, trabajaremos con imágenes bitmap.

Monkey Island




Terminología básica

Como en todos los campos del conocimiento, el Spriting y Pixel Art posee su propia terminología, que hay que conocer perfectamente antes de llegar a la práctica. Conviene retener todas estas definiciones para el futuro.

Imagen bitmap: Es un formato de imagen (.BMP) propio de MS Paint, también conocido como mapa de bits. Consiste en una matriz formada por puntos, donde cada punto es un píxel y lleva la información de un color. Pueden ser imágenes desde 1 bit hasta 32 bits (en RO usaremos solo bmps de 8 y 24 bits). Los sprites se constituyen, en su gran mayoría, por imágenes de 8 bits (a excepción de los llamados "sprites avanzados", que son los sprites formados por imágenes targa, aunque teneis que tener en cuenta que no son, en realidad, sprites, solo tienen ese formato, pero técnicamente no son sprites). Los bmps de 8 bits están constituidos por 256 colores.

Pixel Art: Es una de las ramas del arte digital, donde las imágenes son diseñadas a nivel de píxel. En esta rama del diseño, todo se hace píxel por píxel a mano. Cualquier píxel se dibuja por una razón, y no hay maneras rápidas o atajos que consigan un resultado ideal. Por esta razón, el diseño de cada imagen suele exigir mucho tiempo y esfuerzo. El Pixel art por lo general se divide en bloques dependiendo de su perspectiva: Isométrico/No-isométrico

El isométrico es una forma de perspectiva en la que todos los ángulos son de 30º. Si en un espacio ponemos los 3 ejes X, Y, Z (simulando profundidad), veremos que cada ángulo se separa por 30º. Por ello, en el Pixel Art isométrico debemos trabajar sobre esos ángulos (no tiene porque ser necesariamente en líneas rectas aunque sea esa la estética por lo general. Se pueden usar curvas, pero cada lado del objeto debe estar orientado a los planos X, Y, Z). Dado que no podemos hacer ángulos exactos de 30º sin que nos salga una línea irregular, como podeis ver en la imagen, debemos usar un ángulo de 26,56º. Esto nos permitirá hacer líneas regulares de dos píxeles de anchura por cada píxel de altura.


Paleta de colores: Consiste en un set de colores atribuido a una imagen digital. El formato usado es el de Microsoft Palette (.PAL). Trabajaremos con ellas con mucha frecuencia, debido a que las imágenes con las que trabajamos (bitmaps de 8 bits) tienen una paleta de colores. Ragnarok tiene una paleta de colores comunes a la que podemos aferrarnos o editar libremente si queremos cambiar un color por otro o añadir un nuevo gradiente de colores que queramos usar. Si se da el caso de que tenemos que elegir nuestros propios colores, el procedimiento se complica y hay que seguir una serie de pautas que mencionaremos posteriormente.

Frame: En este contexto, un frame es cada una de las imágenes que constituyen un sprite. Si un sprite está formado por 10 imágenes, decimos que tiene 10 frames.

Sprite: Hace referencia a cualquier mapa de bits de pequeño tamaño dibujado mediante Pixel Art. Posteriormente profundizaremos en los sprites, explicando más sobre lo que se entiende por sprite. En Ragnarok, se trata de un archivo que integra varias imágenes (tradicionalmente bmps de 8 bits) independientes que forman un solo conjunto. Desde los personajes hasta el propio cursor, pasando por monstruos, equipo y NPCs, son sprites. Los sprites guardan una estrecha relación con todos los demás componentes del diseño, en especial con la paleta de colores.

Sprite Sheet: Es la imagen en la que se compilan todos los frames que constituyen un sprite. Para montar el sprite, sin embargo, necesitas que cada frame esté separado, de modo que cada frame sea una imagen individual. Puedes diseñar todos los frames en una misma imagen y tener tu sprite sheet, pero no olvides despues dividir cada frame en una imagen individual.

Spriting: En Ragnarok, consiste en la creación de sprites a partir de un conjunto de imágenes. Suele ser confundido con el Pixel Art. El Pixel Art consiste en el diseño de las imágenes píxel a píxel, no en la creación de sprites.

Act: Es un archivo (.ACT) con una función fundamentalmente organizadora. En realidad es un script (aunque en ActOR podemos hacer una edición más visual y relativamente sencilla). Si el sprite fuera un puñado de ladrillos, el act es el albañil que los ordena, une y construye finalmente la casa. La casa no puede construirse sin los ladrillos, pero tampoco puede ser construida sin el albañil. Por sí solo, el act puede dar múltiples ediciones especiales sin tener que cambiar ninguna imagen del sprite. Aporta la localización de los frames (las imágenes que constituyen el sprite) en el juego, define la magnitud en ambos ejes de coordenadas, el color RGB y Alpha del frame, la rotación del frame, y si posee un efecto de espejo (imagen invertida horizontalmente). El act trabaja con acciones. Dentro de cada acción hay 8 direcciones, y cada dirección está constituida por una animación. Una animación puede estar o no estar constituida por varios frames. También podemos definir qué imagen aparece en cada dirección y momento de la animación y qué tipo de sprite es (hay dos tipos de sprites, los de 8 bits y los de 32 bits).

Recolor: Un recolor es lo que se conoce como un sprite al que le han aplicado una paleta de colores distinta de la original. Crear un recolor es, en realidad, crear una nueva paleta para un sprite ya finalizado.



Componentes de un diseño completo

Con diseño nos referimos al resultado final de la obra, y está formado por diversos elementos. El elemento base es el conjunto de frames (puede estar constituido por uno o más frames), que diseñaremos a partir de una idea o concepto. Los frames en conjunto se integran en un sprite, compartiendo todos ellos una paleta común (es más, si integras en un sprite frames con diferentes paletas, todos los frames adoptarán la misma paleta del primer frame del sprite). Una vez tengamos, por un lado, el sprite formado por frames con la misma paleta, tendremos que diseñar un act que lo ajuste a la finalidad que tiene. Si el sprite es un gorro, en el act tendremos que ajustar la posición del gorro a la cabeza. También podemos y a veces tendremos que definir qué frame sale en cada momento de la animación. Tenemos que asegurarnos que todas las acciones del act, y con ellas las 8 animaciones correspondientes, se encuentren bien configuradas y ajustadas. Finalmente, con todos los elementos en conjunto, obtendremos el diseño final. En la imagen siguiente se muestra los elementos que forman la animación de movimiento de un sprite:

   

Cada uno de los componentes del diseño tiene todo un campo. Cuando hablamos del diseño de frames, hablamos de pixeling. Cuando hablamos de la creación de sprites, hablamos de spriting. Cuando hablamos de la edición de acts, hablamos de acting. Y cuando hablamos de la edición de la tabla de colores, hablamos de paletting. En las siguientes lecciones veremos con profundidad cada uno de los campos de los componentes de un diseño.



Control de cada componente

Los componentes mencionados anteriormente se formar de modos distintos, y su modo de edición es exclusivo para cada uno. A la hora de diseñar los frames, al ser simples imágenes bitmap de 8 bits/256 colores, simplemente tendremos que utilizar un editor de imágenes. La forma de diseño será el de Pixel Art. Tendremos que diseñar nuestras imágenes píxel por píxel, siguiendo unas técnicas de perspectiva y sombreado características del Ragnarok que aprenderemos en lecciones posteriores. También necesitaremos trabajar con la paleta de colores. Podemos usar cualquier editor de imágenes que permita modificar la paleta de colores (por ejemplo, Adobe Photoshop). Diseñaremos colores acordes con la estética de Ragnarok, sin ser extremadamente saturados y con 8 tonalidades por cada color. Hay que llevar siempre consigo unas imágenes referenciales a la hora de diseñar, para tener una idea más clara del diseño que queremos hacer y las proporciones que debe adoptar. Usaremos un programa de creación de sprites para formar nuestro sprite a partir de las imágenes (para el spriting tradicional, usaremos el programa SPR Conview).

Para la edición de acts, tendremos que partir de un act creado anteriormente (nosotros no creamos acts, editamos los ya creados para que se ajusten a los nuevos sprites). Para modificar el act original, usaremos dos programas, o al menos uno de ellos. Estos programas son ActOR1 y ActOR2. Este último suele ser más fácil para todas las funciones del act a excepción del sistema de copia de acciones y direcciones, donde el sistema de ActOR1 es, además de intuitivo, más profesional.

También es digno de mención que SPR Conview será un programa que no usaremos para los sprites avanzados de 32 bits. En su lugar, usaremos ActOR (uno de las dos versiones del programa). El procedimiento básico, sin embargo, seguirá siendo el mismo.



Herramientas fundamentales

Hay una serie de herramientas fundamentales que son obligatorias o bien altamente recomendadas. Nuestra intención es poseer las mejores herramientas desde el principio para acelerar significativamente el proceso de aprendizaje.

Editor de imágenes. El programa recomendado es GraphicsGale, al ser un potente editor de imágenes orientado al diseño de sprites y pixel art. Si es un programa que os resulta complicado, se recomienda directamente el uso de MS Paint (que viene de serie con Windows). Puede haberse ganado la fama de ser un editor de imágenes muy poco potente, pero para el pixel art no necesitamos mucho más. GraphicsGale es recomendado por sus diferentes pinceles, su matriz que muestra perfectamente cada pixel y su creador de curvas (que facilita enormemente la creación de diseños con curvas en RO). También puede usarse el Photoshop, pero se trata de una herramienta muy potente para un diseño muy simple.

Paleta de colores comunes. Se trata del archivo .pal que contiene la tabla de colores comunes de RO. Si queremos usar los colores comunes de RO en una imagen bmp de 8 bits, tenemos que aplicar previamente esta paleta (en otra lección explicaremos como aplicar una paleta a un bmp de 8 bits). Para la mayoría de sprites, se aplica esta paleta, ya que nos asegura que usaremos colores acordes al diseño del juego.

Tabla de colores comunes. Si usamos un programa cono GraphicsGale, no necesitaremos esto. En GraphicsGale tenemos una ventana en la que se muestran todos los colores de la paleta de la imagen, de modo que si hemos aplicado la paleta de colores comunes de RO a una imagen, la podremos ver en GraphicsGale directamente, sin necesidad de tener una imagen al lado con todos los colores de la paleta. Sin embargo, si usamos MS Paint, tendremos que copiar dicha imagen y pegarla en la imagen del frame que estamos diseñando. Es caso de que optemos por un editor que no muestre la tabla de colores para copiar los colores directamente de ella, necesitaremos esta imagen que muestra todos los colores. Es una imagen bmp de 8 bits que solo funciona en imágenes bmp 8 bits donde previamente se haya aplicado la paleta de colores comunes de RO. En la imagen se muestra cada caso.
(click mostrar/ocultar)

Tabla de todos los colores de RO. Es una tabla de colores referencial, no como la anterior, y muestra todos los gradientes encontrados en los sprites de RO que no pertenecen a los colores comunes. En ella, podemos copiar algunos colores para meterlos en una tabla de colores personalizada. Si necesitamos un rosa o un negro, en lugar de crearlos nosotros mismos, podemos usar los que aparecen en algunos pocos sprites oficiales. No tenemos necesidad de buscar esos sprites y extraer la paleta, es suficiente con copiarla de esta tabla de colores. (Nota: dicha tabla fue confeccionada por Usako)

Editor de sprites. El editor de sprites más recomendado es SPR Conview. Es una herramienta muy práctica y sencilla que sirve para trabajar sobre casi todos los sprites. En inútil para los sprites de 32 bits, pero en pocas ocasiones trabajaremos sobre ese tipo de sprites.

Previsualizador de sprites. Es una herramienta creada por Borf para previsualizar sprites sin necesidad de abrirlos, tal y como veriamos una imagen normal en una carpeta sin necesidad de abrirla.

ActOR 1 y ActOR 2. Tanto ActOR 1 como ActOR 2 son dos programas fundamentales que tenemos que tener. Uno de ellos es mucho más potente en casi todo menos en el sistema de copia de direcciones y frames. En la mayor parte de las ocasiones, usaremos los dos programas a la vez.

Extractor de GRF. Cada uno puede usar el que prefiera, pero nosotros solo necesitamos extraer los archivos del GRF oficial, ya que muchos sprites oficiales pueden servirnos de referencia. Los primeros sprites que hagamos probablemente tengan referencias de los sprites oficiales. Un extractor de GRF válido podría ser GRF Tool. Es necesario para todo spriter tener este GRF extraído en una carpeta, de modo que tengamos fácil acceso a los sprites e imágenes del juego. Es fundamental para recolores, acts de referencia, y muchas otras situaciones comprometedoras relacionadas con los tamaños de los sprites del juego. Es común usar partes de ciertos sprites como base de referencia sobre las cuales después se aplicarán ligeros cambios a nuestro gusto para armonizarlo con nuestro diseño propio. Se deben usar muchas referencias antes de apresurarse a diseñar desde cero, porque lo más seguro es que el resultado sea un fracaso que nos podríamos ahorrar.

Imágenes base. Hay dos imágenes base que serán las que más usemos. Una de ellas es la base de imágenes de inventario, una imagen con fondo #FF00FF (magenta) de 24 x 24 px y primer color de la tabla de colores FF00FF (si este color ocupase otra posición en la tabla de colores, tendríamos un error gráfico en el juego, en el que el fondo del inventario desaparecería, por ello se recomienda siempre el uso de esta imagen). La otra imagen base es la imagen base de frames, puede ser o no ser útil, aunque la mayoría de las veces si lo será. Nos ahorra tener que crear una nueva imagen bmp y aplicarle la tabla de colores comunes.

Imágenes referenciales. Puede que en varias semanas o incluso meses no necesitemos ninguna referencia para nuestros sprites, recolores o tintes, pero actualmente sí. Para sprites de gorros, necesitamos la referencia de los peinados de RO. Para los tintes, necesitaremos la imagen de todos los jobs (los terceros todavía no incluidos), para saber cómo afecta cada tinte (cambio de gradientes de colores).



Normas generales de diseño

Profundizaremos en cada una de las particularidades de cada campo estudiado, pero hay una serie de normas generales que se tienen que acatar cuando trabajamos en diseños para RO.

  • Normas de pixeling:
    • Normas de la perspectiva: Dentro del Pixel Art, hay un bloque conocido como Pixel Art isométrico. Los sprites de Ragnarok pertenecen a este bloque, y tienen que tener una perspectiva 3D. Por otro lado, todos los diseños no son vistos de frente, sino desde una posición algo más alta, desde 35º ó 40º del suelo. Por otro lado, hay que tener en cuenta todas las direcciones y su inclinación. Lo esperado es que cada dirección esté separada una de la otra por 45º, sin embargo las direcciones diagonales están ligeramente inclinadas a las direcciones frontal y trasera, de modo que se separan de ellas 40º y de la dirección de perfil unos 50º aproximadamente. Y aún hay más, porque en RO, por conveniencia, la dirección de perfil está muy ligeramente inclinada a la dirección frontal, para que algunas características del diseño personaje sigan pudiendo ser vistas.
    • Normas de los bordes: Oscuros, esa es la palabra clave. En RO, todos los bordes son oscuros salvo necesarias excepciones (donde el diseño es tan pequeño que, de poner bordes, desaparecería el propio diseño. Donde no podemos encontrar ninguna excepción es en los diseños de imágenes de inventario. En esas imágenes, todos los bordes son oscuros (generalmente usan los séptimos y octavos tonos de un gradiente de color, estos son los tonos más oscuros). En ocasiones se usa incluso el negro. Esta característica se puede encontrar en la gran mayoría de diseños de Pixel Art, pero destaca en los diseños de RO. Muchas veces esta característica os puede garantizar un resultado más o menos aceptable, en caso de que los otros pasos hayan salido mal.
    • Normas del sombreado: El sombreado es una técnica que hay que conocer con profesionalidad fundamentalmente si queremos hacer buenos diseños. Todos los colores, en RO, están constituidos por uno o dos gradientes de color que en total representan 8 tonalidades del mismo color. Previamente al sombreado, coloreamos cada sector del diseño con el tono 4º y 5º, dependiendo de la iluminación del propio sector. Generalmente coloreamos con el 4º tono la parte izquierda del diseño y con el 5º tono la parte derecha. Posteriormente, definimos las zonas oscuras donde no llega la luz y los puntos de mayor iluminación, donde la luz incide con mayor fuerza. Los puntos iluminados tendrán los tonos 1º y 2º, y las zonas no iluminadas los tonos 7º y 8º. Los tonos 3º y 6º se repartirán por el frame donde la iluminación y el concepto del diseño lo exijan. Diseños mayores que el de un pequeño gorro deberían usar los 8 tonos de color siempre, dado que cuantos más tonos, mayor calidad tendrá el sombreado. Quizá no queramos siempre un sombreado extremadamente detallado (pues puede que no quede acorde con la estética de RO), pero conviene tenerlo detallado a quedarnos cortos en los tonos usados. Es mejor que nunca usemos menos que 5 tonos (dado que al menos dos ya serán usados en los bordes, solo nos quedarían 3 para el interior). Hay que tener en cuenta la posición del "sol" en RO. Se encuentra en la esquina superior izquierda, de modo que los puntos de máxima iluminación deben estar también ahí.
  • Normas de paletting:
    • Normas de la saturación: En RO hay que procurar, en la gran mayoría de los casos, usar colores insaturados, especialmente en las paletas. Existe la mala costumbre de pensar que las paletas saturadas son más bonitas que las insaturadas. Es cierto que el diseñador, mientras las diseña, puede verlas más bonitas que un color apagado e insaturado, pero cuando las implementas en el juego, verás que no quedan bien ni en el mapa, ni en el persona, ni en todo lo que es la estética propia del juego. Es un choque con la estética del juego que habría que evitar. Nunca hagáis paletas saturadas. Con los gorros ocurre algo similar, en contadas ocasiones necesitaréis de verdad usar colores saturados. Solo hay un tipo de diseño donde se aceptan, y no siempre: en las mobs. En algunas mobs, podemos sentir la necesidad de usar colores saturados, bien por añadirle algún efecto especial o bien porque lo exija el diseño conceptual de la propia mob.

    • Normas de los gradientes: A la hora de crear gradientes para un color, debemos tener en cuenta que nunca debemos pasarnos de los 8 tonos de color. El sombreado en RO nunca ha tenido un detalle de más de 8 tonalidades de color. Si de repente hacemos sombreados usando 12 tonalidades para un mismo color, estaríamos detallando más de la cuenta y probablemente eso no convenga. Podemos usar 1 o 2 gradientes para un color, pero los tonos dedicados a ese color no deben ser mayores que 8 ni menos que 5.
  • Normas de spriting:
    • Paleta de los frames: Todos los frames deben compartir la misma paleta.
    • Formato de los frames: Todos los frames deben ser, o todos bmps de 8 bits, o bien todos imágenes targa (.TGA).
    • Proporciones de los frames: Por seguridad, se recomienda que el tamaño de los frames no sea mayor que el mayor de los tamaños de los frames de la Mob Satan Morocc, tanto en altura como en anchura. Aunque no dará problemas a la hora de crear el sprite, sí tendremos problemas a la hora de verlo en el juego, ya que nos dará error. Si queremos un tamaño mayor, tenemos que hacer el frame completo y luego dividirlo en dos partes, para juntarlas luego en el act.



Metodología principal de diseño

En el siguiente vídeo se muestra la creación del diseño de unas gafas que podrán ser equipadas dentro del juego, basándonos en un concepto previo.

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



Links de interés
Acercamiento al Pixel Art
Introducción al Pixel Art
Herramientas que necesitas, herramientas que no necesitas
Crear un cubo isométrico
Crear un círculo en un diseño isométrico
Algunos ejemplos de objetos en pixel art
« última modificación: 07 de Agosto de 2013, 11:32 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
[Información] Temario de Spriting y Pixel Art

Iniciado por DevilEvil

Respuestas: 2
Vistas: 3039
Último mensaje 07 de Agosto de 2013, 11:22
por DevilEvil
Lección III: Animación y Spriting I

Iniciado por DevilEvil

Respuestas: 0
Vistas: 4899
Último mensaje 28 de Noviembre de 2011, 01:31
por DevilEvil