Tutorial videojuegos: Fondos parallax

tutorial curso programacion videojuegos android arkanoid

Los parallax son una forma muy sencilla de hacer vistosos nuestros juegos. El referente (no sé si el inventor también) de los fontos parallax fue el Sonic de Sega. Los fondos Parallax son fondos que suelen acompañar (aunque no siempre) al movimiento del jugador pero a distinta velocidad. Si se combinan varios fondos parallax con distintas velocidades el efecto es muy chulo creando una sensación de profundidad casi 3D.

Normalmente los parallax son horizontales y se mueven acompañando al usuario, pero yo en el juego Arkandroid tuve que hacer un fondo parallax, podéis ver el vídeo de ejemplo más abajo. La librería Andengine no disponía de fondos parallax verticales así que basándome en la que tiene horizontal programé una clase que hace parallax verticales. En mi caso son dos fondos a distintas velocidades que se mueven solos, es decir, sin seguir al usuario.

¿Cómo hacer un parallax en Andengine?

Cada motor de videojuegos tendrá su forma propia de hacer un fondo parallax, básicamente consiste en coger una imagen (un fondo completo o una imagen tipo sprite), darle una velocidad y ponerla en la escena. 

// Los tres primeros parametors son el color RGB del fondo. Yo siempre lo pongo en negro.
// El cuarto parametro son los cambios por segundo. Yo siempre lo pongo en 5

AutoParallaxBackground background = new AutoParallaxBackground(0, 0, 0, 5);		

// Ahora al parallax general le añadimos cada uno de los fondos que se moveran a distintas velocidades

// Suponemos que en "fondo" tendremos una imagen Sprite cargada. Se movera a 2.0f de velocidad
background.attachParallaxEntity(new ParallaxEntity(2.0f, fondo);

// Suponemos que en "naves" tendremos una imagen png  Sprite cargada. Se movera a 4.0f de velocidad
background.attachParallaxEntity(new ParallaxEntity(4.0f, naves);


Con esto habremos creado una imagen grande "fondo" que se irá moviendo a 2.0f y una imagen con transparencias "naves" que se ira moviendo a 4.0. Las naves lo normal es que fuera una imagen grande png con mucho transparente y con algunos dibujos de naves. De esta forma, parecerá que las naves tienen un efecto 3D sobre el fondo. Luego ya pondríamos la nave del jugador por ejemplo.

Si queremos hacer un fondo parallax que siga al jugador, la forma es la siguiente:

// Siendo TAMANO_MAXIMO_PANTALLA_SCROLL el tamaño que puede tener la pantalla al hacer scroll.
parallaxLayer = new ParallaxLayer(activity.getCamera(), true, TAMANO_MAXIMO_PANTALLA_SCROLL);
parallaxLayer.setParallaxChangePerSecond(8);
parallaxLayer.setParallaxScrollFactor(1f);		
// Siendo VELOCIDAD la velocidad del parallax y FONDO la variable que tenga el fondo
parallaxLayer.attachParallaxEntity( new ParallaxEntity(VELOCIDAD, FONDO, true, 1));

Cómo hacer un fondo parallax vertical en Andengine

Como he dicho antes, Andengine no trae una clase para hacer Parallax verticales, así que he tenido que hacerlo yo basándome en el parallax horizontal. Os pongo el código del parallax por si os resulta útil para vuestros juegos. Recordad que es para hacer un parallax vertical usando Andengine Gles 2

package com.oman.gameutilsanengine;

import android.annotation.SuppressLint;
import org.andengine.engine.camera.Camera;
import org.andengine.entity.scene.background.ParallaxBackground.ParallaxEntity;
import org.andengine.entity.shape.IAreaShape;
import org.andengine.opengl.util.GLState;

/**
 * (c) 2010 Nicolas Gramlich 
 * (c) 2011 Zynga Inc.
 * 
 * @author Nicolas Gramlich / Oscar Rodriguez
 * @since 15:36:26 - 19.07.2010
 */	
	public  class GUtilsGraphicsParallaxVerticalEntity extends ParallaxEntity {
	
		final float mParallaxFactor;
		final IAreaShape mShape;
	
		public GUtilsGraphicsParallaxVerticalEntity(final float pParallaxFactor,  final IAreaShape pAreaShape) {
			super(pParallaxFactor,pAreaShape);
			this.mParallaxFactor=pParallaxFactor;
			this.mShape = pAreaShape;
		}
		
		@SuppressLint("WrongCall")
		public void onDraw(final GLState pGLState, final Camera pCamera, final float pParallaxValue)         {
			pGLState.pushModelViewGLMatrix();
			{
						
				final float cameraHeight = pCamera.getHeight();
				final float shapeHeightScaled = this.mShape.getHeightScaled();
				float baseOffset = (pParallaxValue * this.mParallaxFactor) % shapeHeightScaled;

				while(baseOffset > 0) {
					baseOffset -= shapeHeightScaled;
				}
				pGLState.translateModelViewGLMatrixf( 0, baseOffset,0);

				float currentMaxY = baseOffset;
				
				do {
					this.mShape.onDraw(pGLState,pCamera);
					pGLState.translateModelViewGLMatrixf(0, shapeHeightScaled, 0);
					currentMaxY += shapeHeightScaled;
				} while(currentMaxY < cameraHeight);				
			}
			pGLState.popModelViewGLMatrix();
		}

	}

 

Consideraciones a la hora de hacer una imagen jpg parallax

Cuando tenemos una imagen que vamos a usar de fondo para un parallax hay que tener en cuenta que no vale cualquier imagen. El funcionamiento del fondo parallax se basa en que la imagen se va pintando repetidamente uniendo una imagen consigo misma. Esto significa que los bordes derecho e izquierdo (si el parallax es horizontal) y el superior e inferior (si el parallax es vertical) deberán poder unirse perfectamente. Si no se unen perfectamente y no coinciden los colores y formas, el parallax perderá su efecto y quedará mal, veremos un corte de unión entre la imagen consigo misma.

Para conseguir una imagen que nos sirva, podemos hacerlo de dos formas:

  1. Irnos a lo fácil, que consiste en elegir imágenes sencillas con figuras geométricas, cortando la imagen por los extremos de forma que al empalmarse consigo misma coincida perfectamente. Esto funciona bien si la imagen se repite y cortamos en el lugar adecuado. O po
  2. Irnos a lo difícil pero más vistoso, que consiste en coger una imagen de fondo y "adaptarla" para que pegue un lado con otro. Aquí tendremos que hacer uso de nuestra experiencia, ensayo y error y manejo de photoshop. Yo normalmente cojo una imagen y busco que por el lado izquierdo tenga el mismo color que por el derecho, además que no tenga figuras en los bordes. Luego corto la imagen por el centro aproximadamente, procurando que el corte quede en una zona que sea simétrica. Luego pego la parte izquierda de la imagen en la parte derecha, pero invirtiéndola horizontalmente, como si fuera un espejo. De esa forma me aseguro que la imagen al repetirse coincidira una parte con otra.

Como podéis ver, he espejado la imagen, si os fijáis la mitaz izquierda es un reflejo de la derecha. De esta forma los extremos coinciden.

Otro ejemplo:

Aquí he hecho lo mismo, he duplicado la imagen justo por el centro del arcoiris, si lo hubiera hecho por un sitio que no fuera el centro, el arcoiris habría quedado deformado y no habría valido

Ejemplos de juegos con parallax

Os pongo un par de juegos hechos por mi que usan parallax. Se agradece que los descarguéis y los votéis con 5 estrellas, así estaré más contento y seguiré con este tutorial:

Arkandroid: Este juego usa parallax verticales dobles. Por un lado la imagen de fondo se mueve y por otro unas naves encima se mueven a distinta velocidad.

Super Cauldron: Este juego usa parallax horizontales simples. Sólo el fondo se mueve a distinta velocidad, podéis verlo en el menú principal y durante el juego

Votos totales: 50