Share
Lo que vas a crearMuchos desarrolladores de juegos son programadores primero y artistas segundo. Ya sea que estés usando pixel art porque prefieres el aspecto "retro", o simplemente no tienes el tiempo o la experiencia para llevar tu arte al siguiente nivel, este simple efecto puede aumentar enormemente el atractivo visual de tu juego.
Este estilo de píxeles biselados se logra al ampliar primero el arte de píxeles 1: 1 manteniendo la relación de aspecto original. Luego, a través de un proceso muy simple que se puede aplicar durante la creación de activos o en tiempo de ejecución, puede convertir su arte de píxeles estándar en algo que se vea bien incluso en resoluciones de alta definición. El efecto es tan simple que puede aplicarse en casi cualquier lenguaje de programación, entorno de desarrollo y motor. En este tutorial, te presentaré los píxeles biselados de tal manera que podrás implementar este efecto con confianza en tu propio proyecto de juego..
Entonces, ¿qué es exactamente un píxel biselado? Un solo píxel es el elemento gráfico más pequeño que se utiliza para representar el arte en forma digital, por lo que, de alguna manera, puede pensar en los píxeles como bloques de construcción 2D. Un píxel biselado simplemente se expande en ese concepto de bloque de construcción mediante la introducción de profundidad artificial.
Las cosas se vuelven un poco confusas cuando te das cuenta de que los píxeles biselados se componen de múltiples píxeles "regulares", pero en realidad no es tan complicado como parece. Para comprender completamente el proceso, comenzaremos desde el principio con una comprensión básica de los píxeles..
En primer lugar, vamos a hablar de los tamaños de píxeles y las proporciones. La imagen de arriba muestra el mismo sprite en su tamaño original, y luego se amplía hasta cinco veces ese tamaño. Para cada ampliación, el "bloque de construcción" del píxel original también aumenta de tamaño. Cuando un píxel estándar se amplía cinco veces (500%), se convierte en un bloque de píxeles 5x5. Ahora te quedas con un sprite que tiene una proporción de 1: 5 píxeles. Este número simplemente significa que cada píxel 1x1 en el sprite original ahora está representado por un bloque de píxeles 5x5. El sprite completo, que originalmente mide 14x15 píxeles, ahora tiene un tamaño de 70x75 píxeles.
Ahora que nuestro sprite está compuesto de "bloques" de píxeles mucho más grandes, podemos ver cómo funcionan los píxeles biselados.
La imagen de arriba muestra el mismo sprite usando píxeles estándar a la izquierda y píxeles biselados a la derecha. Con píxeles estándar, cada bloque de 5x5 está compuesto del mismo color. En el ejemplo de píxeles biselados, podemos ver que el bloque 5x5 ahora consta de varios tonos diferentes del mismo color..
El primer cuadrado de cada versión es el bloque de 5x5 píxeles que representa el píxel estándar 1x1 en la imagen original. El segundo conjunto de cuadrados es una versión ampliada de este bloque 5x5 para mostrar la composición del bloque de píxeles biselado. Estos píxeles están organizados de tal manera que dan la ilusión de profundidad, con puntos destacados en la esquina superior derecha del bloque 5x5 y sombras en la esquina inferior izquierda. Cuando se combina para crear la imagen final, esto da como resultado un sprite que parece estar formado por pequeños bloques biselados, en lugar de píxeles planos y en 2D..
Ahora que comprende los conceptos básicos de los píxeles biselados, resumamos brevemente cómo se logra este efecto.
Primero, debe determinar si va a implementar este efecto en el tiempo de ejecución en su juego real, o generar sus activos de arte con píxeles biselados "horneados". En cualquier caso, el efecto de píxel biselado se logra de la misma manera..
Comience por crear un sprite de bisel que tenga la misma dimensión que el tamaño final de su "bloque de sprite". Por ejemplo, si su diseño final será 1: 4 (se ampliará cuatro veces), creará un bloque de bisel 4x4. Este bisel se aplica en la parte superior del sprite ampliado o en la ventana del juego, y se repite para llenar toda la pantalla. Al jugar con modos de mezcla y opacidad, puede lograr diferentes resultados.
Cubriré ambos métodos con mayor detalle más adelante, pero por ahora debemos prestar atención a algunas reglas y pautas críticas..
Si bien este efecto se logra fácilmente aplicando una superposición simple, hay varias cosas importantes que pueden evitar que los píxeles biselados se alineen correctamente.
El problema más obvio es el tamaño del sprite en comparación con el tamaño de su superposición de bisel. Todos sus activos tienen que seguir la relación de ampliación dictada por el tamaño de su bloque de bisel, o las líneas de bisel no serán consistentes.
También es importante decidir el tamaño de la ventana de tu juego antes de ampliar cualquiera de tus activos. Si el tamaño de la ventana de tu juego es 640x480px, y quieres usar un biselado 4x4 (relación 1: 4), entonces tus recursos originales deberían diseñarse a 160x120px. Al ampliar los activos artísticos, recuerde que todo debe ser 'X' más grande que el tamaño original, donde 'X' es un número entero.
Cualquier cambio en la vista del juego o el posicionamiento individual del sprite también debe considerarse cuidadosamente al intentar dibujar la superposición de bisel. Esto nos lleva a la regla más importante a seguir:
El movimiento basado en la red es obligatorio! En la imagen de arriba, tenemos un ejemplo correcto de movimiento basado en cuadrícula a la izquierda y un ejemplo incorrecto a la derecha. Debido a que los recursos originales se han ampliado cuatro veces, todo movimiento vertical y horizontal debería ajustarse a una cuadrícula de 4x4. El gato sprite, a la derecha, ha movido un píxel a la derecha y un píxel hacia abajo, lo que ha provocado que el sprite rompa el flujo de bloques biselados incluso.
Ese fue un ejemplo de un efecto de píxel biselado que fue "incorporado" a los activos. El siguiente ejemplo muestra lo que sucede cuando no sigue el movimiento basado en la cuadrícula al implementar el efecto en tiempo de ejecución:
Observe cómo la superposición de píxeles de bisel está ligeramente desalineada en toda la imagen. Esto se debe a que la superposición de bisel cubre toda la ventana del juego y no se mueve, mientras que los sprites de abajo se mueven pero no se ajustan a la cuadrícula de 4x4. Recuérdalo todos el movimiento en el juego tiene que ajustarse a la cuadrícula dictada por el tamaño de su bloque de bisel, que está determinado por el índice de ampliación de activos.
Sí, tiene más sentido lógico implementar este efecto dentro de su código de juego en lugar de hacerlo durante la creación de activos. Sin embargo, la aplicación de este efecto durante la creación de activos le permite más libertad para experimentar rápidamente y encontrar el estilo perfecto que se adapte a su proyecto. Puede aplicar varias superposiciones utilizando diferentes estilos de fusión, ajustar la saturación y el contraste de su arte subyacente y reemplazar los colores para encontrar el equilibrio adecuado antes de decidir su aspecto final.
Este es un ejemplo ampliado de un bloque biselado de 6x6. Querrá mantener los bloques biselados en un fondo transparente, pero aquí usé azul para que pueda ver la diferencia en la opacidad.
Para crear este bloque de bisel, comencé con un lienzo que se ajustaba al tamaño de mi arte final previsto. En este ejemplo en particular, creé una imagen de 6x6 destinada a 1: 6 píxeles de imagen (600% de ampliación). Luego, con un pincel de un píxel, comencé en la esquina inferior izquierda y apliqué tres píxeles de negro con un 75% de opacidad. Cuando me alejé de la esquina, reduje la opacidad de mi pincel al 50% y finalmente al 25%. Luego reflejé esa misma técnica, pero con blanco, comenzando en la esquina superior izquierda.
Muchas herramientas comunes, como Photoshop y GIMP, le permiten crear y definir patrones personalizados. Esta es la forma más rápida y fácil de llenar todo el lienzo con una superposición de píxeles biselados. Para el ejemplo anterior, quité el fondo azul y guardé el bloque biselado como un patrón. Ahora, cada vez que quiero aplicar esta superposición a mi arte, todo lo que tengo que hacer es usar la herramienta Bote de pintura para colocar el patrón en la capa superior.
Después de definir algunos patrones de bloques biselados personalizados, puede comenzar a experimentar con diferentes estilos. Arriba, tenemos cuatro estilos de bisel diferentes aplicados a la misma imagen. Observe cómo los cambios sutiles en la construcción y la opacidad de los diversos bloques biselados pueden alterar en gran medida la forma y la intensidad de los sprites resultantes. Experimente con diferentes tamaños y estilos para encontrar el tipo de bisel que complementa su arte de píxeles.
Los diversos modos de mezcla que ofrece la mayoría de las herramientas de dibujo también pueden dar lugar a efectos drásticamente diferentes.
En la imagen de arriba, el mismo estilo de bisel se aplica utilizando tres modos de mezcla diferentes. El modo de superposición estándar crea una imagen muy llamativa y vibrante, con un contraste intenso entre las áreas claras y oscuras del bisel. El modo Color Burn silencia completamente las áreas de luz del bisel, creando un bisel casi triangular e inconexo. El modo de luz suave es perfecto para colores apagados, creando un borde biselado menos pronunciado.
En lugar de insertar recursos en tu juego que tienen este efecto incorporado, puedes generar la superposición de píxeles biselados en tiempo de ejecución. Esto resultará en un juego que es mucho más escalable y adaptable si alguna vez decides cambiar los recursos, el movimiento de la cuadrícula o el tamaño de la ventana del juego más adelante.
Si bien no puedo decirle exactamente cómo implementar este efecto en su proyecto específico, definitivamente puedo indicarle la dirección correcta. La mayoría de los IDE de juegos tienen la funcionalidad general requerida para este efecto, por lo que no debería tener ningún problema al integrar una superposición de píxeles biselados en su proyecto. Los usuarios de Flash y ActionScript, por ejemplo, pueden usar ColorMatrixFilter para aplicar modos de fusión a la superposición de bisel, y los usuarios de Game Maker pueden usar las herramientas integradas de primer plano, o incluso crear un objeto dedicado de superposición de bisel que se apoya en una capa específica sobre el arte. bienes.
Primero, debe decidir cómo va a manejar la ampliación inicial de activos. Recomiendo usar 1: 1 pixel art y escalar todo antes de dibujarlo en la pantalla, luego aplicar la superposición de bisel como un efecto de posprocesamiento.
En segundo lugar, debe pensar en crear un menú de depuración que le permita probar varios tamaños de bisel y modos de mezcla. Nunca se sabe cómo reaccionarán los diferentes colores y movimientos a ciertas superposiciones de bisel, así que juegue de forma segura y experimente con tantas combinaciones como pueda. Puedes encontrar que es necesario cambiar la opacidad o el modo de mezcla durante ciertas escenas de tu juego, por lo que ser capaz de probar esto en tiempo real definitivamente será útil.
También debe planificar cómo manejará el HUD o la GUI para su juego. ¿Desea que estos elementos se sitúen por encima o por debajo de la superposición de píxeles biselados??
El efecto de píxel biselado aplicado a algunos juegos familiares de la vieja escuela..Este efecto es una manera maravillosa de condimentar tu arte de juego sin requerir algoritmos complejos, sombreadores o un artista increíblemente talentoso. ¿Tienes prisa por el tiempo en un juego de mermelada? Esta es una manera rápida y fácil de agregar un poco de brillo visual adicional a su trabajo.
Sin embargo, el aspecto más valioso de este efecto es que lo alienta a ensuciarse las manos y experimentar, lo que sin duda lo llevará a una serie de otros descubrimientos en el camino..
Accentsconagua