Desplazamiento de paralaje

Desplazamiento de paralaje en 2,5D de edificios de una ciudad.

El desplazamiento de paralaje es una técnica de computación gráfica en la que las imágenes de fondo se mueven frente a la cámara más lentamente que las imágenes en primer plano, lo que crea una ilusión de profundidad en una escena 2D con distancia.[1]​ Esta técnica surgió de la cámara multiplano utilizada en la animación tradicional[2]​ en la década de 1930.

El desplazamiento de paralaje se popularizó en la computación gráfica 2D con su introducción en los videojuegos a principios de la década de 1980. En el videojuego arcade Jump Bug (1981) se utilizó algo de desplazamiento de paralaje.[3]​ Se utilizó una forma limitada de desplazamiento de paralaje donde la escena principal se desplaza mientras el cielo nocturno estrellado está fijo y las nubes se mueven lentamente, dando profundidad al paisaje. Al año siguiente, Moon Patrol (1982) implementó una forma completa de desplazamiento de paralaje, con tres capas de fondo separadas desplazándose a diferentes velocidades, simulando la distancia entre ellas.[4]A Moon Patrol se le atribuye la popularización del desplazamiento de paralaje.[5][6]Jungle King (1982), posteriormente llamado Jungle Hunt, también tenía desplazamiento de paralaje,[7]​ y fue lanzado un mes después de Moon Patrol en junio de 1982.[8]

Métodos

Hay cuatro métodos principales para realizar un desplazamiento de paralaje que se emplean en títulos arcade, de consola y PC.

Método de capas

Demostración del método de capas
Vista lateral de las capas usadas en el desplazamiento de paralaje de The Whispered World.
El mismo escenario que arriba, visto de frente.

Algunos sistemas de visualización admiten varias capas de fondo que pueden desplazarse independientemente en direcciones horizontales y verticales y combinarse entre sí, simulando una cámara multiplano. En un sistema de visualización de este tipo, un juego puede producir paralaje simplemente cambiando la posición de cada capa en una cantidad diferente en la misma dirección. Las capas que se mueven más rápido se perciben como más cercanas a la cámara virtual. Se pueden colocar capas delante del campo de juego (la capa que contiene los objetos con los que interactúa el jugador) por diversas razones, como para proporcionar mayor dimensión, ocultar parte de la acción del juego o distraer al jugador.

Método de sprites

Los programadores también pueden crear pseudocapas de sprites (objetos en movimiento controlables individualmente dibujados por hardware sobre capas o detrás de ellas) si están disponibles en el sistema de visualización. Por ejemplo, Star Force, un juego de disparos con desplazamiento vertical y vista aérea para NES, utilizó esto para su campo estelar, y Final Fight para Super NES utilizó esta técnica para la capa inmediatamente delante del campo de juego principal.

El Amiga tiene sprites que pueden tener cualquier altura y pueden colocarse en posición horizontal con el coprocesador de cobre, lo que los hace ideales para este propósito.

Risky Woods de Amiga utiliza sprites multiplexados con el cobre para crear una capa de fondo de paralaje a pantalla completa[9]​ como alternativa al modo de campo de juego dual del sistema.

Método de animación/patrón repetitivo

Es posible hacer que las pantallas de desplazamiento formadas por mosaicos individuales «floten» sobre una capa de fondo repetida animando los mapas de bits de los mosaicos individuales para representar el efecto de paralaje. Se puede emplear un ciclo de color para animar mosaicos rápidamente en toda la pantalla. Este efecto de software da la ilusión de otra capa (de hardware). Muchos juegos utilizan esta técnica para crear un campo de estrellas desplazable, pero a veces se consigue un efecto más complejo o multidireccional, como en el juego Parallax de Sensible Software.

Método de rasterizado

En los gráficos rasterizados, las líneas de píxeles de una imagen normalmente se componen y se actualizan en orden de arriba a abajo con un ligero retardo (llamado intervalo de borrado horizontal) entre el dibujo de una línea y el de la siguiente. Los juegos diseñados para chips gráficos más antiguos (como los de tercera y cuarta generación de consolas de videojuegos, los de juegos de televisión dedicados o los de sistemas portátiles similares) aprovechan las características de trama para crear la ilusión de más capas.

Algunas plataformas (como Commodore 64, Amiga, Master System,[10]​ PC/TurboGrafx-16,[11]​ Sega Mega Drive/Genesis, Super NES, Game Boy, Game Boy Advance y Nintendo DS) proporcionan una interrupción de borrado horizontal para configurar automáticamente los registros independientemente del resto del programa. Otras, como NES, requieren el uso de código cronometrado en ciclos, que está escrito especialmente para tardar exactamente lo mismo en ejecutarse que el chip de vídeo tarda en dibujar una línea de escaneo, o temporizadores dentro de los cartuchos de juego que generan interrupciones después de dibujar una cantidad determinada de líneas de escaneo. Muchos juegos de NES utilizan esta técnica para dibujar sus barras de estado, y Teenage Mutant Ninja Turtles II: The Arcade Game y Vice: Project Doom para NES la utilizan para desplazarse por las capas de fondo a diferentes velocidades.

Las técnicas de rasterizado más avanzadas pueden producir efectos interesantes. Un sistema puede lograr una profundidad de campo muy efectiva si se combinan capas con rasterizados; Sonic the Hedgehog, Sonic The Hedgehog 2, ActRaiser, Lionheart, Kid Chaos y Street Fighter II utilizaron bien este efecto. Si cada línea de escaneo tiene su propia capa, se produce el efecto de Pole Position, que crea una carretera pseudo3D (o una cancha pseudo3D como en NBA Jam) en un sistema 2D.

Si el sistema de visualización admite rotación y escala además del desplazamiento (un efecto conocido popularmente como Modo 7), cambiar los factores de rotación y escala puede dibujar una proyección de un plano (como en F-Zero y Super Mario Kart) o deformar el campo de juego para crear un factor de desafío adicional.

Otra técnica avanzada es el desplazamiento por filas y columnas, donde las filas y columnas de mosaicos de una pantalla se pueden desplazar individualmente.[12]​ Esta técnica se implementa en los chips gráficos de varias placas base de sistemas arcade de Sega desde la Sega Space Harrier y System 16,[13]​ la consola Sega Mega Drive/Genesis,[14]​ y las placas base de juegos arcade CP System de Capcom,[15]Irem M-92[16]​ y Taito F3 System[17]​.

Ejemplo

En la siguiente animación, tres capas se mueven hacia la izquierda a diferentes velocidades. Sus velocidades disminuyen de adelante hacia atrás y se corresponden al aumento de la distancia relativa del espectador. La capa del suelo se mueve 8 veces más rápido que la capa de vegetación. La capa de vegetación se mueve dos veces más rápido que la capa de nubes.

  • Cloud layer - back
    Capa de nubes (fondo).
  • Vegetation layer - middle
    Capa de vegetación (intermedio).
  • Ground layer - front
    Capa base (frontal).
  • Animation
    Animación.

Desplazamiento de paralaje en el diseño web

Una de las primeras implementaciones del desplazamiento de paralaje en el navegador fue creada y compartida en una publicación de blog por el desarrollador web Glutnix en 2007, que incluía un código de ejemplo y una demostración usando JavaScript y CSS 2, compatible con Internet Explorer 6 y otros navegadores de la época.[18][19]

En febrero de 2008, un tutorial del blog de diseño web «Think Vitamin», el diseñador web Paul Annett explicó cómo había creado un efecto de paralaje utilizando CSS y sin JavaScript para la web de Silverback, una aplicación de pruebas de uso.[20]​ Demostró el efecto en SXSW Interactive 2009, con la ayuda de la participación del público y un hombre con un traje de gorila.[21][22]

Véase también

Referencias

  1. «Cap. O'Rourke to the rescue». New Straits Times Malaysia. 1 de septiembre de 1988. Consultado el 6 de julio de 2009. 
  2. Paul, Wyatt (August 2007). «The Art of Parallax Scrolling». Archivado desde el original el 7 de octubre de 2009. Consultado el 6 de julio de 2009. 
  3. Purcaru, Bogdan Ion (13 March 2014). «Games vs. Hardware. The History of PC video games: The 80's». Purcaru Ion Bogdan. 
  4. Uduslivii, Igor (26 December 2013). iPhone Game Blueprints. Packt Publishing Ltd. p. 339. ISBN 978-1-84969-027-0. 
  5. Stahl, Ted (26 de julio de 2006). «Chronology of the History of Video Games: Golden Age». Archivado desde el original el 16 de julio de 2009. Consultado el 6 de julio de 2009. 
  6. «Gaming's Most Important Evolutions». GamesRadar. October 8, 2010. Consultado el 27 de abril de 2011. 
  7. «Jungle Hunt Was a Terrible Waste of Quarters». Archivado desde el original el 2 de abril de 2015. Consultado el 27 de marzo de 2015. 
  8. Akagi, Masumi (13 October 2006). アーケードTVゲームリスト国内•海外編(1971-2005) [Arcade TV Game List: Domestic • Overseas Edition (1971-2005)] (en japonés). Japan: Amusement News Agency. pp. 13, 42. ISBN 978-4990251215. 
  9. «Risky Woods». codetapper.com. Archivado desde el original el 19 de febrero de 2015. Consultado el 23 de abril de 2015. 
  10. «Archived copy». Archivado desde el original el 9 de noviembre de 2017. Consultado el 4 de septiembre de 2018. 
  11. «Archived copy». Archivado desde el original el 18 de marzo de 2014. Consultado el 18 de marzo de 2014. 
  12. «Using MAME's tilemap system - DevWiki». 2 January 2014. Archivado desde el original el 2 de enero de 2014. 
  13. «Archived copy». Archivado desde el original el 4 de marzo de 2016. Consultado el 8 de agosto de 2016. 
  14. «Sega Genesis vs Super Nintendo». gamepilgrimage.com. 11 de agosto de 2009. Archivado desde el original el 24 de septiembre de 2015. Consultado el 26 de septiembre de 2014. 
  15. Leaman, Paul. «New Forgotten World Clone – CP System Code». GitHub. Archivado desde el original el 25 de mayo de 2015. 
  16. «System 16 - Irem M92 Hardware (Irem)». www.system16.com. Archivado desde el original el 24 de diciembre de 2014. Consultado el 26 de septiembre de 2014. 
  17. «System 16 - Taito F3 System Hardware (Taito)». www.system16.com. Archivado desde el original el 21 de abril de 2014. Consultado el 26 de septiembre de 2014. 
  18. Brett Taylor (20 March 2007). «Parallax Backgrounds - a multi-layered javascript experiment». Glutnix. inner.geek.nz. Consultado el 28 June 2019. 
  19. Matthias Kretschmann (23 de mayo de 2008). «Showcasing the css parallax effect - 12+1 creative usages». Glutnix. kremalicious.com. Consultado el 28 June 2019. 
  20. Annett, Paul (February 2008). «How to Recreate Silverback's Parallax Effect». Archivado desde el original el 19 de julio de 2010. Consultado el 27 de febrero de 2024. 
  21. Mark Norman Francis (14 March 2009). «Photo: Paul is amused by gorillas». Consultado el 27 February 2024. 
  22. Robby Macdonell (14 March 2009). «Paul Annett from ClearLeft making people act out the design of silverbackapp.com». Consultado el 27 February 2024.