Articulo de referencia

Desplazamiento con efecto parallax

Desplazamiento parallax " 2.5D " de edificios de la ciudad El desplazamiento parallax es una técnica en gráficos por computadora donde las imágenes de fondo se mueven más lentam...

Desplazamiento parallax " 2.5D " de edificios de la ciudad

El desplazamiento parallax es una técnica en gráficos por computadora donde las imágenes de fondo se mueven más lentamente frente a la cámara que las imágenes de primer plano, creando una ilusión de profundidad en una escena 2D de distancia. [ 1 ] La técnica surgió de la técnica de cámara multiplano utilizada en la animación tradicional [ 2 ] desde la década de 1930.

El desplazamiento parallax se popularizó en los gráficos por computadora 2D con su introducción a los videojuegos a principios de la década de 1980. Se utilizó algo de desplazamiento parallax en el videojuego arcade Jump Bug (1981). [ 3 ] Empleaba una forma limitada de desplazamiento parallax con la escena principal desplazándose mientras el cielo nocturno estrellado permanecía fijo y las nubes se movían lentamente, añadiendo profundidad al escenario. Al año siguiente, Moon Patrol (1982) implementó una forma completa de desplazamiento parallax, con tres capas de fondo separadas desplazándose a diferentes velocidades, simulando la distancia entre ellas. [ 4 ] A Moon Patrol se le suele atribuir la popularización del desplazamiento parallax. [ 5 ] [ 6 ] Jungle King (1982), más tarde llamado Jungle Hunt , también tenía desplazamiento parallax, [ 7 ] y se lanzó un mes después de Moon Patrol en junio de 1982. [ 8 ]

Métodos

Existen cuatro métodos principales de desplazamiento parallax que se utilizan en títulos para placas de sistemas arcade , consolas de videojuegos y sistemas informáticos personales .

Método de capas

Demostración del método de capas
Vista lateral de las capas utilizadas para el desplazamiento parallax en The Whispered World.
La misma imagen que la anterior, vista desde el frente.

Algunos sistemas de visualización admiten múltiples capas de fondo que se pueden desplazar de forma independiente en direcciones horizontal y vertical, y superponer , simulando una cámara multiplano . En un sistema de visualización de este tipo, un juego puede generar 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. Las capas se pueden colocar delante del área 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 Sprite

Los programadores también pueden crear pseudocapas de sprites —objetos móviles controlables individualmente, dibujados por hardware encima o detrás de las capas— si están disponibles en el sistema de visualización. Por ejemplo, Star Force , un juego de disparos con vista cenital y desplazamiento vertical para NES , utilizó esta técnica para su campo estelar, y Final Fight para Super NES la empleó para la capa situada justo delante del área de juego principal.

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

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

Método de repetición de patrones/animación

Las pantallas desplazables compuestas por mosaicos individuales pueden "flotar" sobre una capa de fondo repetitiva mediante la animación de los mapas de bits de cada mosaico para crear el efecto de paralaje. El ciclo de colores permite animar los mosaicos rápidamente en toda la pantalla. Este efecto de software crea la ilusión de otra capa (de hardware). Muchos juegos han utilizado esta técnica para un campo de estrellas desplazable, pero a veces se logra un efecto más complejo o multidireccional, como en el juego Parallax de Sensible Software .

Método ráster

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

Algunos sistemas de visualización tienen una sola capa. Esto incluye la mayoría de los sistemas clásicos de 8 bits (como el Commodore 64 , Nintendo Entertainment System , Master System , PC Engine/TurboGrafx-16 y la Game Boy original ). Los juegos más sofisticados de estos sistemas suelen dividir la capa en franjas horizontales, cada una con una posición y velocidad de desplazamiento diferentes. Normalmente, las franjas superiores de la pantalla representan elementos más alejados de la cámara virtual, o bien una franja permanece fija para mostrar información de estado. El programa espera entonces a que haya un espacio en blanco horizontal y cambia la posición de desplazamiento de la capa justo antes de que el sistema de visualización comience a dibujar cada línea de exploración. Esto se denomina "efecto raster" y también resulta útil para cambiar la paleta del sistema y proporcionar un fondo degradado.

Algunas plataformas (como Commodore 64, Amiga , Master System, [ 10 ] PC Engine/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 establecer automáticamente los registros independientemente del resto del programa. Otras, como la NES, requieren el uso de código temporizado por ciclo, que está especialmente escrito para tardar exactamente el tiempo que tarda el chip de vídeo en dibujar una línea de exploración, o temporizadores dentro de los cartuchos de juego que generan interrupciones después de que se haya dibujado un número determinado de líneas de exploración. 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 desplazar capas de fondo a diferentes velocidades.

Las técnicas de rasterización más avanzadas pueden producir efectos interesantes. Un sistema puede lograr una profundidad de campo muy efectiva si se combinan capas con rasterizaciones; 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 Pole Position , que crea una carretera pseudo-3D (o una cancha de baloncesto pseudo-3D como en NBA Jam ) en un sistema 2D.

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

Otra técnica avanzada es el desplazamiento por filas/columnas, donde las filas/columnas de mosaicos en una pantalla se pueden desplazar individualmente. [ 12 ] Esta técnica está implementada en los chips gráficos de varias placas de sistemas arcade de Sega desde Sega Space Harrier y System 16 , [ 13 ] la consola Sega Mega Drive/Genesis, [ 14 ] y las placas de juegos arcade Capcom CP System , [ 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. Su velocidad disminuye de adelante hacia atrás y corresponde a un aumento en la distancia relativa con respecto al observador. 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.

Desplazamiento parallax en el diseño web

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

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

Los defensores argumentan que es una forma sencilla de aprovechar la fluidez de la Web, citando el sitio web Silverback como el primer ejemplo que encontraron. [ 23 ]

Los defensores utilizan fondos con efecto parallax como herramienta para captar mejor la atención de los usuarios y mejorar la experiencia general que ofrece un sitio web. Sin embargo, un estudio de la Universidad de Purdue , publicado en 2013, reveló los siguientes hallazgos: "...aunque el desplazamiento con efecto parallax mejoró ciertos aspectos de la experiencia del usuario, no necesariamente mejoró la experiencia general del usuario". [ 24 ] Un estudio sin fecha realizado durante o después de 2010 por Dede Frederick, James Mohler, Mihaela Vorvoreanu y Ronald Glotzbach señaló que el desplazamiento con efecto parallax "puede provocar náuseas en algunas personas". [ 25 ]

Véase también

Referencias

  1. "El capitán O'Rourke al rescate" . New Straits Times Malaysia. 1 de septiembre de 1988. Consultado el 6 de julio de 2009 .
  2. Paul, Wyatt (agosto de 2007). "El arte del desplazamiento parallax" (PDF) . Archivado del original (PDF) el 7 de octubre de 2009. Recuperado el 6 de julio de 2009 .
  3. Purcaru, Bogdan Ion (13 de marzo de 2014). "Juegos vs. Hardware. La historia de los videojuegos para PC: Los años 80" . Purcaru Ion Bogdan vía Google Books.
  4. ^ Uduslivii, Igor (26 de diciembre de 2013). Planos de juegos de iPhone . Packt Publishing Ltd. pag. 339.ISBN  978-1-84969-027-0.
  5. Stahl, Ted (26 de julio de 2006). "Cronología de la historia de los videojuegos: Edad de oro" . Archivado del original el 16 de julio de 2009. Consultado el 6 de julio de 2009 .
  6. "Las evoluciones más importantes de los videojuegos" . GamesRadar . 8 de octubre de 2010. pág. 3. Archivado del original el 8 de abril de 2021. Consultado el 27 de abril de 2011 . 
  7. "Jungle Hunt fue un terrible desperdicio de monedas" . Archivado del original el 2 de abril de 2015. Consultado el 27 de marzo de 2015 .
  8. ^ Akagi, Masumi (13 de octubre de 2006).アーケードTVゲームリスト国内•海外編(1971-2005) [ Lista de juegos de Arcade TV: edición nacional • extranjera (1971-2005) ] (en japonés). Japón: Agencia de noticias de atracciones. págs.13 , 42. ISBN  978-4990251215.
  9. "Risky Woods" . codetapper.com . Archivado del original el 19 de febrero de 2015. Consultado el 23 de abril de 2015 .
  10. "Copia archivada" . Archivado del original el 09/11/2017 . Recuperado el 04/09/2018 .{{cite web}}: CS1 mantenimiento: copia archivada como título ( enlace )
  11. "Copia archivada" . Archivado del original el 18 de marzo de 2014. Consultado el 18 de marzo de 2014 .{{cite web}}: CS1 mantenimiento: copia archivada como título ( enlace )
  12. "Uso del sistema de mapas de mosaicos de MAME - DevWiki" . 2 de enero de 2014. Archivado del original el 2 de enero de 2014.
  13. "Copia archivada" . Archivado del original el 4 de marzo de 2016. Consultado el 8 de agosto de 2016 .{{cite web}}: CS1 mantenimiento: copia archivada como título ( enlace )
  14. "Sega Genesis vs Super Nintendo" . gamepilgrimage.com . 11 de agosto de 2009. Archivado del 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 del original el 25 de mayo de 2015.
  16. "System 16 - Hardware Irem M92 (Irem)" . www.system16.com . Archivado del original el 24/12/2014 . Consultado el 26/09/2014 .
  17. "System 16 - Hardware del sistema Taito F3 (Taito)" . www.system16.com . Archivado del original el 21 de abril de 2014. Consultado el 26 de septiembre de 2014 .
  18. Brett Taylor (20 de marzo de 2007). "Fondos de paralaje: un experimento de JavaScript multicapa" . Glutnix . inner.geek.nz. Archivado del original el 28 de enero de 2019. Recuperado el 28 de junio de 2019 .
  19. Matthias Kretschmann (23 de mayo de 2008). "Mostrando el efecto parallax de CSS: 12+1 usos creativos" . Glutnix . kremalicious.com . Consultado el 28 de junio de 2019 .
  20. Annett, Paul (febrero de 2008). "Cómo recrear el efecto de paralaje del gorila de lomo plateado" . Archivado del original el 19 de julio de 2010. Consultado el 27 de febrero de 2024 .
  21. Mark Norman Francis (14 de marzo de 2009). "Foto: Paul se divierte con los gorilas" . Consultado el 27 de febrero de 2024 .
  22. Robby Macdonell (14 de marzo de 2009). "Paul Annett de ClearLeft hace que la gente represente el diseño de silverbackapp.com" . Recuperado el 27 de febrero de 2024 .
  23. Dan Cederholm; Ethan Marcotte (9 de abril de 2010). CSS artesanal: Diseño web más robusto . New Riders. págs. 198–199 . ISBN  978-0-13-210481-4.
  24. Dede M. Frederick (18 de abril de 2013). "Los efectos del desplazamiento parallax en la experiencia y preferencia del usuario en el diseño web" . Universidad de Purdue . Archivado del original el 16 de abril de 2014. Recuperado el 17 de abril de 2014 .
  25. Frederick, Dede. "Los efectos del desplazamiento parallax en la experiencia del usuario en el diseño web". Journal of User Experience . 10 (2).