Introducción

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

 

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

Acerca del diseño retro

Retro es un estilo de diseño que está de moda en los años 70 a 90. Retro es diferente del estilo vintage que se conoce desde hace mucho tiempo. El estilo retro tiene una impresión contemporánea e incluso futurista en su época. La característica única de lo 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 la era junto con el auge de la discoteca, la fiesta y el estilo de vida deportivo.

 

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

Configuración de lienzo para Pixel Art

¡Empecemos! Abra Clip Studio Paint y luego cree un nuevo lienzo. El trabajo final que vamos a crear será de 1280 px por 720 px, pero para crear pixel art, solo necesitamos crear el 10 % de ese tamaño. Entonces, las dimensiones del lienzo que necesitamos son 128 px por 72 px.

A continuación, tenemos que configurar la cuadrícula para que sea más fácil dibujar píxeles. Vaya a Ver > Cuadrícula.

 

Ahora podemos verlo en el lienzo. Pero todavía tenemos que ajustar el tamaño de la cuadrícula. Vaya a Ver > Configuración de cuadrícula/regla. Establezca el origen en el centro y establezca la Brecha (D) y el Número de divisiones en 1.

Esquema de color retro

Antes de comenzar a compilar píxeles. Primero, necesitamos crear una paleta de colores que se ajuste al estilo retro. Cree una nueva capa para convertirla en una paleta, nombre la capa como "paleta retro".

A continuación, haga doble clic en Color de primer plano en la Caja de herramientas para abrir la Configuración de color. El primer color que crearemos es "Hot Pink". En el campo HEX, ingrese el código "ff69b4". Luego pincel 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 en el panel de paleta estándar.

Configuración de herramientas para Pixel Art

¡OK! Hay varias herramientas que podemos usar para crear pixel art con configuraciones especiales. La primera herramienta, podemos usar la "Herramienta de figura", como líneas, curvas y herramientas de forma para crear objetos de píxeles precisos.

Para usar la herramienta Figura para crear arte de píxeles, debemos desactivar la función Anti-Aliasing. Anti-Aliasing es una función que hace que los bordes de los objetos de imágenes digitales se vean suaves al agregar y manipular el color de los píxeles de muestra que los rodean.

Con Anti-Aliasing, por supuesto, el pixel art no se verá bien. Por lo tanto, tenemos que deshabilitar esta función en el panel de propiedades de la herramienta a la izquierda. En la sección Anti-Aliasing hay varios niveles, seleccione "Ninguno".

Segunda herramienta, podemos usar la "Herramienta Pluma" con la subherramienta Marcador y el tipo Pluma de puntos. Este tipo de bolígrafo producirá un dibujo lineal con un grosor de 1 px para que podamos crear fácilmente objetos de píxeles orgánicos.

Tercera herramienta, podemos usar la "Herramienta de relleno" para rellenar campos de píxeles fácilmente. Seleccione el tipo Referir a otras capas para que podamos rellenar los campos superpuestos aunque sean capas diferentes. Luego, en la propiedad de la herramienta, desactive Escalado de área. Esta función es casi similar a Anti-Aliasing, que produce ruido en los objetos de píxeles.

Cuarta herramienta, por supuesto, necesitamos la "Herramienta Borrador" para borrar píxeles innecesarios en el trabajo. Seleccione el tipo Vector para borrar los píxeles sin dejar rastro.

 

¡OK! El resto podemos utilizar otras herramientas según sea necesario.

fondo retro

Ahora vamos a tener una fiesta de píxeles. Comenzamos creando el fondo para la pantalla de inicio que vamos a crear, por supuesto en estilo retro.

Divido el lienzo con una línea de 1 px de grosor como el horizonte que divide el cielo y el suelo.

Luego use la "Herramienta Cuentagotas" para tomar el color de la paleta de capas que creamos anteriormente. Llené el cielo con color Ametyhst y el área del suelo con Carmine.

Ahora cree una nueva capa, vamos a crear el objeto de puesta de sol que es típico del famoso diseño retro. Use la herramienta de forma de elipse y haga un círculo mientras mantiene presionada la tecla "Shift" en el teclado para que la forma sea proporcional.

Use la herramienta de borrador para hacer rayas en la puesta de sol. Puedes imitar el patrón como hice yo.

Ahora cree una nueva capa nuevamente, decoraremos el fondo con la imagen de la silueta de las montañas. Use la herramienta de línea con negro para dibujar las montañas a la derecha e izquierda de la imagen del atardecer.

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

Crea una nueva capa, agregaremos la imagen de la silueta de los edificios frente a la puesta de sol. Esta vez uso un bolígrafo de puntos.

Decora la imagen del edificio con unos píxeles de colores a modo de luces.

Ahora nos movemos al área del suelo, creamos una nueva capa para crear una malla sobre el suelo. Nuevamente, uso la herramienta de línea con el color azul turquesa para hacer un diseño preciso.

Dibuja la línea en diagonal apoyada en un solo punto para tener perspectiva.

Copie esta capa, luego vaya a Edición > Transformar > Voltear horizontal. Coloque la malla para que quede simétrica en el lienzo. Luego seleccione la capa de malla y la copia, vaya a Capa> Combinar capas seleccionadas.

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

Ambiente retro de la calle

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

 

