Title image

Videojuegos Tag

Home / Posts tagged "Videojuegos"

Ante la caída en desuso de Flash y el auge del Material Design, se han buscado alternativas para dotar a los sitios web de cierto dinamismo para contrarrestar su natural apariencia “plana”.

``Un diseñador sabe que ha alcanzado la perfección no cuando no le queda nada por agregar, sino cuando ya no le queda nada por añadir``- Antoine de Saint-Exupéry

Una de estas alternativas es optar por generar efectos y animaciones en JQuery, siendo el Efecto Parallax (en español paralaje), una tendencia cada vez más extendida en el mundo del diseño web y la animación.

Seguro que lo has visto miles de veces al entrar una web, hacer scroll y notar que el fondo parece moverse a una velocidad distinta que el contenido, creando un ligero efecto de profundidad y dejando ver partes que antes no veías.

Y aunque parezca una tendencia muy actual, el Efecto Parallax es en realidad un truco con mucha historia. Por eso, en esta ocasión, haremos un reboot de nuestra anterior entrada y explicaremos más a fondo que es el parallax y cómo se utiliza en el Diseño.

El  moderno (pero común)  Efecto Parallax

El Parallax es un principio de diseño propio de la animación, que juega con la percepción humana,a fin de crear una ilusión de profundidad espacial con medios de representación bidimensionales. Para entenderlo mejor, hablaremos primero de sus orígenes.

La paralaje (del griego parállaxis para cambio, diferencia) define a un fenómeno de la percepción por el cual la posición de un objeto en el campo visual cambia en relación con el punto desde donde se observa.

Esto puede ejemplificarse si levantamos el pulgar a la altura del rostro, mientras abrimos y cerramos alternativamente el ojo derecho y el izquierdo. Notaremos que, mientras que el fondo permanece estático, nuestro pulgar aparentemente cambia de posición gracias a la distancia de nuestros ojos. ¿Sencillo no?

Visión estereoscópica

Si se observa el punto amarillo con el ojo izquierdo (posición A) parece que se encuentre sobre un fondo azul, pero si se observa con el ojo derecho (posición B), aparece sobre el fondo rojo.

Y aunque el Efecto Parallax apenas se aprecia en nuestro día a día, constituye uno de los fundamentos de la percepción espacial. De esta manera, los reflejos lumínicos de objetos cercanos se mueven más rápido en la retina que los de objetos a una cierta distancia, generando una ilusión de profundidad inducida por el movimiento.

Animando ratones y patrullando la luna

Como mencionamos en la introducción, el Efecto Parallax es en realidad un truco muy antiguo, inventado por Walt Disney para dotar a sus películas de una ligera tridimensionalidad, intentando lograr con ello un mayor realismo.

El invento en sí, se llama “cámara multiplano”, ya que la superposición de planos para generar profundidad genera el Efecto Parallax. Les comparto un video que muestra el funcionamiento de la cámara multiplano de Disney.

Posteriormente, los programadores de videojuegos de los 80´s importaron este concepto con el fin de crear la ilusión de tridimensionalidad con medios bidimensionales. Juegos clásicos del tipo Jump’n’Run o Shoot’em up como Super Mario, Moon Patrol o Jungle Hunt, son un gran ejemplo de este efecto en acción:

Ideal para Storytelling y Diseño Web

Si bien desde finales de la década de los 2000 se utiliza el Efecto Parallax en el diseño web, no sería hasta que la página de Nike nikebetterworld.com (offline) causara un enorme impacto medial en 2011.

Sentando así, un precedente para la tendencia en diseño web que utiliza el Efecto Parallax para crear una impresión de profundidad en un medio bidimensional como es la web.

Sin embargo y aunque el Efecto Parallax es más que interesante para aportar valor al tedioso scroll y sorprender al usuario con algo que no se espera, no es conveniente usarlo por el simple hecho de seguir la tendencia. La presencia de este tipo de efectos puede ser tan sorprendente como cansina, para los usuarios.

Lo ideal es aprovechar este recurso como complemento narrativo. Esta posibilidad de storytelling del Parallax, lo vuelve perfecto para landing pages, o webs que intenten sumergir al usuario en una historia, causando una experiencia comunicativa mucho más divertida y cercana a otros medios como los videojuegos o los cómics.

