Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. Aesthetics

Yendo Vieja Escuela: Hacer juegos con una estética retro

by
Read Time:12 minsLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Todo lo viejo es nuevo de nuevo, y los juegos retro son más populares que nunca. Apoyados por la nostalgia y la abundancia de juegos casuales y de estilo arcade en iOS y dispositivos Android, los juegos de la vieja escuela están haciendo una reaparición. En este tutorial te daré algunos consejos sobre la creación de un exitoso juego con temas retro.


Elegir un estilo retro

¿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 clásicos juegos de arcade como Pac Man, Centipede y Space Invaders.

Todos estos ejemplos utilizan gráficos en bloques, pixelados, de mapa de bits (o "ráster"). Estos son el tipo de juegos que probablemente vienen a la mente para la mayoría de la gente cuando piensan en juegos retro.

Retro Games with Raster GraphicsRetro Games with Raster GraphicsRetro Games with Raster Graphics
Gráficos de trama: Pac Man (Arcade), Frogger (Atari 2600), Super Mario Bros. (GameBoy)

Pero los primeros videojuegos realmente utilizaban gráficos vectoriales. Juegos como Battlezone, Asteroids y Tempest fueron renderizados con brillantes líneas brillantes en lugar de píxeles en bloque.

Retro Games with Vector GraphicsRetro Games with Vector GraphicsRetro Games with Vector Graphics
Gráficos Vectoriales: Battlezone (Arcade), Tempest (Arcade), MineStorm (Vectrex)

Otro tipo de juego que solían jugar los viejos eran simples juegos de mano que utilizaban una pantalla LCD monocromática y una mecánica de juego extremadamente sencilla.

Retro Games with LCD GraphicsRetro Games with LCD GraphicsRetro Games with LCD Graphics
Gráficos LCD: Donkey Kong Jr. (Game & Watch), Fábrica de Cemento de Mario (Game & Watch)

En este tutorial, vamos a hablar sobre los juegos de gráficos raster más populares, pero menciono estos otros tipos de juegos porque no suelen emularse, y creo que hay mucha oportunidad para que los diseñadores de juegos hagan algo realmente genial con esos estilos.


Creación de una paleta de colores

Para crear una apariencia retro convincente, querrá trabajar con un conjunto limitado de colores.

Las consolas de juegos de la vieja escuela sólo podían mostrar un número limitado de colores. Dependiendo del sistema, los gráficos se mostrarán en blanco y negro, escala de grises o color de 8 o 16 bits. Puede ver ejemplos de las paletas de colores exactas de sistemas específicos en Wikipedia, pero no es importante elegir colores históricamente precisos siempre y cuando mantenga un estilo consistente dentro de su juego.

No nos enfrentamos a las mismas limitaciones de hardware que hicimos en el pasado, pero mantener su paleta limitada a unos cuantos colores cuidadosamente elegidos no sólo hará hincapié en 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 .:

Color Palettes from Super Mario Bros.Color Palettes from Super Mario Bros.Color Palettes from Super Mario Bros.

Los colores son tan distintos, casi se puede reconocer el juego sólo de las muestras de color.
David Sommers tiene una bonita colección de paletas de juego clásicas en ColourLovers.com.

Los colores exactos que elija dependerá del tema y el estado de ánimo de su juego, pero si usted toma el tiempo para elegir un buen conjunto de colores de su juego se sentirá tan icónico como los clásicos. Echa un vistazo a estos ejemplos modernos:

Modern Games with Retro PalettesModern Games with Retro PalettesModern Games with Retro Palettes
Canabalt de Adam Atomic, El último cohete de Shaun Inman, Fez de Polytron

Si tienes problemas para elegir colores que funcionan bien juntos, echa un vistazo a este gran tutorial de Tyler Seitz, Escogiendo una paleta de colores para las ilustraciones de tu juego.


Elegir un tamaño de píxel

