Pixel art: del borrador al activo del juego

imagen ‚Üí imagen
En este artículo intentaré visualizar el enfoque general del trabajo. Entonces, decidió estudiar arte : descargó un software, lo lanzó y vio todas estas opciones, colores infinitos y mucho más, cerró rápidamente todo, eliminó el programa y arrojó su computadora portátil por la ventana.

Quiz√°s despu√©s de unos meses repita esto. A veces intentas dibujar un par de l√≠neas que se parecen al dibujo a l√°piz de un ni√Īo, o incluso peor, y decides soltarlo.

Si esto te resulta familiar, entonces este artículo es solo para ti, así que sigue leyendo.

Los desarrolladores de juegos independientes a menudo se quejan de que no pueden crear gr√°ficos, porque son programadores y no tienen dinero para pagar por los artistas.

Y aunque estudiar arte puede parecer una tarea desalentadora, en realidad puede elevarse a un nivel muy decente si pasa al menos un a√Īo en la pr√°ctica.

Si realiza el trabajo con mucha diligencia, puede obtener buenos resultados en unos pocos meses.

Prep√°rate para el pixel art


En este art√≠culo, hablar√© sobre pixel art. ¬ŅCrees que se ha convertido en clich√© y todos est√°n cansados ‚Äč‚Äčde √©l?

Bueno, de hecho, el pixel art es una excelente herramienta para convertirse en artista. Encontrar√° que habiendo dominado bastante bien el pixel art, puede cambiar f√°cilmente a otros estilos gr√°ficos.

Otra ventaja importante es que solo necesita un mouse y no tiene que gastar dinero en una tableta gráfica. De hecho, la mayoría de las personas que dibujan pixel art prefieren usar el mouse para una mayor precisión.

A menudo dicen sobre pixel art y esto: "puede verse hermoso, pero la mayoría del pixel art de los desarrolladores independientes es terrible".

Y estoy de acuerdo con esto, pero si sigues las reglas de este artículo, tu pixel art estará por encima del promedio, no te preocupes.

10 pasos para crear pixel art


La mejor manera de mejorar tu habilidad es aprender primero las reglas. Puede romperlos m√°s tarde, pero cuando aprende algo nuevo, seguir las reglas le da un fuerte impulso hacia adelante.

En este artículo, le contaré sobre diez pasos y un par de reglas para ayudarlo a comenzar. Puede repetirlos con cualquier gráfico de pixel art que necesite crear.

Para que el juego se vea bien, necesita un estilo gr√°fico seguro, y si sigues mis recomendaciones, lo lograr√°s.

Etapa 1 - la paleta


Nunca elijas los colores t√ļ mismo. El color es un arte en s√≠ mismo, pero, afortunadamente, podemos dejar que los profesionales lo hagan. Echa un vistazo aqu√≠ y elige una paleta de colores.

Tenga en cuenta que la cantidad de colores en las paletas puede ser diferente. No recomiendo usar paletas con m√°s de 32 colores, y para empezar, incluso 16 colores.

Para este artículo, elegiré dicha paleta . Era posible tomar cualquier otro, lo seleccioné al azar de la lista.



Etapa 2 - Resolución


Para comenzar, elija una resoluci√≥n peque√Īa. Si eres un principiante, entonces presiona el retro y crea sprites en el tama√Īo 16x16 o 32x32, no m√°s.

Puede usar otras proporciones, por ejemplo 24x32, lo m√°s importante, no demasiado de esto.



Etapa 3 - Esquemas


Al dibujar un objeto, primero dibuje en un color, por ejemplo negro, su contorno. No se permiten otros colores en esta etapa.

Se recomienda que siempre tenga una referencia ante sus ojos (imagen de referencia). Debería poder ver la referencia mientras dibuja, y no cambiar constantemente las ventanas.

También verifique que no haya agujeros en el circuito; en esta etapa, esto es lo más importante.



Dibujé a ese tipo con una resolución de 32x32. Se ve horrible

¡Al menos ahora no te quejarás de que no comencé desde el principio!

Etapa 4 - Colores


Después de asegurarse de que el contorno sea lo suficientemente bueno, puede comenzar a llenar la parte interna. La mayoría de los programas tienen la herramienta Relleno de color, y esta es la forma más rápida de llenar las áreas interiores con el color deseado.

Aqu√≠ nuevamente, use la menor cantidad de colores posible, y solo de la paleta que ha seleccionado. Un buen dise√Īo de personaje tendr√° al menos tres rangos diferentes. De hecho, un rango (rampa) es una forma de organizar los colores de la paleta de acuerdo con las familias de tonos, de oscuro a claro.

