Share
Todo lo viejo es nuevo otra vez, y los juegos retro son más populares que nunca. Alentados por la nostalgia y la abundancia de juegos casuales y de estilo arcade en dispositivos iOS y Android, los juegos de la vieja escuela están regresando. En este tutorial, te daré algunos consejos para crear un juego retro exitoso..
¿Qué queremos decir cuando hablamos de juegos 'retro'? No hay una definición concreta, pero normalmente pienso en juegos hechos antes de 1990. Esto incluye juegos de consolas como GameBoy, NES, Atari 2600 y Commodore 64, así como juegos clásicos de arcade como Pac man, Ciempiés, y Invasores espaciales.
Todos esos ejemplos utilizan gráficos de bloques, pixelados, de mapa de bits (o "raster"). Este es el tipo de juegos que probablemente vengan a la mente para la mayoría de las personas cuando piensan en juegos retro..
Pero los primeros videojuegos en realidad usaban gráficos vectoriales. Juegos como Zona de batalla, Asteroides y Tempestad fueron renderizados con líneas brillantes brillantes en lugar de píxeles en bloques.
Otro tipo de juego que usábamos los viejos era el simple juego de mano que usaba una pantalla LCD monocromática y una mecánica de juego extremadamente simple.
En este tutorial, vamos a hablar sobre los juegos de gráficos raster más populares, pero menciono estos otros tipos de juegos porque a menudo no son emulados, y creo que hay muchas oportunidades para que los diseñadores de juegos hagan algo realmente genial. con esos estilos.
Para crear un aspecto retro convincente, querrá trabajar con un conjunto limitado de colores.
Las consolas de juegos de la vieja escuela solo podían mostrar un número limitado de colores. Según el sistema, los gráficos se mostrarán en blanco y negro, en escala de grises o en color de 8 o 16 bits. Puedes ver ejemplos de las paletas de colores exactos de sistemas específicos en Wikipedia, pero no es importante elegir colores históricamente precisos siempre que mantengas un estilo consistente dentro de tu juego..
No nos enfrentamos a las mismas limitaciones de hardware que teníamos en el pasado, pero mantener su paleta limitada a unos pocos colores cuidadosamente seleccionados no solo enfatizará la estética retro, sino que también ayudará a definir la identidad de su juego. Mira estos dos ejemplos de paletas de colores de Super Mario Bros.:
Los colores son tan distintos que casi puedes reconocer el juego solo por las muestras de color..
David Sommers tiene una buena colección de paletas de juegos clásicos en ColourLovers.com.
Los colores exactos que elija dependerán del tema y el estado de ánimo de su juego, pero si se toma el tiempo de elegir un buen conjunto de colores, su juego se sentirá tan icónico como los clásicos. Echa un vistazo a estos ejemplos modernos:
Si tiene problemas para elegir colores que funcionen bien juntos, consulte este excelente tutorial de Tyler Seitz, Cómo elegir una paleta de colores para las ilustraciones de su juego.
Los juegos raster retro son más fácilmente reconocibles por sus grandes píxeles gruesos, desde un momento en que las resoluciones de pantalla eran mucho más bajas. En el mundo actual de pantallas HD y pantallas Retina, los píxeles físicos en nuestros dispositivos son apenas visibles, lo que no es lo suficientemente prominente como para obtener el aspecto retro de bloques..
Para tener en cuenta esto, necesitamos usar múltiples píxeles físicos para mostrar cada píxel visible en nuestros gráficos del juego.
Puedes decidir qué nivel de escala es apropiado para tu juego dependiendo de qué tan en bloque quieres que se vea tu juego. Por lo general, escalar hasta dos o tres veces el tamaño normal da un buen efecto. Tenga en cuenta que cuanto más grande vaya, menos podrá caber en la pantalla.
Te recomiendo que siempre dejes que tu motor de juego haga tu escalado de píxeles por ti. Esto significa que todos tus recursos y texto se dibujan al 100% (pequeño) y el juego simplemente escala todo el lienzo del juego para llegar al tamaño final. Podría dibujar activos con píxeles más grandes, pero esto aumentará el tamaño de los archivos y los tiempos de carga, y también puede tener un impacto negativo en el rendimiento del juego..
Tratar de escalar sus activos manualmente también puede llevar a inconsistencias en su escala de píxeles. En el ejemplo anterior, observe cómo los píxeles en el título del juego son enorme en comparación con los píxeles diminutos en el texto del botón "Jugar ahora". Además, nuestro personaje de juego es más bloqueado que su gema o el piso de la cueva. Algunas de estas diferencias son sutiles, pero todas se suman para hacer que el juego se vea un poco "apagado".
Neven Mrgan (co-creador de El incidente) Habla un poco más sobre esto en su blog..
Crear un arte de píxeles atractivo puede ser extremadamente desafiante. Requiere mucha práctica y es un tema demasiado extenso para cubrirlo completamente en este tutorial. Aquí hay algunos enlaces para comenzar, sin embargo:
Muchas personas utilizan programas gráficos regulares como Photoshop, Gimp o incluso MS Paint para dibujar pixel art.
Me resultó frustrante usar Photoshop una vez que comencé a tratar de animar personajes y colocar mosaicos sin costura. Así que creé una herramienta llamada Pickle para ayudar a completar algunas de las funciones que faltaban en los editores tradicionales, como vistas previas de animaciones en vivo, vistas previas de mosaicos sin fisuras y vistas previas de mosaicos de terreno..
Pickle tiene un conjunto de funciones limitadas y no satisface las necesidades de todos. Por suerte hay otras aplicaciones similares como Pyxel Edit, ASEPRITE y GraphicsGale.
Existen mucho De buenos tutoriales de pixel art en línea. Aquí hay algunos que he encontrado útiles en el pasado:
Diseñar personajes convincentes con gráficos de baja resolución puede ser realmente difícil. ¿Cómo puedes representar suficientes detalles para crear un personaje único con tan pocos píxeles y colores para trabajar??
Al igual que con el dibujo de pixel art en general, el diseño de personajes es algo que requiere paciencia y práctica. Podemos aprender algunas estrategias útiles de los personajes del juego clásico..
Echa un vistazo a nuestro amigo Mario aquí. Observe cómo se utilizan unos pocos píxeles para representar un carácter humano reconocible. Tres colores, sin contornos, sin sombras. ¿Cómo puedes dibujar una cara con estas limitaciones? Mira cómo los píxeles que dibujan el bigote de Mario también sirven para definir su nariz y boca..
También sería difícil atraer los brazos de Mario a este nivel de detalle sin que se fusionen con su cuerpo, haciendo que su cuerpo se vea como una pequeña mancha. Los creadores de Mario resolvieron este problema vistiéndole los monos. ¿Ves cómo las líneas de su ropa separan claramente sus brazos del resto de su cuerpo? Genio!
En este caso, agregar atributos físicos específicos al personaje (vello facial y mono) en realidad hace que sea más fácil dibujarlo dentro de las limitaciones gráficas. Las propias limitaciones informan el diseño del personaje..
Otra técnica para tratar con las limitaciones gráficas es ir abstracto. ¿Por qué molestarse en tratar de dibujar un carácter humano reconocible, si no es necesario? Mira a Pac-Man allí. No es un reconocible cualquier cosa. Es solo una mancha amarilla con una boca..
Pac-Man es un personaje memorable a pesar de su falta de atributos físicos. Obtiene su personalidad del juego: la forma en que se mueve a través del laberinto, sus efectos de sonido y la forma en que interactúa con sus enemigos..
¿Quién dice que necesitas tener personajes humanos en tu juego? ¿Por qué no hacer el próximo Pac-Man, Q * bert o Qix??
Al crear gráficos para la pantalla de título, los menús del juego y otros elementos de texto, como los puntajes, debe ser coherente con el estilo de sus activos gráficos. Esto significa mantener la misma paleta de colores, tamaño de píxel y estilo de arte..
La mayoría de las fuentes están diseñadas para ser suavizadas cuando se muestran en la pantalla. Esto significa que si intentamos hacerlos explotar para que coincidan con nuestro tamaño de píxel, veremos muchos píxeles ruidosos alrededor de los bordes de las letras. Tampoco coincide con la estética que buscamos. Es todo suave y borroso en lugar de crujiente y en bloques..
Así que queremos mostrar las fuentes sin suavizado. Pero simplemente mostrar una fuente normal sin suavizar generalmente se verá terrible. Simplemente no están diseñados para funcionar de esa manera. ¿Ves lo funky y difícil de leer que está al 100%? Cuando lo explotamos podemos ver muchos píxeles perdidos y trazos desiguales.
La respuesta es usar siempre fuentes que estén diseñadas para mostrarse sin suavizado. Leen de forma agradable y limpia en tamaños pequeños, y tienen ese gran aspecto retro cuando los hacemos grandes..
Algunas de mis fuentes de píxeles favoritas están hechas por Matthew Bardram de Atomic Media.
Una advertencia al usar fuentes de píxeles es que cada fuente está diseñada para funcionar solo en un tamaño determinado. Asegúrese de usar solo la fuente en este tamaño específico o en un múltiplo de ese tamaño. Entonces, si está utilizando una fuente diseñada para funcionar a 10 puntos, también se verá bien a 20 o 30 puntos, pero no a tamaños intermedios.
Piensa en qué tipo de mecánica de juego funcionará mejor con tu estilo artístico. Elegir un mecánico clásico y simplificado ayudará a tus jugadores a entrar en el ambiente retro. Algunas mecánicas de juego clásicas son tiradores espaciales (Asteroides, Invasores espaciales), plataformas (Super Mario Bros., Donkey Kong), y juegos de aventura (Aventuras, Zelda).
Tenga en cuenta que su estilo artístico limitado le hará más difícil transmitir información compleja al jugador, por lo que una simple mecánica puede ser un gran beneficio.
¿Qué tan simple puedes hacer tu juego? ¿Puedes diseñar un juego que use solo un botón para los controles??
Los juegos con un solo botón funcionan muy bien en dispositivos táctiles, ya que el jugador solo puede mezclarse en la pantalla sin tener que preocuparse por golpear áreas de botones no táctiles.
Una gran cantidad de juegos de estilo corredor sin fin utilizan el esquema de control de un botón (Canabalt, Jetpack Joyride, Alas minúsculas). ¿Puedes crear un estilo de juego diferente que funcione igual de bien con un solo botón para el control??
Si alguna vez has jugado uno de tus juegos arcade favoritos de la vieja escuela en un emulador de tu computadora, es posible que hayas notado que no se siente exactamente igual. Todo es un poco demasiado nítido y limpio en el monitor de su computadora en comparación con el aspecto borroso, parpadeante y distorsionado de un monitor arcade, o su viejo televisor CRT desde la infancia.
Algunas personas probablemente piensan que es bueno que no tengamos que soportar estos artefactos de distorsión de una época pasada, pero puede ser divertido agregar un poco de confusión a un juego de inspiración retro..
Aquí hay algunos ejemplos de formas en que puede emular una pantalla CRT antigua:
Líneas de escaneo: Puede usar un gráfico estático de líneas blancas horizontales, delgadas y estrechas, para simular líneas de escaneo CRT. Solo ponlos encima de tu juego. Ajuste la opacidad y el modo de fusión para lograr el estilo y la intensidad que desea.
Ruido: El ruido gaussiano puede agregar una textura agradable a tu juego. Idealmente, el ruido sería animado, pero una imagen estática funcionará lo suficientemente bien si el ruido de animación constante afecta el rendimiento de tu juego.
Difuminar: UNA muy leve la falta de definición agrega una cierta suavidad agradable a la imagen. No vayas demasiado lejos con este; Aún quieres poder ver los píxeles..
Color Fringing: Uno de mis efectos favoritos de la vieja escuela es agregar un poco de color RGB con flecos. Puedes hacer esto separando el lienzo del juego en canales separados para rojo, verde y azul y cambiando ligeramente fuera de alineación. Este efecto parece realmente bueno cuando está animado, pero puede ser bastante intensivo en el procesador, por lo que es posible que deba limitar su uso. Tengo otro tutorial donde muestro cómo implementar el efecto con AS3: Crear un efecto de distorsión de CRT retro usando el cambio de RGB.
Combinación: Combina múltiples efectos para la máxima diversión.!
También puede agregar una barra de rollo animada para simular un CRT que funciona mal.
El juego flash Crono X implementa muchos de estos efectos muy bien durante las transiciones del menú. Esta es una buena solución si le preocupan los efectos que afectan negativamente el rendimiento del juego..
No se enrede demasiado por las limitaciones de los juegos de la vieja escuela. Es más importante que el juego sea divertido, tenga un "sentimiento" retro que sea históricamente exacto.
Y trata de no solo recrear un clásico juego de acción espacial o de plataformas. Agrega algo de innovación para hacer que tu juego sea único. Use la estética retro como punto de partida, pero agregue algunos de sus propios estilos y elementos únicos para crear algo nuevo. Incluso puede ser divertido mezclar música, sonidos o elementos modernos (como efectos de partículas) para crear una nueva versión de los juegos clásicos de arcade..
Algunos buenos ejemplos de esto son Guerras de geometría que mezcla deslumbrantes efectos modernos en un juego arcade de estilo vectorial, Space Invaders Extreme donde un clásico juego de arcade se coloca sobre elegantes gráficos de fondo y se ajusta a la música electrónica moderna, o Fez, Un clásico juego de plataformas 2D Pixel Art que te permite transformar el mundo en un espacio 3D..
Eso es todo por ahora. Buena suerte ahí fuera! Suelta un enlace en los comentarios y muéstrame lo que haces. Me encantaría ver tu opinión sobre la estética retro..
Accentsconagua