Retro raster juegos son más fácilmente reconocidos por sus grandes píxeles gruesos, desde un momento en que las resoluciones de pantalla eran mucho más bajos. En el mundo actual de las pantallas de alta definición y las pantallas de Retina, los píxeles físicos de nuestros dispositivos son apenas visibles - no lo suficientemente prominentes como para obtener el aspecto retro bloque.

Scaling Up a Game SpriteScaling Up a Game SpriteScaling Up a Game Sprite
En este ejemplo, cada píxel de nuestro gráfico de caracteres se muestra en pantalla con cuatro píxeles físicos.

Para tener en cuenta esto, necesitamos utilizar múltiples píxeles físicos para mostrar cada píxel visible en nuestros gráficos de juego.

Different Scale FactorsDifferent Scale FactorsDifferent Scale Factors

Usted puede decidir qué nivel de escalado es apropiado para su juego dependiendo de cuan bloqueado desea que su juego se vea. Por lo general, la ampliación a dos o tres veces el tamaño normal da un buen efecto. Tenga en cuenta que cuanto más grande vaya, menos podrá ajustar en la pantalla.

Te recomiendo que siempre dejes que tu motor de juego haga tu escala de píxeles para ti. Esto significa que todos sus activos y texto están dibujados al 100% (pequeño) y el juego simplemente aumenta la escala de toda la lona del juego para llegar al tamaño final. Realmente 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.

Pixel Scale InconsistenciesPixel Scale InconsistenciesPixel Scale Inconsistencies
Los tamaños de píxeles inconsistentes no parecen muy correctos.

Tratar de escalar sus activos manualmente también puede conducir 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 enormes comparados con los diminutos píxeles en el texto del botón "Reproducir ahora". Además, nuestro personaje de juego es más bloqueador que su joya o el piso de la cueva. Algunos de estos son sutiles diferencias, pero todos ellos se suman para hacer que el juego se vea un poco "apagado".

Neven Mrgan (co-creador de The Incident) habla un poco más sobre esto en su blog.


Dibujo Pixel Art

La creación de arte de píxeles de gran apariencia puede ser muy difícil. Se necesita mucha práctica, y es un tema demasiado largo para cubrir completamente en este tutorial. Aquí hay algunos enlaces para empezar:

Herramientas de dibujo y animación

Muchas personas utilizan programas de gráficos regulares como Photoshop, Gimp, o incluso MS Paint para dibujar arte pixel.

Me pareció frustrante usar Photoshop una vez que empecé a tratar de animar a los personajes y establecer baldosas sin fisuras. Así que creé una herramienta llamada Pickle para ayudar a completar algunas de las funcionalidades que faltaban en los editores tradicionales, como las previsualizaciones de animación en vivo, las vistas previas de azulejos sin fisuras y las previsualizaciones de azulejos de terreno.

Pickle Sprite EditorPickle Sprite EditorPickle Sprite Editor

Pickle tiene un conjunto limitado de funciones y no satisface las necesidades de todos. Por suerte hay otras aplicaciones similares como Pyxel Edit, ASEPRITE y GraphicsGale.

Tutoriales

Hay un montón de buenos tutoriales de arte de píxeles en línea. Éstos son algunos de los que he encontrado útil en el pasado:


Diseño de personaje

El diseño de personajes convincentes con gráficos lo-res puede ser muy difícil. ¿Cómo puede representar los detalles suficientes para crear un carácter único con tan pocos píxeles y colores para trabajar?

Al igual que con el dibujo de arte de píxeles en general, el diseño de caracteres es algo que requiere paciencia y práctica. Podemos aprender algunas estrategias útiles de los personajes clásicos del juego.

Limitaciones del uso a su ventaja

Mario Mario

Echa un vistazo a nuestro amigo Mario aquí. Observe cómo pocos píxeles se utilizan para representar un carácter humano reconocible. Tres colores, sin contornos, sin sombreado. ¿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 la boca también.

También sería difícil dibujar los brazos de Mario a este nivel de detalle sin tenerlos fusionados en su cuerpo, haciendo que su cuerpo parezca una pequeña gota. Los creadores de Mario resolvieron este problema vistiéndolo. ¿Ves cómo las líneas de su ropa separan claramente sus brazos del resto de su cuerpo? ¡Genio!

En este caso, la adición de atributos físicos específicos para el personaje (pelo facial y overoles) en realidad hacen más fácil para atraerlo dentro de las limitaciones gráficas. Las propias limitaciones informan el diseño del personaje.

Ir a lo abstracto.

Pac-Man and GhostsPac-Man and GhostsPac-Man and Ghosts

Otra técnica para tratar con limitaciones gráficas es volverse abstracto. ¿Por qué molestarse en intentar dibujar un personaje humano reconocible, si no tienes que hacerlo? Mira a Pac-Man allí. No es nada reconocible. Es sólo una gota amarilla con una boca.

Pac-Man es un personaje memorable a pesar de su falta de atributos físicos. Obtiene su personalidad desde el 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 siguiente Pac-Man, Q * bert o Qix?


Menú y texto de puntuación

Al crear gráficos para su pantalla de título, menús en el juego y otros elementos de texto como las puntuaciones que necesita para mantenerse coherente con el estilo de sus activos gráficos. Esto significa mantener la misma paleta de colores, tamaño de píxeles y estilo artístico.

Antialiased TextAntialiased TextAntialiased Text
Gotham Bold por Hoefler y Frere-Jones (anti-aliased)

La mayoría de las fuentes están diseñadas para ser suavizadas cuando se muestran en la pantalla. Esto significa que si tratamos de volar para que coincida con nuestro tamaño de píxeles, vamos a ver una gran cantidad de píxeles ruidosos en los bordes de las letras. También simplemente no coincide con la estética que estamos buscando. Es todo suave y borroso en lugar de nitido y en bloques.

Aliased TextAliased TextAliased Text
Gotham Negrita sin anti-aliasing

Por lo tanto, queremos mostrar las fuentes sin anti-aliasing. Pero simplemente mostrar una fuente normal sin suavizado suele parecer terrible. Simplemente no están diseñados para funcionar de esa manera. ¿Ve cómo funky y difícil de leer está al 100%? Cuando volamos, podemos ver un montón de píxeles perdidos y trazos irregulares.

Pixel FontPixel FontPixel Font
Bionika Black de Atomic Media

La respuesta es utilizar siempre fuentes que están diseñadas para que se muestren sin anti-aliasing. Se leen agradable y limpio en tamaños pequeños, y tienen ese gran look retro cuando las explotamos grandes.

Algunas de mis fuentes favoritas de píxeles están hechas por Matthew Bardram de Atomic Media.

Una advertencia a usar las fuentes del pixel es que cada fuente se diseña para trabajar en solamente un cierto tamaño. Asegúrese de utilizar sólo la fuente en este tamaño específico o un múltiplo de ese tamaño. Así que si usted está usando una fuente diseñada para trabajar en 10pt, también se verá bien en 20 o 30pt, pero no en los tamaños entre ellos.


Mecánica de juegos

Piense en qué tipo de mecánica de juego funcionará mejor con su estilo de arte. Elegir una mecánica simplificada y clásica ayudará a sus jugadores a entrar en el estado de ánimo retro. Algunas mecánicas de juego clásicos son Space Shooter (Asteroids, Space Invaders), plataformas (Super Mario Bros, Donkey Kong) y juegos de aventura (Adventure, Zelda).

Tenga en cuenta que su estilo limitado de arte hará más difícil para usted transmitir información compleja al jugador, por lo que un mecánico simple puede ser un gran beneficio.

¿Qué tan simple puede hacer su juego? ¿Puedes diseñar un juego que utilice sólo un botón para los controles?
Los juegos de un solo botón funcionan muy bien en dispositivos basados ​​en el tacto, ya que el jugador sólo puede aplastar en la pantalla sin tener que preocuparse de golpear áreas de botones no táctiles.

Muchos juegos de estilo runner sin fin utilizan el esquema de control de un solo botón (Canabalt, Jetpack Joyride, Tiny Wings). ¿Puede llegar a un estilo diferente de juego que funciona igual de bien con sólo un solo botón para el control?


Efectos de distorsión

Si alguna vez has jugado uno de tus juegos favoritos de arcade de la vieja escuela en un emulador en tu computadora, podrías haber notado que no se siente lo mismo. Todo es un poco demasiado nítido y limpio en el monitor de su computadora en comparación con el aspecto borroso, parpadeo, distorsionado de un monitor de arcade, o su televisión CRT antiguo de 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.

Estos son algunos ejemplos de formas en las que puede emular una pantalla CRT antigua:

CRT Screen EffectsCRT Screen EffectsCRT Screen Effects

Líneas de exploración: puede utilizar un gráfico estático de líneas blancas horizontales delgadas y estrechamente espaciadas para simular líneas de exploración CRT. Sólo la capa de ellos en la parte superior de su juego. Ajuste la opacidad y el modo de mezcla para lograr el estilo y la intensidad que desea.

Ruido: El ruido gaussiano puede agregar una textura agradable a tu juego. Lo ideal sería que el ruido se animara, pero una imagen estática funcionará lo suficientemente bien si el ruido constante de animación afecta el rendimiento de su juego.

Desenfoque: Un desenfoque muy leve añade algo de suavidad a la imagen. No vayas demasiado lejos con éste; todavía desea ver los píxeles.

Fringing de color: Uno de mis efectos favoritos de la vieja escuela es agregar un poco de franja de color RGB. Puede hacerlo separando el lienzo del juego en canales separados para el rojo, el verde y el azul y desplazándolos un poco fuera de la alineación. Este efecto se ve muy bien cuando está animado, pero puede ser bastante intensivo de procesador, por lo que es posible que tenga que limitar su uso. Tengo otro tutorial donde muestro cómo implementar el efecto con AS3: Crear un Efecto de Distorsión CRT Retro con RGB Shifting.

Combinación: ¡Combina múltiples efectos para disfrutar al máximo!

Animated CRT Screen Effects

También puede agregar una barra de rollo animada para simular un CRT que funciona mal.

El juego Flash Cronus X implementa muchos de estos efectos muy bien durante las transiciones del menú. Esta es una buena solución si estás preocupado por los efectos que afectan negativamente el rendimiento del juego.


Innovar

No se deje atascar por las limitaciones de los juegos de la vieja escuela. Es más importante que el juego sea divertido tener una sensación retro que ser históricamente preciso.

Y trate de no sólo recrear un espacio clásico de tirador o plataforma. Añada algo de innovación para que su juego sea único. Utilice la estética retro como punto de partida, pero añada algo de su propio estilo y elementos únicos para crear algo nuevo. Incluso puede ser divertido mezclar música moderna, sonidos o elementos (como efectos de partículas) para crear una nueva imagen de los clásicos juegos de arcade.

Algunos de los grandes ejemplos de esto son Geometry Wars, que mezcla deslumbrantes efectos modernos en un juego de arcade de estilo vectorial, Space Invaders Extreme, donde un clásico juego de arcade se superpone a los gráficos de fondo de lujo y se ajusta a la música electrónica moderna, o Fez, un clásico 2D pixel art platformer que te permite transformar el mundo en el espacio 3D.


¡Happy Game-Making!

Eso es todo por ahora. ¡Buena suerte por ahí! Deja un enlace en los comentarios y muéstrame lo que haces. Me encantaría ver su opinión sobre la estética retro.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.