Introducción

¡Hola! Mi nombre es Hira Karmachela y esta es mi primera publicación. En esta ocasión, compartiré mi experiencia al hacer animación de sprites en bucle con Clip Studio Paint. Solía trabajar en proyectos de diseño gráfico para necesidades de juegos. A menudo, los juegos en los que trabajo tienen un estilo de 8 bits o comúnmente llamados juegos de píxeles.

 

Espero que esta publicación sea un consejo interesante para aquellos de ustedes que buscan formas de hacer pixel art usando CSP. Además, intentaremos animarlo al sprite en bucle.

¿Qué es la animación de Sprite en bucle?

Antes de comenzar la práctica, compartiré un poco de información sobre la definición de animación de sprites. En la industria del diseño gráfico o multimedia, el término sprite se refiere a una pequeña parte de una gran escena en forma de imágenes, tanto estáticas como animadas. Para las necesidades de animación, más específicamente llamada animación de sprites.

 

Prácticamente en la industria, la animación de sprites se usa a menudo para necesidades de medios interactivos, como juegos o programas de aplicación. La animación Sprite generalmente se aplica a los personajes del juego para que puedan moverse con varios gestos o como un efecto visual que respalda la escena o la interfaz de usuario (por ejemplo, iconos y botones).

 

Técnicamente, la animación de sprites se realiza cuadro por cuadro utilizando el principio de pose a pose y de frente. Por lo tanto, su uso suele ser bucles donde el cuadro final se conectará con el cuadro inicial para realizar movimientos interminables.

 

Por lo general, en los proyectos de juegos, uso la animación de sprites para hacer varios movimientos de personajes. Por ejemplo: movimientos ociosos, caminar, correr, atacar, defender, herir y morir. Cada movimiento es una secuencia que se empaquetará en un formato llamado hoja de sprites.

Preparando archivo para Pixel Art

¡OK! Empezamos desde la creación de un nuevo archivo. Seleccionamos el preajuste "Animación" para que el espacio de trabajo se organice de acuerdo con nuestras necesidades para hacer el sprite en bucle. Pixel art no requiere grandes dimensiones de lienzo, especialmente para las necesidades de sprites, el lienzo solo se llenará con objetos o personajes individuales. Por lo tanto, generalmente solo uso múltiplos de 32 píxeles para las dimensiones.

 

En este proyecto, hice un lienzo con tamaños W = 192 px y H = 192 px. Este tamaño es suficiente para hacer un gesto de carácter incluso con un espacio adicional para la cabeza.

 

Puede seguir la configuración que hice a continuación.

 

Después de hacer el lienzo, lo importante que debe prepararse a continuación es la "Cuadrícula", que es una línea imaginaria que realmente nos ayudará a organizar los píxeles para que formen una imagen.

 

El paso es entrar en el menú de Ver > Cuadrícula. Solo al marcarlo, verá líneas transversales y longitudinales que forman patrones de ajedrez en el lienzo.

 

 

Después de eso, vuelva al menú de Ver> Configuración de cuadrícula. Aparecerá la ventana de configuración de Grid. Aquí cambia Gap = 1 px y Number of divisions = 0. Luego verás un patrón de ajedrez con cuadrados más pequeños y apretados.

 

 

dibujar píxeles

Ahora estamos listos para dibujar u organizar píxeles para hacer un sprite. En este proyecto, crearé un personaje duende con movimiento de ataque. Antes de hacer una animación, por supuesto, primero debemos hacer el personaje.

 

Lo más importante al crear personajes animados es organizar las imágenes en el sistema de capas. Esto tiene como objetivo facilitar el proceso de animación, por lo que solo necesitamos volver a dibujar ciertas capas para hacer ciertas poses. Recuerde, la animación de sprites depende mucho del principio de pose a pose.

 

Aquí está la capa que hice para cada pose.

 

Haré esto fácil. Al principio solo necesitamos hacer una carpeta de capas con el nombre "pose_01". Más tarde podemos copiar esta carpeta para las próximas poses. A continuación, cree una capa para la primera parte del cuerpo. Será mejor que empecemos primero por la cabeza.

Al igual que las técnicas de dibujo en general, podemos empezar por hacer arte lineal. Afortunadamente, CSP tiene una herramienta que se puede usar para organizar píxeles. Use el tipo de "Marcador" "Pluma de puntos" tan fácilmente que cada trazo llene cuadros de cuadrícula con píxeles.

Luego, forma la cabeza del personaje que quieras organizando los píxeles. En este proyecto, hice un personaje duende con una vista de 3/4.

 

Por lo general, hago diferentes capas entre el arte lineal y el coloreado. Sin embargo, según mi experiencia en la creación de artes de píxeles, es más eficiente combinar todos los procesos en una sola capa. La simple separación de capas según la parte del cuerpo del personaje depende de las necesidades de animación.

 

Entonces, para colorear, simplemente organice el tono de color de tono a tinte de acuerdo con las necesidades de la capa.

 

Sistema de capas para animación

Luego, crea otras partes del cuerpo con capas separadas. Divido el cuerpo de este personaje duende en las siguientes secciones en capas secuencialmente de arriba a abajo: cabeza, mano izquierda, cuerpo, arma, mano derecha, pierna izquierda y pierna derecha.

 

El sistema de capas pretende facilitar el proceso de animación. Recuerde, actualmente solo tenemos una carpeta de capas para representar una pose. A continuación, necesitaremos otras poses para realizar una serie de movimientos. A través del sistema de capas, en lugar de volver a dibujar personajes para diferentes poses, solo necesitamos volver a dibujar las capas requeridas y simplemente copiar las otras capas sin cambiar la pose.

 

 

