En este artículo, le mostraré cómo es posible usar Clip Studio Paint para crear gráficos (sprites) para juegos.

 

Esta será una serie de tres partes.

 

[Parte 1] Explicaré mi proceso para crear sprites listos para animación para un prototipo de juego móvil usando solo Clip Studio Paint.

 

[Parte 2] Me centraré en la animación, ofreciendo un flujo de trabajo sólido para animar secuencias utilizando el método de estilo de recorte e introduciendo la nueva función de interpolación ahora disponible en el software.

 

[Parte 3] se dedicará a la exportación y algunos consejos y trucos que puede utilizar para acelerar la creación de diferentes activos.

 

 

Vamos a hacerlo.

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

Planificando tus pasos

Primero y ante todo: al crear activos para el desarrollo del juego, es muy importante que tenga en cuenta el resultado final de la pantalla.

 

Le recomiendo que pase un tiempo investigando o simplemente hablando con su equipo (Artista principal, Productor o Programador) sobre la mejor relación de pantalla y resolución para crear los gráficos.

 

[ Como una regla de oro: ]

 

• Siempre se prefiere el arte vectorial, pero es un proceso más lento.

Si el estilo de tu juego admite este método de creación, crea la mayoría de tus gráficos en modo vectorial.

 

 

• Los gráficos de mapa de bits / ráster son más rápidos de hacer, pero es posible que tenga problemas de escala si necesita aumentar la resolución una vez que haya terminado su arte.

 

Intente crear sus activos en mínimo el doble del tamaño de su resolución final ; siempre tenga una resolución más alta de sus sprites producidos.

 

Para este proyecto, crearé los activos en modo de mapa de bits / ráster.

 

Para tener un punto de referencia sobre qué tamaño de imagen es mejor para crear la obra de arte, realicé una investigación rápida sobre las resoluciones de pantalla comunes de las plataformas para las que espero que se publique el juego.

 

Obtuve dos datos clave de mi investigación:

 

a. La resolución máxima de la pantalla es de 2224 píxeles (área azul);

 

segundo. Para asegurarme de que el juego pueda funcionar en dispositivos móviles y tabletas, necesito centrar mis gráficos importantes cerca de 1080 píxeles (área roja).

Crear la mesa de trabajo

Con la información anterior en mente, creé un tablero de arte con todos los gráficos para esta maqueta del juego. Al hacer esto, puedo tener una mejor idea del juego Y es más fácil mantener la consistencia durante la producción (ya que puedes trabajar en lotes).

// Acerca de esta imagen: importé los conceptos de mi cuaderno de bocetos al Tablero de arte y comencé los dibujos preliminares de inmediato. Poner todos los gráficos juntos en el mismo archivo ayuda a verificar sus relaciones (tamaño y colores).

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

Más adelante en esta serie, usaré el método de recorte de animación en estos sprites, no el método habitual dibujado a mano, cuadro por cuadro, que es común en Clip Studio Paint.

 

Para que esto funcione, tengo que dibujar y aislar cada parte que se va a mover.

En esta etapa, su proceso se volverá muy engorroso si tiene que lidiar con todas las capas diferentes (Línea, Color, Sombreado) para cada objeto.

 

Una sugerencia aquí es [centrarse en la creación / creación y dejar la organización para más adelante].

 

En el ejemplo, debajo de todos los gráficos se crearon como si fuera un solo dibujo: una capa para líneas, otras para colores planos, sombreados, etc.

 

// Acerca de esta imagen: en mi Tablero de arte, todos mis gráficos comparten la misma estructura de capas: mi proceso creativo se interrumpiría si intento crear y organizar al mismo tiempo.

 Organizando y Exportando Piezas

Clip Studio Paint tiene una función muy inteligente en la que puede manipular (Mover, Copiar / Cortar / Pegar y Borrar píxeles) desde múltiples capas seleccionadas, siempre que:

 

(A) Se seleccionan en la pila de capas;

(B) Todos se seleccionan mediante un Grupo de capas

