Añadir el efecto parallax en juegos HTML5 de dos dimensiones permiten darle a nuestro juego profundidad visual. Es un recurso muy usado en juegos de tipo plataforma desde hace ya mucho tiempo. Este efecto le da una mejor posición gráfica a tu juego lo que hará que llame más la atención además de mejorar los acabados de diseño del mismo. Lo mejor es que este efecto es bastante fácil de conseguir.

 

parallax en juegos HTML5

Antes de empezar, para los que no os suena de otras cosas, os dejo una imagen de ejemplo del efecto parallax en formato GIF. El efecto consiste en superponer varias capas de imágenes, cada cual parece que está más al fondo, hasta normalmente terminar en el cielo. Cada una de estas capas se moverá (automáticamente o relativamente al movimiento del jugador) de una manera más lenta mientras a más distancia parezca estar.

parallax example

Cómo añadir efecto parallax en juegos HTML5

El primer paso es conseguir los recursos. Estos deben ser varias imágenes (recomiendo un mínimo de 3) que permitan sobreponerse entre ellas. El tamaño de esas imágenes debe ser igual o mayor que la cámara del jugador. Os dejo un enlace que os permitirá descargar de manera gratuita unos ejemplos de fondos parallax. Usaré uno de ellos para hacer el ejemplo.

parallax example images

El primero no es más que crear la Room (o Escena). Para ello he dejado el tamaño por defecto. Ahora añadí las 5 imágenes como sprites. Tras esto tan sólo voy a crear 5 capas de tipo background, y a cada una le voy a dar una profundidad distinta (200, 201, …, 205) además, marcaré la opción de estirar (Stretch) para adaptar el fondo al ancho de la room. También marcaré la opción de “Horizontal Tile” para repetir la imagen de manera horizontal. Añadiremos cada imagen a su capa correspondiente. A cada capa le añadiremos una velocidad horizontal que será más rápida mientras más lejos parezca, creando el efecto completo.

parallax_config_01

parallax_config_02

parallax_config_03

Aquí tenéis un enlace a la demo.

Nota: Actualmente parece que hay un problema con Game Maker en HTML5 y no se refresca la pantalla correctamente haciendo que no queden limpio los gráficos.

Añadir efecto parallax en juegos HTML5

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *