Introducción

En este tutorial voy a explicar mi método para crear arte para videojuegos en 2D, lo que se conoce como "2D assets" o "sprites" en inglés y en la comunidad de desarrolladores de videojuegos en general, para utilizar en Unity o similar.

En especial voy a centrarme en arte para videojuegos de vista lateral o "sidescrollers" tales como "Ori and the Blind Forest", "Hollow Knight" o "Monster Boy", en especial menciono estos porque no voy a usar pixel art, utilizaré simplemente arte digital normal.

Voy a ir paso a paso explicando cómo crear desde plataformas, decoraciones y fondos, y que todos ellos encajen los unos con los otros para poder crear diferentes niveles o escenarios de una manera cohesiva, natural y que estén listos para importar en Unity o una game engine similar.

Clip Studio Paint, tiene herramientas muy cómodas, como por ejemplo la [Regla simétrica] que me ayudan a realizar este tipo de trabajos rápidamente.

 

Antes de empezar

Antes de empezar a dibujar/pintar hay que pensar cual va a ser la resolución de nuestros "assets".

Aunque no hay una regla especifica de cómo de grande ha de ser la resolución de nuestros assets, sí podemos tener en cuenta algunos parámetros:

– Si vamos a crear assets para PC, las resoluciones más comunes hoy en día son “full-HD” (1920×1080 px ) o 1280×720. Aunque también existen los monitores 4K y otras variantes.

– Para teléfonos móviles la resolución varía muchísimo, algunos teléfonos utilizan 720p y otros pueden incluso a llegar a 4k.

– Mi consejo es que investigues para qué plataforma vas a crear tus assets y en base a ello escoger una resolución.

En este tutorial vamos a centrarnos en la resolución más común, 1080p.

Pensar la idea

Si estás utilizando este tutorial para practicar tu arte para videojuegos, sería buena idea pensar en qué te gustaría crear. En mi caso, voy a crear un bosque lleno de vegetación, un bosque antiguo en el que perderse, con rocas y plantas extrañas:

 

Vamos a crear algunos bocetos antes de empezar para visualizar la idea.

1- El suelo/Plataformas

Lo primero es empezar a crear el suelo y las plataformas en las que el personaje va a andar o apoyarse. En primer lugar, vamos a crear un suelo de hierba verde, con hojas de diferentes colores, sería un “asset” que en un futuro podremos modificar y editar para crear más “assets” similares que combinen unos con otros.

 

1- Dibujamos un pequeño boceto de nuestra idea de hierba, muy sencillo, nada

complicado.

2- En una capa inferior pintamos una base de verde.

3- Eliminamos la capa de boceto y pintamos varios tonos de verde sutiles.

4- Empezamos a añadir detalles con hojas de diferentes colores.

5- Finalmente añadimos una pequeña silueta de hojas de color negro.

Prueba rápida de suelo horizontal:

Haz la prueba para ver si tu hierba combina la una con la otra. Las hojas de color negro nos ayudarán a que los assets puedan mezclarse entre sí.

 

1- Selecciona tu trozo de hierba y duplícalo.

2- Júntalos de un modo que más o menos combinen.

3- Sigue añadiendo piezas de hierba hasta conseguir un suelo horizontal uniforme, y

finalmente rellena de negro la parte de abajo.

¡Como puedes ver queda bastante bien, con bastante estilo y personalidad!

Ahora vamos a ver cómo podemos hacer que no sea tan repetitivo.

Variedad en el suelo:

Aunque nuestro asset de suelo funciona bastante bien, siempre podemos añadir algo de variedad de una forma rápida.

Técnica 1:

Podemos variar el color pulsando [control + U] y modificando el deslizadero de [Tono].

Como ves, el negro se mantiene negro, pero los demás colores cambian. Esto nos puede ayudar a crear diferentes variaciones de assets y ambientaciones muy fácilmente, sin necesidad de crear nuevos assets desde cero.

Técnica 2:

Podemos variar ayudarnos del asset inicial de hierba, modificarlo y crear assets más grandes, que ocupen más superficie y sean menos repetitivos.

 

1- Coge tu trozo de hierba y duplícalo.

2- Júntalos de un modo que más o menos combinen.

3- Ahora vamos a intentar añadir más hojas en medio y otros colores para añadir más variedad.

Como ves esta técnica lleva un poco más de tiempo, aunque el resultado final es bastante profesional, ahora tenemos nuestro asset original, los assets de colores y este asset nuevo doble. Ahora nuestro suelo será mucho menos repetitivo, y ¡lucirá mucho mejor!

2- Paredes, plataformas flotantes, horizontales y verticales

Una vez tenemos nuestro suelo, podemos empezar a pensar en las paredes, y plataformas verticales. Para la hierba, mi método es muy sencillo.

 

Duplicamos el asset, y con la herramienta [Transformación Libre] Control + Shift + T, modificamos el asset según nos convenga.

 

Podemos usar voltear horizontal para darle la vuelta, cambiar el ángulo a 90º para ponerlo en vertical, o incluso en diagonal si así quieres.

Aquí tienes mis ejemplos.

 

Una vez tenemos las variaciones, vas a ver lo fácil que es crear diferentes niveles de terreno. Por ejemplo, vamos a hacer un cuadrado flotante.

 

Simplemente, coloca tus nuevos assets modificados formando un cuadrado y rellena de negro la parte vacía que está en medio.

Como ves es supersencillo y el resultado está bastante bien. Este cuadrado podría ser una plataforma flotante en la que tu personaje puede sostenerse.

No solo podemos hacer cuadrados, estos assets pueden modificarse a tu antojo. Por ejemplo, e hecho dos rectángulos siguiendo las mismas técnicas explicadas anteriormente, mezclando el asset pequeño y el asset doble.

¡Ahora ya tenemos 3 plataformas diferentes!

Vamos a recopilar los assets que hemos creado hasta ahora.

Un pequeño truco que yo realizo es el siguiente:

Copiamos nuestros assets, y pulsamos [control + U] y, modificando el deslizador de [Luminosidad], convertimos todas las piezas a color negro. Estas piezas nos servirán para colocar por delante de las que tienen color y así poder tapar errores o crear elementos en primer plano.

Ahora ya con todos estos assets podemos empezar a hacer pruebas de niveles pequeños. Usando las piezas que hemos construido en los pasos anteriores he sido capaz de crear este pequeño túnel.

3- Decoraciones

Ahora vamos a crear diferentes decoraciones para que nuestro escenario/nivel sea más variado y único.

 

Plantas:

 

Vamos a empezar creando algunas plantas.

 

1- Dibuja plantas sencillas.

2- Añade color por debajo de la línea de boceto.

3- Con un tono más oscuro enfatiza y añade sombra para dar volumen.

4- Finalmente añade detalles.

Aquí algunos ejemplos de cómo utilizar las plantas. Si utilizamos el mismo truco de convertirlas a color negro, podremos colocarlas en una capa superior para crear más detalle y profundidad. Es una técnica muy sencilla, pero da resultados muy vistosos.

Rocas:

 

Vamos a crear algunas rocas.

 

1- Dibuja rocas sencillas.

2- Añade color por debajo de la línea de boceto. En mi caso usé grises.

3- Poco a poco vamos dando detalles y añadiendo diferentes tonos. Puedes usar colores

que ya usaste en las plantas para que combinen mejor.

4- Añade tonos más oscuros para crear volumen en la roca.

5- Las duplicamos y hacemos [Volteado vertical]. Pulsamos [control + U] y modificando el deslizador de [Luminosidad], convertimos todas las piezas a color negro.

 

6- Las acercamos y con ayuda de un pincel mezclador unificamos las dos partes. Este proceso puede llevar un poco más de tiempo, asegúrate de que quede lo mejor posible.

Aquí algunos ejemplos de cómo utilizar las plantas y las rocas a la vez.

Rocas con hierba/montículos:

 

Vamos a crear algunas rocas con hierba para añadir más variedad.

 

1- Dibuja un montículo de hierba.

2- Añade color por debajo de la línea de boceto. En mi caso usé tonos verdes.

3- Poco a poco vamos dando detalles y añadiendo diferentes tonos. Puedes usar colores que ya usaste en las plantas para que combinen mejor. Este proceso es un poco complicado ya que requiere algo de tiempo. Puedes usar la herramienta [Regla simétrica] para ayudarte a crear este asset de una forma más rápida.

4- Una vez terminado, añadimos variaciones para romper con la simetría de la regla y que así no sea tan repetitivo.

Ahora a partir de esta roca podemos crear variaciones más grandes para decorar espacios abiertos.

Juntamos tres montículos y poco a poco los vamos unificando hasta conseguir un nuevo asset similar al anterior.

Aquí un ejemplo de cómo usar estos montículos de hierba.

Columnas:

 

También podemos crear columnas que podrán bloquear el paso del personaje o posicionarse por detrás del mismo, para sujetar plataformas flotantes o simplemente para usar como decoración.

 

1- Dibuja una columna con vegetación.

2- Añade color por debajo de la línea de boceto. En mi caso use los mismos colores que los del suelo, tonos verdes.

3- Poco a poco vamos dando detalles y añadiendo diferentes tonos. Puedes usar colores que ya usaste en las plantas para que combinen mejor.

4- Añade una silueta negra para tener más variedad que ayude a combinar con otros assets en negro. (Más abajo hay un ejemplo.)

Duplicamos el asset, y con la herramienta [Transformación Libre] Control + Shift + T, modificamos el asset según nos convenga.

Podemos usar [Voltear horizontal] para darle la vuelta, estirarlo o achacarlo para crear diferentes variaciones rápidamente.

Aquí un ejemplo de cómo utilizar las columnas con otros assets. Como ves el negro de las columnas queda perfecto con el techo.

Recopilación de assets creados hasta ahora:

Vamos a juntar todos los assets y ver si necesitamos crear algo más.

4- Extras

Ya que mi idea principal era crear un bosque voy a añadir algunas decoraciones más, quizás con colores diferentes para que destaquen sobre el resto, también podemos añadir algún tipo de obstáculo que haga daño al jugador como pinchos de espinas.

 

1- Dibuja plantas diferentes a las anteriores. También dibujé un pincho.

2- Añade color por debajo de la línea de boceto. En mi caso use algunos tonos azules y amarillos.

3- Poco a poco vamos dando detalles y añadiendo diferentes tonos. Puedes usar colores que ya usaste en las plantas para que combinen mejor, justo como en los assets anteriores.

4- Seguimos refinando las nuevas decoraciones hasta que estemos contentos con el resultado final.

A partir de estas podemos hacer variaciones nuevas de una forma muy rápida.

 

Duplicando la hoja varias veces, podemos recolocarla para crear una planta completamente nueva. La herramienta [Transformación Libre] Control + Shift + T nos será muy útil para este tipo de modificaciones rápidas.

Con el helecho podemos variar el color pulsando [control + U] y modificando el deslizadero de [Tono]. También podemos modificarlo con [Transformación Libre] Control + Shift + T.

Duplicando la hoja muchas veces y cambiando el tono y el brillo podemos crear diferentes plantas similares las unas a las otras y que combinen entre sí.

También podemos hacer lo mismo con los pinchos para crear hileras y paredes.

Aquí un ejemplo usando algunos de nuestros assets y estas nuevas decoraciones.

Recuerda jugar con elementos en negro para crear profundidad y contraste.

5- Borde negro y ejemplos finales

Esto es todo lo que he creado hasta ahora.

Aún podemos usar algún par de trucos más. Por ejemplo, a mí me gusta añadir un borde negro que rodee a todos nuestros assets. Es una técnica bastante sencilla que le da un toque un poco más cartoon.

 

1- Haz [control + clic] en la miniatura de capa. Verás que se añade una selección alrededor de nuestros assets.

2- Pulsa [Control + T] para entrar en el modo Escalar/Rotar. Verás que aparece un pequeño menú con diferentes botones e iconos. Pulsa en el icono que resalto en amarillo y accederemos a [Ampliar área seleccionada], con dos pixeles sería suficiente.

3- Hacemos clic en el icono de [Relleno] con color negro.

 

4- El resultado final sería nuestro asset con un borde negro.

Hacemos lo mismo con todos nuestros assets al mismo tiempo, y el resultado final sería el siguiente.

Estos son algunos de los escenarios que he logrado diseñar con estos assets para mi videojuego. Como puedes ver, se puede jugar con diferentes tonalidades para crear profundidad.

 

– Usando colores más claros podemos crear distancia.

– Usando colores más oscuros creamos cercanía.

En este he cambiado los tonos, para que sean más azules, con un simple clic podemos cambiar totalmente la sensación y apariencia de nuestros assets.

¡Cuidado con ese abismo de pinchos!

Consejos finales.

 

– Aprender a diseñar arte para videojuegos requiere mucho tiempo, creatividad y dedicación, no te desanimes si al principio las cosas no te salen bien.

– Como has visto en este tutorial Clip Studio Paint, tiene muchas herramientas que nos facilitan la creación de estos. Hazte maestro/a del programa para sacar el mayor partido a tu tiempo.

– Juega a videojuegos y observa su arte y como los creadores/oras diseñan los escenarios, inspírate de tus juegos favoritos, intenta pensar como los han creado, y después aplica lo observado en tus propias creaciones.

 

Espero que el tutorial te haya gustado, cualquier pregunta puedes dejar un mensaje más abajo.

¡Gracias!

Maaot.