Preparación de la línea de tiempo

Si todas las partes del cuerpo están completas, intente verificar cada parte para que pueda unirse correctamente y formar una unidad corporal proporcional. A continuación, hacemos otras poses usando "pose_01" junto con el sistema de capas que se creó.

 

Antes, preparamos la línea de tiempo de antemano para el proceso de animación. El paso es entrar en el menú Ventana > Línea de tiempo. Luego, el panel Línea de tiempo aparecerá en la pantalla inferior.

 

A continuación, copie la Carpeta de capas "pose_01" yendo al menú Capa > Duplicar capa.

 

Luego, convierta la copia de la Carpeta de capas en Capa (Normal) yendo al menú Capa > Convertir capa. Aparecerá un cuadro de diálogo para cambiar el nombre de la capa. Cambia a "animating_pose_01". Ahora tenemos 1 celda para animar.

Mueva la capa "animating_pose_01" a la carpeta Animación (la Carpeta de capas que se crea automáticamente al crear un nuevo archivo con un ajuste preestablecido de animación; cada capa especificada en esta carpeta se considerará como una celda de animación).

 

Dentro de la carpeta Animación, encontraremos una capa vacía que ya existe. Seleccione la capa y luego elimínela.

 

Ahora tenemos que especificar la capa "animating_pose_01" como una celda de animación. En términos simples, podemos usar los íconos de apoyo en el panel Línea de tiempo. Seleccione el cuadro 1 en la línea de tiempo y luego haga clic en el icono "Especificar celdas" como se muestra a continuación. Aparecerá un cuadro de diálogo para confirmar, seleccione "animation_pose_01" y luego haga clic en Aceptar.

Pose a pose

Ahora, tenemos el fotograma clave inicial en nuestra animación. A continuación tenemos que hacer una segunda pose y así sucesivamente. El paso es copiar la carpeta de capas "pose_01" nuevamente y luego hacer doble clic en el nombre de la capa para cambiarle el nombre a "pose_02".

Seleccione Carpeta de capas "pose_01", luego cambie la opacidad al 50% para que sea transparente. Entonces, podemos hacer cambios en la pose en la carpeta de capas "pose_02".

 

Simplemente, lo que hago es cambiar algunos píxeles en ciertas capas de acuerdo con el movimiento previsto, para crear una nueva pose que sea sostenible con la pose anterior. Mientras tanto, no cambié la estructura de píxeles de las otras capas como la capa "cabeza" y solo cambié su posición para seguir la nueva pose.

 

Si la segunda pose está terminada, el siguiente paso es convertir la Carpeta de Capas "pose_02" a Capa (Normal: animating_pose_02). Luego se guardó en la carpeta Animación y se especificó como celda de animación. Para el proceso de especificación de cel, guardo animating_pose_02 en el cuadro 4. Es decir, doy una duración de aproximadamente 0,1 segundos para el primer cuadro clave (animating_pose_01) o igual a tres cuadros.

 

Realice los pasos anteriores para hacer la pose hasta la última pose. En este proyecto, hice 7 poses para que el personaje goblin tuviera movimiento de ataque. Lo que hay que tener en cuenta es la última pose, es decir, pose_07 debe continuar con la pose inicial, es decir, pose_01. Por lo tanto, hará un movimiento sin fin o una animación en bucle.

 

animando

En realidad, este proceso será muy simple porque ya tenemos poses que representan el fotograma clave que necesitamos para convertirse en una serie de movimientos. Antes de asegurarse de que la animación se ejecuta bien en la línea de tiempo. Condicione todas las carpetas de capas en un estado oculto.

 

Luego, asegúrese de que todas las celdas estén en sus respectivos marcos en la línea de tiempo. Una característica interesante en la línea de tiempo de CSP es la "piel de cebolla". Esta característica nos permite ver la pose antes y después de la pose que estamos revisando.

 

Puede probar la animación presionando el icono de reproducción en la línea de tiempo. Si la animación no se detiene y la aguja de la línea de tiempo continúa, aunque solo estemos llenando la celda hasta el cuadro 23, no se preocupe. Esto sucede porque al comienzo de la creación del archivo, no configuramos correctamente el Tiempo de reproducción. Esto puede fácilmente, desplazarse hacia la derecha y encontrar la aguja azul de la línea de tiempo en el lado derecho, luego arrastrarla y guardarla en el cuadro que necesitamos.

 

Publicación

Después de estar convencido del movimiento en nuestra animación, se siente bien. Entonces es el momento de publicarlo. Por lo general, empaqueto la animación de sprites en una hoja de sprites de acuerdo con las necesidades del cliente. Las hojas de sprites se crean en PNG de fondo transparente para facilitar la composición a los desarrolladores de juegos. Luego, el sprite se animará mediante la codificación.

 

Sin embargo, como proceso de envío o aprobación del cliente, normalmente exporto animaciones de sprites a GIF animados en bucle. El paso es ir al menú Archivo > Exportar animación > GIF animado. Luego aparecerán algunos cuadros y solo tenemos que confirmarlo según sea necesario.

 

¡OK! Eso es todo lo que puedo compartir. Espero que sea útil y por favor ayúdame a hacer más consejos:

 

Sigue mi Instagram:

 

Suscríbete a mi canal de YouTube:

Lee mis otras publicaciones:

Gracias :)