Ejemplos destacables

El Efecto Parallax polariza las opiniones. Mientras que muchos usuarios aprecian el diseño con este tipo de efectos producidos por el movimiento, otros ya están cansados de un medio ya no tan moderno, sobre todo si se utiliza con el único fin de exhibirse sin un concepto que lo justifique.

¿Cuándo enriquece el Efecto Parallax a una web? Esto depende sobre todo de lo que se quiere conseguir con el proyecto y del público. Lo que no podemos negar es que ha demostrado ser un medio ideal para contar historias, por ello aquí te compartimos una recopilación de páginas con Parallax que seguro que terminan de convencerte, si aún tenías dudas, de lo increíble de este efecto.

The Hybrid Graphic Novel

Un proyecto con luz propia es la página de lanzamiento del Peugeot Hybrid4 que, camuflada como una novela gráfica de acción, presenta las características más importantes del vehiculo. Tan increíble, que incluso el proyecto fue galardonado por la página The FWA como FWA of the day.

Why your Brain Craves Infographics

Con un estilo visual retro de libro educativo, el sitio muestra algunos datos del porque las infografías son una buena forma de acercarse con la gente y comunicar ideas, a través de algunos datos sobre psicología y marketing. Un gran ejemplo de cómo se pueden volver una serie de datos ``duros`` más digeribles.

Firewatch

Utilizar el parallax scrolling cómo eyecatcher al inicio de una página también está justificado, pues si se hace bien este instrumento tiene una enorme capacidad para enganchar al usuario e interesarlo por el contenido que viene a continuación. Un ejemplo clásico lo encontramos en la página web para el videojuego Firewatch de Campo Santo.

Perspectiva que cambia la forma de ver

Aunque en principio atractivo, las páginas scroller con Efecto Parallax, encierran un innegable potencial para mejorar el storytelling de una marca, pero también ha provocado su uso masivo (y desmedido) desde 2011.

A final de cuentas, los efectos de paralaje o cualquier otro tipo de animaciones, deben de utlizarse cuando ayudan a mejorar la experiencia del usuario, destacar contenido, productos, servicios o animar al call to action. Va en ese sentido, muy de la mano de los principios del material design del cual ya hemos hablado en este blog.

Sin embargo es innegable el atractivo que genera el Efecto Parallax , pues ayuda a modificar la perspectiva que tienen las personas sobre lo que es un sitio web y cambia su forma de ver a una marca o producto. Y tú, ¿te animas a dar profundidad a tu web? Ya sea con una tienda en línea, landing page o blog, con nuestro servicio de Diseño Webolvídate de perder oportunidades y comienza a conectarte con todo el mundo. ¡Conócenos!

¿Ustedes conocen más ejemplo para compartir con nosotros?, ¿Les gustaría que habláramos de algunas formas de añadir este y otros efectos a sus páginas?

No olviden dejar sus comentarios.

¡Saludos!

¡Hola que tal!

En Galahad Studio creemos que el diseño se encuentra en prácticamente todos los aspectos de nuestras vidas, porque el diseño no se trata sobre el objeto físico, ya sea un cartel, una animación o el empaque de un producto. El diseño es realmente lo que se encuentra entre el mensaje y el espectador final, es todo el proceso de desarrollo hasta obtener una materialización de una idea. Como dijera el diseñador Robin Mathew, “El diseño es donde la ciencia y el arte se equilibran”.

Sin embargo, esta es una visión muy romántica de lo que el Diseño termina siendo, pues para muchas empresas y marcas únicamente es un “agregado” visual para sus productos. Una decoración. Por eso, en esta ocasión queremos hablarles de una producción única e increíble, pues mezcla perfectamente los ejes de lo conceptual, lo funcional y lo estético y sin embargo, vio la luz para ser ni más ni menos, que un producto de entretenimiento. Hoy queremos hablarles de Cuphead, un videojuego lanzado en septiembre del año pasado (2017) y que ha dado muchísimo de que hablar.

“El diseño es donde la ciencia y el arte se equilibran. Robin Mathew”