// Acerca de esta imagen: en Clip Studio Paint puede seleccionar y afectar los píxeles de varias capas seleccionadas. Es una función muy útil para modificar partes de su dibujo sin tener que fusionar las capas.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

Ahora exportemos cada parte del sprite correctamente para que pueda usarlo para crear una animación recortada en Clip Studio Paint y / o crear una imagen Atlas que se pueda usar en diferentes herramientas de animación (Spine, Spriter, Unity).

// Acerca de esta imagen: Un Atlas es una imagen grande que contiene múltiples sprites; esto reduce el consumo de memoria, ya que el dispositivo solo necesita cargar (llamar) una sola imagen que contenga todos los sprites que usará en un juego o personaje.

He probado muchos métodos para acelerar el proceso de exportación. La siguiente es la secuencia de pasos que creo que es la forma más efectiva de lograr esta tarea:

[ PASO 1.]

 

En la Pila de capas, seleccione todas las capas utilizadas para crear su gráfico (Líneas, Colores, Sombreado, etc.). Luego, use la herramienta Lazo para seleccionar el área que desea transformar en un Sprite (en este ejemplo, exportaré solo la cabeza de la Niña)

 

[ PASO 2.]

 

Con la Selección activa, vaya a EDITAR - COPIAR (o CTRL + C) y luego ARCHIVO - CREAR NUEVO DESDE CLIPBOARD

[PASO 3.]

 

Se crea un nuevo archivo con una parte del sprite Y la estructura del archivo (útil para futuras ediciones) intacta; ahora APAGUE la visibilidad de la CAPA DE PAPEL para que el sprite tenga un fondo transparente.

 

// IMPORTANTE: Observe cómo el sprite está contenido con precisión dentro de un rectángulo; no hay espacio extra alrededor. Esta es una buena práctica al exportar sprites para motores.

[ ETAPA 4.]

 

Ahora puede exportar el sprite a un nuevo archivo; vaya a ARCHIVO - EXPORTACIÓN (UNA CAPA) y elija PNG.

[PASO 5.]

 

Siempre es bueno nombrar tus sprites en consecuencia. Para este proyecto nombraré las piezas del personaje usando lo siguiente: GIRL_ (Nombre del BodyPart) .png

[PASO 6.]

 

Este cuadro de diálogo de exportación PNG es útil porque puede ajustar el tamaño de su gráfico sin cambiar el diseño original; supongamos que el Programador necesita que el personaje tenga la mitad de su tamaño en el juego. Puede exportar fácilmente las imágenes nuevamente cambiando el valor de la RELACIÓN DE ESCALA al 50% (p. Ej.)

Y tu estas listo...

 

... para este primer sprite. :(

 

Con mucho gusto, hay una manera de acelerar este proceso en Clip Studio Paint.

 

[Puede usar una acción automática (macro) para automatizar esta secuencia.]

 

Creé y compartiré esta Acción contigo; consulte las notas al pie de este artículo para obtener el enlace de descarga.

Para importar esta acción, vaya a la subherramienta ACCIÓN AUTOMÁTICA y elija IMPORTAR CONFIGURACIÓN; más tarde puede copiarlo o moverlo a su conjunto de acciones automáticas predeterminado.

 

Regrese a su Tablero de Arte, [Seleccione un área de su imagen] que desea exportar a un sprite y luego haga clic en el pequeño BOTÓN DE JUEGO.

 

La Acción solicitará el nombre y el tamaño antes de que el archivo temporal se cierre automáticamente.

Repita el proceso en todas las partes de su imagen. En este ejemplo, tengo todas las partes necesarias para "aparejar" y animar al personaje.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

Eso es.

 

En el siguiente artículo, le mostraré cómo [Animar] este sprite en Clip Studio Paint, utilizando el método de animación recortado.

 

Es un método de trabajo muy eficiente y puede usarlo para crear secuencias para juegos o varios tipos de animaciones para usar en su proyecto (gráficos de Twitch y Youtube, Gifs para redes sociales, por ejemplo).

 

Descargar material