Cree una carpeta de capas para recopilar las capas del objeto del entorno. Crea una nueva capa para crear un camino.

Ahora rellene la intersección de la forma que forma el camino, en la imagen con amarillo eléctrico. Cambia la opacidad de la capa al 50%.

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

Luego, crea otra nueva capa para hacer una palmera. Usa la herramienta de pluma de puntos para hacerlo. Hazlo simétrico a derecha e izquierda.

Objeto de coche retro

¡OK! Ahora es el momento de crear el modelo principal. Cree una nueva capa para el objeto de automóvil retro. Usa un bolígrafo de puntos para dibujarlo.

Cree una nueva capa sobre la capa del automóvil, use negro para hacer una sombra en la superficie del modelo del automóvil. Cambia la opacidad de la capa al 50%. Luego combine la capa con la capa del automóvil.

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

Proceso de animación

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

 

Para eso, prepara el panel de la línea de tiempo. Vaya a Ventana > marque Línea de tiempo. Encontrará el panel de línea de tiempo que aparece en la parte inferior de la pantalla.

En el panel Línea de tiempo, haga clic en Nueva línea de tiempo. Luego aparecerá una nueva configuración de línea de tiempo, complete el nombre de la línea de tiempo. Establezca la velocidad de fotogramas y el tiempo de reproducción en 24. Escena y disparo en el número 1 y la línea de división en el número 6. Luego, cambie 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 a la celda de animación.

 

Para eso, haga clic en Nueva carpeta de animación. Luego, la carpeta de animación aparecerá en la parte superior del panel Capas. Cambie el nombre de la carpeta a "Animación". Actualmente la carpeta de animación está vacía. Tenemos que procesar los modelos que se han hecho para compilar y convertirlos en cel animados.

Seleccione todas las capas del modelo, desde el automóvil retro hasta la capa de fondo. Puede excluir la paleta de capas y guardarla en la parte inferior. Luego ve a Capa > Crear carpeta e inserta capa. Luego, todas las capas seleccionadas se recopilarán en una carpeta. Cambie el nombre de la carpeta a "Compilación".

Copie la carpeta Compilación y cambie el nombre de la carpeta de copia a "cel_01". Luego vaya a Capa> Convertir capa (H), para que la carpeta cel_01 cambie a una capa de unidad. Arrastre la capa cel_01 a la carpeta Animación.

En el panel de línea de tiempo, asegúrese de seleccionar el cuadro número 1 marcado en rojo para cada cuadro seleccionado y luego haga clic en Especificar celdas. Se nos pedirá que seleccionemos la capa que se vinculará al cel. Seleccione cel_01.

Para hacer el siguiente cel, haz lo mismo. Copie la carpeta Compilación y luego cambie el nombre de la copia a "cel_02". Antes de convertirse en una capa unitaria. Tenemos que transformar algunos de los modelos en esta carpeta para crear la ilusión de movimiento.

Ahora seleccione la capa de señalización vial en la carpeta cel_02. Vamos a editar la imagen para que parezca que los marcadores de carretera avanzan hacia la parte inferior del lienzo. Todo lo que hay que hacer es eliminar o agregar píxeles en ciertas partes.

A medida que se mueven las marcas viales, 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. Entonces, a medida que se movía, la palmera tuvo que ser escalada.

 

Selecciona la capa de la palmera, luego ve a Edición > Transformar > Transformación libre. En la propiedad de la herramienta a la izquierda, cambie la configuración del método de interpolación a Bordes duros para que la escala no cause ruido de píxeles.

Ahora seleccione la capa de construcción, cambie la decoración de las luces para que parezca que las luces parpadean.

A continuación, seleccione la carpeta cel_02. Ve a Capa > Convertir capa (H). Arrastre la capa cel_02 a la carpeta Animación. Seleccione el cuadro número 3 en la línea de tiempo y luego haga clic en Especificar celdas. Seleccione cel_02. En esta animación voy a configurar el cel cada 2 fotogramas para el tiempo de reproducción de 24.

Seleccione el cuadro número 3 en la línea de tiempo y luego haga clic en Especificar celdas. Seleccione cel_02.

En esta animación voy a configurar el cel cada 2 fotogramas para el tiempo de reproducción de 24.

 

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

Representación y publicación

¡OK! He terminado de componer y llenar cada 2 fotogramas con el cel animado para un total de 24 fotogramas.

Antes de renderizar y publicar esta animación. Déjame recordarte que esta animación tiene unas dimensiones de 128px por 72px. De modo que si lo renderizamos de inmediato, el resultado que podemos ver será de este tamaño.

Para eso, necesitamos cambiar su tamaño primero. Vaya a Editar > Cambiar resolución de imagen de imagen. Aparecerá la ventana de configuración de la resolución.

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

 

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

Aparecerá la ventana de procesamiento, cambie el ancho a 1280 px y la altura a 720 px.

Sin embargo, en algunos proyectos de juegos. Por lo general, 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á mediante un script de programación. Para eso podemos ir a Archivo > Exportar animación > seleccionar Secuencia de imágenes.

Aparecerá la ventana de configuración de procesamiento. Especifique un directorio de almacenamiento. Seleccione el formato PNG y la lista de verificación Exportar marcos.

 

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

Suscríbete a mi canal de YouTube: