Introducción

¡Hola! Mi nombre es Hira Karmachela. En esta ocasión, compartiré mi experiencia para crear arte píxel retro animado para una pantalla de inicio de juego usando Clip Studio Paint.

 

Espero que esta publicación sea un consejo interesante para aquellos de ustedes que buscan crear arte píxel y diseño retro usando CSP.

Sobre el Diseño Retro

Retro es un estilo de diseño que fue tendencia desde los años 70 hasta los 90. Retro es diferente del estilo vintage que se conoce desde hace mucho tiempo. El estilo retro tenía una impresión contemporánea e incluso futurista en su época. La característica única del retro se puede ver en la selección de colores más brillantes, también conocidos como colores neón. Los estilos de diseño retro se desarrollaron durante esa era junto con el auge del estilo de vida disco, de fiesta y deportivo.

 

En la misma época, los videojuegos se desarrollaron con gráficos de baja resolución, lo que ahora se conoce como arte píxel. Esto es interesante para mí para dar consejos sobre cómo hacer arte píxel al estilo retro.

Configuración del Lienzo para Arte Píxel

¡Empecemos! Abre Clip Studio Paint y crea un nuevo lienzo. El trabajo final que vamos a crear será de 1280px por 720px, pero para crear arte píxel, solo necesitamos crear el 10% de ese tamaño. Así que las dimensiones del lienzo que necesitamos son 128px por 72px.

A continuación, debemos configurar la cuadrícula para facilitar el dibujo de píxeles. Ve a Ver > Cuadrícula.

 

Ahora podemos verlo en el lienzo. Pero aún tenemos que ajustar el tamaño de la cuadrícula. Ve a Ver > Configuración de Cuadrícula/Regla. Establece el origen en el centro y configura el Espacio (D) y el Número de divisiones en 1.

Esquema de Color Retro

Antes de empezar a compilar píxeles. Primero, necesitamos crear una paleta de colores que se ajuste al estilo retro. Crea una nueva capa para usarla como paleta, nómbrala "paleta retro".

A continuación, haz doble clic en el Color de Primer Plano en la Caja de Herramientas para abrir la Configuración de Color. El primer color que crearemos es "Rosa Fuerte". En el campo HEX, introduce el código "ff69b4". Luego, pinta sobre el lienzo.

A continuación se muestran los colores de la paleta retro que necesitamos.

Para el resto, todavía necesitamos Blanco y Negro, que podemos tomar del panel de paleta estándar.

Configuración de Herramientas para Arte Píxel

¡Bien! Hay varias herramientas que podemos usar para crear arte píxel con configuraciones especiales. La primera herramienta que podemos usar es la "Herramienta de Figura", como las herramientas de líneas, curvas y formas para crear objetos píxel precisos.

Para usar la Herramienta de Figura para crear arte píxel, necesitamos desactivar la función de Anti-Aliasing. El Anti-Aliasing es una función que hace que los bordes de los objetos de imagen digital se vean suaves al añadir y manipular el color de los píxeles de muestra a su alrededor.

Con Anti-Aliasing, por supuesto, el arte píxel no se verá bien. Por lo tanto, tenemos que desactivar esta función en el panel de propiedades de la herramienta a la izquierda. En la sección Anti-Aliasing hay varios niveles, selecciona "Ninguno".

La segunda herramienta que podemos usar es la "Herramienta Pluma" con el subtipo Marcador y Pluma de Puntos. Este tipo de pluma producirá un dibujo de línea con un grosor de 1px para que podamos crear fácilmente objetos píxel orgánicos.

La tercera herramienta que podemos usar es la "Herramienta Relleno" para rellenar campos de píxeles fácilmente. Selecciona el tipo Referir a otras capas para que podamos rellenar campos superpuestos aunque estén en capas diferentes. Luego, en las propiedades de la herramienta, desmarca Escala de Área. Esta función es casi similar al Anti-Aliasing que produce ruido en los objetos píxel.

La cuarta herramienta, por supuesto, es la "Herramienta Borrador" para borrar píxeles innecesarios en el trabajo. Selecciona el tipo Vector para borrar los píxeles sin dejar rastro.

 

¡Bien! El resto de las herramientas podemos usarlas según sea necesario.

Fondo Retro

Ahora, ¡a disfrutar de los píxeles! Empezamos creando el fondo para la pantalla de inicio que vamos a crear, por supuesto, al estilo retro.

Divido el lienzo con una línea de 1px de grosor como horizonte que separa el área del cielo y del suelo.

A continuación, usa la "Herramienta Cuentagotas" para tomar el color de la paleta de capas que creamos antes. Rellené el cielo con color Amatista y el área del suelo con Carmín.

Ahora crea una nueva capa, vamos a crear el objeto atardecer que es típico del famoso diseño retro. Usa la herramienta de forma de elipse y haz un círculo mientras mantienes pulsada la tecla "Shift" en el teclado para que la forma sea proporcional.

Usa la herramienta borrador para hacer rayas en el atardecer. Puedes imitar el patrón como lo hice yo.

Ahora crea una nueva capa de nuevo, decoraremos el fondo con una imagen de silueta de montañas. Usa la herramienta de línea con negro para dibujar las montañas a la derecha y a la izquierda de la imagen del atardecer.

Rellena las montañas con negro y luego cambia la opacidad de la capa al 50%.

Crea una nueva capa, añadiremos la imagen de silueta de los edificios delante del atardecer. Esta vez uso una pluma de puntos.

Decora la imagen del edificio con algunos píxeles coloridos como luces.

Ahora pasamos al área del suelo, crea una nueva capa para crear una malla sobre el suelo. De nuevo, uso la herramienta de línea con color Azul Turquesa para hacer un diseño preciso.

Dibuja la línea diagonalmente apoyándose en un solo punto para la perspectiva.

Copia esta capa, luego ve a Editar > Transformar > Voltear Horizontalmente. Posiciona la malla para que sea simétrica en el lienzo. Luego selecciona la capa de malla y la copia, ve a Capa > Fusionar capas seleccionadas.

Ahora haz líneas horizontales a través de las líneas diagonales que se han hecho para crear una imagen de malla.

Entorno de Calle Retro

A continuación, creamos objetos para el entorno. Vamos a crear una atmósfera de calle retro. Es simple, haré marcas viales y una línea de palmeras en los arcenes izquierdo y derecho de la carretera.

 

Crea una carpeta de capas para recolectar las capas de los objetos del entorno. Crea una nueva capa para crear un camino.

Ahora rellena la intersección de la forma que compone el camino, en la imagen con Amarillo Eléctrico. Cambia la opacidad de la capa al 50%.

Crea una nueva capa para crear marcas viales. Haz marcas viales blancas usando la herramienta de línea.

A continuación, crea otra nueva capa para hacer una palmera. Usa la herramienta de pluma de puntos para hacerla. Hazla simétrica a la derecha y a la izquierda.

Objeto Coche Retro

¡Bien! Ahora es el momento de crear el modelo principal. Crea una nueva capa para el objeto coche retro. Usa una pluma de puntos para dibujarlo.

Crea una nueva capa encima de la capa del coche, usa negro para hacer una sombra en la superficie del modelo del coche. Cambia la opacidad de la capa al 50%. Luego fusiona la capa con la capa del coche.

Como complemento, haz una sombra debajo del coche en una nueva capa. Cambia la opacidad de la capa al 50%.

Proceso de Animación

Ahora es el momento de dar vida a la escena. Hay dos partes que animaremos, a saber, el entorno de la calle y las luces de los edificios.

 

Para ello, prepara el panel de la línea de tiempo. Ve a Ventana > marca Línea de tiempo. Encontrarás el panel de la línea de tiempo apareciendo en la parte inferior de la pantalla.

En el panel de la línea de tiempo, haz clic en Nueva línea de tiempo. Luego aparecerá una nueva configuración de línea de tiempo, rellena el nombre de la línea de tiempo. Establece la velocidad de fotogramas y el tiempo de reproducción en 24. Escena y toma en el número 1 y línea de división en el número 6. Luego cambia la interpolación de imagen a Bordes Duros.

Para crear una animación, necesitamos una carpeta de animación que contenga capas especiales que se vincularán al cel de animación.

 

Para ello, haz clic en Nueva carpeta de animación. Luego, la carpeta de animación aparecerá en la parte superior del panel Capas. Renombra la carpeta a "Animación". Actualmente, la carpeta de animación está vacía. Tenemos que procesar los modelos que se han creado para compilar y convertirlos en cels animados.