Por lo general, en esta etapa, debe elegir los colores del medio de cada rango, es decir, no muy oscuros ni muy claros, solo si por alguna razón dibuja un objeto o personaje para el que son necesarios.



Aquí hay un ejemplo de los posibles rangos de la paleta que seleccioné previamente. Tenga en cuenta que no agregué todos los colores de la paleta, solo algunos para que entienda el principio.

También se ve en la imagen que el color se puede usar en varios rangos, convirtiéndose en el color inicial o final.



Entonces, seleccioné varios colores de la paleta y pinté mi personaje.

¬ŅRecuerdas que dije que es importante no dejar agujeros?

Etapa 5 - Sombras


En esta etapa, muchos pueden quedarse atascados y, de hecho, puedes crear un juego hermoso solo en base a las etapas anteriores, sin sombras. Es suficiente cumplir con las reglas de la paleta de colores, mantener la integridad del estilo artístico y su juego ya se verá mejor que la mayoría de los demás.

Pero para crecer como artista, debes dominar la habilidad de sombreado.

Para empezar, hay un truco simple: debes elegir la dirección de la iluminación en el juego, izquierda o derecha, y luego seguirla al crear cada sprite, mosaico y todo lo demás.

Nota

Esto significa que si tienes un personaje mirando hacia la derecha, de modo que mira hacia la izquierda, no puedes reflejarlo en el código. Necesita ser redibujado teniendo en cuenta la dirección fija de la luz.


La idea principal del sombreado es que las partes de la imagen sobre las que cae la luz directa se vuelven m√°s brillantes, y las partes que no caen la luz permanecen en la sombra, por lo que se vuelven m√°s oscuras. Muy simple, verdad?

Pero si eres nuevo en gr√°ficos, lo m√°s probable es que no entiendas c√≥mo hacerlo, y la mayor√≠a de los tutoriales no explican esto, porque solo leer las palabras no te ense√Īa c√≥mo.

Por lo tanto, aquí está el truco para ti. En mi ejemplo, tomaré la iluminación que cae a la derecha.

Para comenzar, seleccionaré un color más claro para cada color de carácter y un color de cada píxel ubicado a la derecha o arriba.

Luego, para cada color de personaje, elegiré un color más oscuro y los colorearé con cada píxel de cada borde ubicado a la izquierda o al fondo.



Sé que esto se ve bastante horrible, pero sigue leyendo y mejoraremos la situación pronto.

Si por alguna razón esta etapa le parece demasiado complicada, amplíe y vea cómo lo hice: se agregaron dos tonos adicionales para los colores azul, rojo y beige. Todos ellos se seleccionan de la paleta y se trazan con la regla "arriba-derecha" / "izquierda-abajo".

Etapa 6 - Proporciones


Esta es otra fuente de fracaso para un artista novato. Afortunadamente, el pixel art de baja resolución lo simplifica enormemente.

En esta etapa, todo se vuelve bastante subjetivo. Esto puede sorprenderlo, pero para convertirse en un buen artista, necesita practicar no con las manos, sino con los ojos.

Tu tarea principal es despertar en ti mismo algo llamado la "mirada del artista". Esta es una habilidad especial que le permite mirar cosas y descomponerlas en componentes, y luego doblarlas usted mismo.

"Artist's View" se revela mediante una combinaci√≥n de crear sus propios gr√°ficos y estudiar los trabajos de otras personas. Ambos pasos son necesarios: si contin√ļa dibujando sin mirar el trabajo de otros, o simplemente estudia a otros sin dibujar, este aspecto no se desarrollar√°.

Revisemos sus propios ojos: mire nuevamente este terrible duende y d√≠game qu√© partes se ven est√ļpidas.



(No pierda el tiempo buscando diferencias entre esta y la imagen anterior, son las mismas, solo lo repetí aquí por conveniencia).

Lo primero que viene a la mente es que nuestro personaje parece caer. Vamos a ayudarlo.



Lo √ļnico que hice aqu√≠ fue mover algunos p√≠xeles horizontalmente. De esto podemos entender que crear dibujos es un proceso muy iterativo. No podr√° hacer todo bien la primera vez, debe hacer un mont√≥n de revisiones.

Echemos otro vistazo a esta versión y pensemos qué tiene de malo ahora.

Me parece que el pobre personaje está bailando, pero no debe bailar, así que vamos a arreglarlo.



Genial, la pose ha mejorado, y también le agregué pantalones.

Nota

Puede usar miles de referencias de Internet para crear poses. Incluso algunas fotos al azar pueden ser suficientes.

No pienses que los artistas solo dibujan desde su imaginación, ¡miran las referencias!

Esto es similar a cómo los codificadores visitan Google o Stack Overflow todos los días: a nadie le importa.

Etapa 7 - limpia los bloques


¬ŅVes estos feos grupos de p√≠xeles negros?

Vamos a deshacernos de todos y crear una regla de que un píxel puede tocar un máximo de otros dos píxeles.



El personaje se ha vuelto más limpio. Por alguna razón, este cambio me hizo darme cuenta de que debería tener una nariz larga, así que agréguela.

A veces, el proceso de edición en sí mismo nos da inspiración.

Nota

Al eliminar grupos de píxeles, hay algunas excepciones: a veces no puede eliminar un píxel específico, incluso si forma un grupo, porque de lo contrario aparecerá un agujero en el contorno.



Agregué una nariz y cambié ligeramente la forma de la cabeza para que se ajustara mejor a la nariz.

También agregué contornos alrededor de las piernas para adaptarse al resto de las piernas. ¡Todo el arte en el juego debe ser holístico!

Etapa 8 - limpia las sombras


El truco que usamos al sombrear funcionó, pero en algunas partes el personaje todavía se ve un poco feo.

Si su vista del artista ya ha sido activada, tendrá la preferencia de reemplazar los píxeles oscuros y claros con un tono más neutro.



Aquí hice un par de acciones: reemplacé todos los píxeles brillantes y oscuros que parecían fuera de lugar, y luego cambié los contornos exteriores.

Pixel art tiene una resolución tan baja que los contornos ocupan el espacio necesario para los detalles. En algunos lugares importantes son necesarios, pero no en este caso.

También agregué al personaje brazos y piernas, más consistente con el estilo de sus otras partes.



Un ligero cambio: le cambi√© los pantalones y mov√≠ un par de p√≠xeles. Pero algo parece extra√Īo, no entiendo qu√© hacer a continuaci√≥n.

Intentemos eliminar los contornos, reemplazándolos con los colores de los píxeles más cercanos.



Si miras al personaje ahora, entonces las piernas se ven extra√Īas, como un centauro. Y tiene una cara extra√Īa: su nariz mira en una direcci√≥n y sus ojos en la otra.

Los artistas usan un truco que le permite al cerebro buscar errores: miran la imagen desde un √°ngulo diferente.

Una nueva mirada le permite notar lo que no había visto antes, y cuando limpié los contornos, ¡podía mirar la imagen invertida!



Entonces, rehice muchas partes de su cabeza, brazos y piernas. Ya se ve completamente diferente, un poco m√°s correcto.

Pero espera, ¬Ņpor qu√© no tiene o√≠dos? ¬ŅY por qu√© parece que su sombrero est√° colgando en el aire y no est√° conectado a su cabeza?



Lo arreglamos, y ahora el personaje comenz√≥ a verse mucho m√°s profesional. Mira el sombreado del sombrero. ¬ŅEntiendes c√≥mo funciona?

Simplemente aplica la misma regla: luz en un lado, sombra en el otro. Cuando se implementa correctamente, el personaje se ve casi tridimensional.

Para que el sombreado se vea bien, si a√ļn no ha abierto el "ojo del artista", pruebe diferentes combinaciones de p√≠xeles oscuros, neutros y claros.

Siempre quédate con tres tonos. Aquí es difícil cometer un error, porque cuando se trabaja con sprites de baja resolución, hay muy pocos cambios.

Sin embargo, la apariencia del sombreado a veces puede ser altamente dependiente de un solo píxel. Comprenderá esto con tiempo y práctica.

Nota

Una vez que comience a comprender cómo funciona el sombreado, puede crear mejor objetos que tengan volumen, que es la tarea principal del sombreado.

Sin embargo, vale la pena recordar que el sistema que estamos estudiando con tres tonos es más que suficiente para la mayoría de los píxeles de baja resolución. Agregar más sombras hace que el pixel art sea más desordenado y ruidoso.


Etapa 9 - depuración


Sí, el personaje ya se puede usar, pero continuemos mejorándolo.

Otro truco simple que le permite agregar volumen es saber que en las partes m√°s lejanas de los objetos necesita usar sombras m√°s oscuras.



Por lo tanto, hice una de las manos y una de las piernas de un tono m√°s oscuro, todo es simple.

¬°Mejoremos algo m√°s!



Aquí cambié un poco la posición de las manos. Es perfectamente normal volver a dibujar partes de un personaje hasta que esté completamente satisfecho. Cuanto más practique, más rápido obtendrá un resultado de alta calidad y menos alteración será necesaria.

También agregué una bufanda y cabello. Tenga en cuenta que si agrega elementos diferentes que están cerca uno del otro y tienen los mismos colores o similares, entonces esto será confuso.

En nuestro caso, la bufanda le permite agregar contraste para separar el cabello de la camisa.

Tambi√©n cambi√© un poco el color de los ojos, esto ya est√° relacionado con el dise√Īo del personaje: me pareci√≥ que los ojos negros no se corresponden con el resto de las partes.

¬ŅY luego necesitas dos p√≠xeles oscuros en el medio de la camisa?

Principalmente por el experimento: lo probé y me gustó el resultado. Dado que el arte de píxeles de baja resolución requiere un poco de imaginación, estos dos píxeles aluden a pliegues en la ropa, o que el personaje lleva un cuello de tortuga, o que es una mujer.



Finalmente, devolví el contorno nuevamente, dibujando un píxel a la vez y evitando crear grupos de píxeles.

Dibujar contornos o no es básicamente una cuestión de preferencia. Pero ayudan a crear un contraste entre los personajes y el fondo.



Un circuito no tiene que ser siempre negro. Aquí hay una forma alternativa de crear una ruta: observamos los píxeles adyacentes a la ruta y seleccionamos un tono ligeramente más oscuro.

Por supuesto, siempre uso solo los colores de la paleta original, ¬°no lo olvides!

Esta √ļltima versi√≥n puede verse mejor, pero cuantos m√°s colores, m√°s tiempo se dedicar√° a la animaci√≥n. Por lo tanto, aqu√≠ volver√© al contorno negro nuevamente.

Nota

Si compara la versión con el circuito y la versión sin el circuito, entonces el circuito puede parecer "pesado".

La elección de una u otra opción depende del efecto que se necesita para su estilo gráfico.

imagen

Etapa 10 - Animación


En esencia, la animación es la siguiente: tomamos nuestro sprite y creamos marcos ligeramente diferentes en otras poses.

La baja resoluci√≥n del pixel art tambi√©n ayuda a ense√Īar animaci√≥n. Comencemos con la animaci√≥n inactiva, la m√°s f√°cil de todo tipo de animaciones.





De hecho, solo seleccioné la mitad del sprite y lo moví hacia abajo. Si eres un desarrollador perezoso, ¡esto será suficiente para ti, pero no para mí!





Esta vez moví unos cuantos píxeles más, moviendo mi cabello, mi sombrero y mi nariz hacia arriba. Esto se hace porque cuando mueves la cabeza hacia abajo, todo lo demás también se mueve hacia abajo, pero no al instante, lo que agrega un retraso a estas partes.

Moví ambos brazos ligeramente hacia la izquierda para simular un ligero movimiento secundario. Este no es un término especializado, simplemente significa que es una acción independiente, no conectada de ninguna manera con las vibraciones de la cabeza.

Etapa 10 - Animación de subpíxeles


Si llegas aquí, ya estás entrando en el territorio de tareas más complejas.

Hasta ahora, la baja resolución ha ayudado a ocultar el hecho de que estamos estudiando gráficos, pero a veces funciona en nuestra contra.

El √ļltimo disparo fue un buen ejemplo: los movimientos del sombrero y la nariz son demasiado fuertes. ¬°Pero solo los movimos un p√≠xel hacia arriba!

Ahora, si pudi√©ramos moverlos menos de un p√≠xel para suavizar el movimiento ... Pero, por desgracia, un p√≠xel es el valor m√°s peque√Īo.

Sin embargo, hay un truco: en lugar de mover píxeles, ¡podemos mover colores!





Por lo tanto, devolví la nariz y el sombrero a su lugar original, y en cambio solo cambié los colores, llenándolos con los tonos oscuros y claros correspondientes, ya que me pareció correcto.

Y este truco también depende de tu "aspecto del artista". Entrenarlo activamente, y gradualmente comenzará a trabajar más fácil y más rápido.

Conclusión


Espero que hayas disfrutado viéndome convertir una figura completamente sin forma de palos y círculos en un personaje que se pueda usar en el juego. Traté de mostrar todas las etapas y explicar por qué y cómo las realicé, para que esto no se convierta en otro tutorial "dibuja el resto de la lechuza".



Planeo publicar art√≠culos similares sobre otros temas, por ejemplo, juegos de fichas, modelos low-poly o incluso m√ļsica, todo depende del tiempo libre y la motivaci√≥n.

Adem√°s, aseg√ļrese de leer mi art√≠culo sobre gr√°ficos perfectos en p√≠xeles , que tambi√©n es muy importante para crear un estilo gr√°fico coherente.

Source: https://habr.com/ru/post/444738/


All Articles