En una industria en donde los videojuegos nos impactan, ya sea por su argumento, otras por su jugabilidad o sus gráficos, Cuphead resulta ser amor a primera vista, ya que conjuga todos estos aspectos en un producto solido, dónde su apartado visual ha maravillado a más de uno, desde que fue anunciado en la conferencia de Microsoft del E3 2014.

Desarrollado por StudioMDHR, Cuphead resultó ser una propuesta arriesgada para todos los miembros del estudio, debido a que la industria del videojuego ha estado dominada por las grandes marcas y productoras, por lo que los desarrolladores independientes siempre han tenido problemas para financiar sus proyectos. Además, los múltiples retrasos de su lanzamiento, afectaron negativamente la percepción de los jugadores sobre el juego (en algún punto, se esperó que fuera definitivamente cancelado). Sin embargo, en junio de 2017, fue anunciada su fecha definitiva de lanzamiento para otoño del mismo año. Hoy en día podemos decir que la espera y todos los sacrificios del estudio valieron la espera.

El secreto de la creatividad es saber ocultar tus fuentes…

Esta definitivamente no fue la idea que tuviera StudioMDHR al desarrollar su videojuego, pues la característica más impresionante del mismo, fue la decisión de producir Cuphead dibujando a mano todos los assets, personajes, fondos y animaciones del juego, siguiendo un estilo idéntico al de los dibujos de la década de 1930.

Son notables las influencias de los grandes genios y pioneros de los dibujos animados como Max Fleischercreador de  Betty Boop y Koko el payaso y productor de la serie de Popeye; Tex Avery, creador del  Pato LucasBugs BunnyDroopyLobo McLobo, entre otros; o del mismísimo Walt Disney. Es de reconocer, en este sentido, la capacidad de sus creadores y su excelente trabajo al imitar un estilo de hace casi un siglo, pues Cuphead, fácilmente nos transporta a esa época con sus innumerables guiños y diseño de personajes y escenarios. La nostalgia se respira en cada momento del juego.

El mundo cabe en una canción…

Ahora bien, no puede haber un producto completo, si su visión está enfocada en un solo aspecto. Aunque el aspecto visual de Cuphead se lleva las palmas, no sería nada sin el increíble cuidado que sus desarrolladores han puesto en su música. Producida por Kristofer Maddigan quien ha pertenecido a numerosos ensambles de ópera y ballet, así como sinfónicas en Canadá y numerosos cuartetos de Jazz de la ciudad. También musicalizó la instalación Nuit Blanche en la ciudad de Toronto. Ha sido músico invitado para artistas como Petula Clark, The Drifters, Ian Finkle y el proyecto solista de Andy Bell de Erasure.

El soundtrack de Cuphead consta de tres horas continuas de música, que va desde el Jazz, las primeras Big Bands y Ragtime. La grabación de la música estuvo realizada por una Big Band de 13 personas, 10 del ensamble de ragtime, un pianista solista, un vocalista y un bailador de tap. Todo un esfuerzo increíble que logra transportar las imágenes en pantalla a esos años 30´s en las que están inspiradas. Vale la pena detenerse un momento para apreciarlo.

Con tantos videojuegos que son publicados anualmente, acaba siendo difícil desarrollar algo único o que no se haya visto anteriormente. Sin embargo StudioMDHR logró acertar al elegir un estilo visual tan atractivo como nostálgico, logrando crear visualmente, algo totalmente diferente a lo que estamos acostumbrados a ver. Es digna de aplaudir la arriesgada propuesta de StudioMDHR por apostar tan alto para cumplir su sueño, pero en Galahad Studio creemos que esa es la única razón por la que vale esforzarse cada día.

¿A ustedes que les ha parecido?, ¿Han tenido la oportunidad de jugarlo?

¡Saludos!

Abrir chat
1
¿Dudas? ¡Hagamos tu proyecto realidad!
¡Saludos Capitán!

Soy Avalon IV, tu asistente virtual a bordo de Galahad Studio...

¿Tienes un proyecto en mente? ¡Déjanos orientarte! y recibe un descuento especial, en el primer proyecto que desarrollemos juntos.

Envíanos un mensaje y ¡Comencemos!