Selecciona todas las capas del modelo desde el coche retro hasta la capa de fondo. Puedes excluir la paleta de capas y guardarla en la parte inferior. Luego ve a Capa > Crear carpeta e insertar capa. Luego, todas las capas seleccionadas se recopilarán en una carpeta. Renombra la carpeta a "Compilación".

Copia la carpeta de Compilación y renombra la carpeta copiada a "cel_01". Luego ve a Capa > Convertir capa (H), para que la carpeta cel_01 se convierta en una capa de unidad. Arrastra la capa cel_01 a la carpeta Animación.

En el panel de la línea de tiempo, asegúrate de seleccionar el fotograma número 1 marcado en rojo para cada fotograma seleccionado y luego haz clic en Especificar celdas. Se te pedirá que selecciones la capa que se vinculará a la celda. Selecciona cel_01.

Para hacer la siguiente celda, haz lo mismo. Copia la carpeta de Compilación y luego renombra la copia a "cel_02". Antes de ser convertida en una capa de unidad. Tenemos que transformar algunos de los modelos en esta carpeta para crear la ilusión de movimiento.

Ahora selecciona la capa de marcas viales en la carpeta cel_02. Vamos a editar la imagen para que parezca que las marcas viales avanzan hacia la parte inferior del lienzo. Todo lo que hay que hacer es eliminar o añadir píxeles en ciertas partes.

A medida que las marcas viales se mueven, las palmeras también tienen que desplazarse hacia la parte inferior del lienzo. Desde una perspectiva lógica, el objeto que se acerca a la vista se verá más grande. Por lo tanto, a medida que se desplaza, la palmera debe escalarse.

 

Selecciona la capa de la palmera, luego ve a Editar > Transformar > Transformación Libre. En las propiedades de la herramienta a la izquierda, cambia la configuración del método de Interpolación a Bordes Duros para que el escalado no cause ruido de píxeles.

Ahora selecciona la capa del edificio, cambia la decoración de las luces para que parezca que parpadean.

A continuación, selecciona la carpeta cel_02. Ve a Capa > Convertir capa (H). Arrastra la capa cel_02 a la carpeta Animación. Selecciona el fotograma número 3 en la línea de tiempo y luego haz clic en Especificar celdas. Selecciona cel_02. En esta animación voy a configurar la celda cada 2 fotogramas para un tiempo de reproducción de 24.

Selecciona el fotograma número 3 en la línea de tiempo y luego haz clic en Especificar celdas. Selecciona cel_02.

En esta animación voy a configurar la celda cada 2 fotogramas para un tiempo de reproducción de 24.

 

Para las siguientes celdas, por favor, haz lo mismo cambiando la transformación continua para que produzca la ilusión de movimiento.

Renderizado y Publicación

¡Bien! He terminado de componer y rellenar cada 2 fotogramas con la celda animada para un total de 24 fotogramas.

Antes de renderizar y publicar esta animación. Permítanme recordarles que esta animación tiene dimensiones de 128px por 72px. De modo que si la renderizamos de inmediato, el resultado que veremos será de este tamaño.

Para ello, necesitamos redimensionarla primero. Ve a Editar > Cambiar Resolución de Imagen. La ventana de configuración de resolución aparecerá.

Cambia el ancho a 1280px y el alto a 720px. Luego cambia el método de Interpolación a Bordes Duros. Entonces la imagen se ampliará sin destruir la disposición de los píxeles.

 

Ahora renderizamos esta animación. Si necesitas un resultado animado que se pueda ver con la función de bucle, entonces deberíamos exportarlo en formato GIF Animado. Ve a Archivo > Exportar animación > GIF Animado. Especifica un directorio de almacenamiento.

La ventana de renderizado aparecerá, cambia el ancho a 1280px y el alto a 720px.

Sin embargo, en algunos proyectos de juegos. Normalmente, el desarrollador solicita que la pantalla de inicio se presente en secuencias de imágenes. Esto se debe a que la animación se creará utilizando un script de programación. Para ello, podemos ir a Archivo > Exportar animación > seleccionar Secuencia de imágenes.

La ventana de configuración de renderizado aparecerá. Especifica un directorio de almacenamiento. Selecciona el formato PNG y la casilla de verificación Exportar fotogramas.

 

¡Bien! Eso es todo lo que puedo compartir. Espero que sea útil y por favor, apóyenme para hacer más consejos.

Suscríbete a mi canal de YouTube: