Tag 16 – parallaxes Scrollen

veröffentlicht am: 16. Dezember 2012

day16Heute gehe ich auf den Vorschlag von derSchotte ein, mal Parallax Scrolling zu implementieren.

Parallax Scrolling heißt, dass die verschiedenen Ebenen eines Bildes verschieden schnell scrollen. Je weiter entfernt die Ebene ist, desto langsamer bewegt sie sich.

Mit dieser Technik wird ein Gefühl von gewisser Räumlichkeit vermittelt.
parallax

Da ich momentan immer noch nicht ganz gesund bin, mit den Tutorials hinterherhinke und viel anderes zu tun habe, werde ich die Tutorials grob vorgeschrieben posten und in den nächsten Tagen dann weiter überarbeiten.

Inspiriert von diesem Beitrag im Forum habe ich mir auch mal so zwei Klassen ParallaxLayer und ParallaxBackground geschrieben.

import com.badlogic.gdx.graphics.g2d.TextureRegion;

/**
 * a layer from a parallax background
 * 
 * http://www.badlogicgames.com/forum/viewtopic.php?f=17&t=1795
 * 
 * @author bitowl
 *
 */
public class ParallaxLayer {
	/**
	 * the Texture sitting on this layer
	 */
	public TextureRegion region;

	/**
	 * how much shall this layer (in percent) be moved if the whole background is moved
	 * 0.5f is half as fast as the speed
	 * 2.0f is twice the speed
	 */
	float ratioX, ratioY;

	/**
	 * current position
	 */
	float positionX, positionY;

	/**
	 * 
	 * @param pRegion
	 * @param pRatioX
	 * @param pRatioY
	 */
	public ParallaxLayer(TextureRegion pRegion, float pRatioX, float pRatioY) {
		region = pRegion;
		ratioX = pRatioX;
		ratioY = pRatioY;
	}

	/**
	 * move this layer
	 * @param pDelta
	 */
	protected void moveX(float pDelta) {
		positionX += pDelta * ratioX;
	}

	/**
	 * move this layer
	 * @param pDelta
	 */
	protected void moveY(float pDelta) {
		positionY += pDelta * ratioY;
	}
}
import com.badlogic.gdx.graphics.Camera;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;

/**
 * a parallax background
 * 
 * http://www.badlogicgames.com/forum/viewtopic.php?f=17&t=1795
 * 
 * @author bitowl
 *
 */
public class ParallaxBackground {

	/**
	 * the layers of this background
	 */
	private ParallaxLayer[] layers;
	/**
	 * the camera 
	 */
	private Camera camera;
	/**
	 * sprite batch
	 */
	private SpriteBatch batch;

	/**
	 * create a background
	 * @param pLayers
	 * @param pCamera your camera, so you can define whatever you want :P
	 * @param pBatch your batch, so we do not have to use more than necessary
	 */
	public ParallaxBackground(ParallaxLayer[] pLayers, Camera pCamera,
			SpriteBatch pBatch) {
		layers = pLayers;
		camera = pCamera;
		batch = pBatch;
	}

	/**
	 * render the parallax background
	 */
	public void render() {
		batch.setProjectionMatrix(camera.projection);
		batch.begin();
		for (ParallaxLayer layer : layers) {
			batch.draw(layer.region, -camera.viewportWidth / 2
					- layer.positionX, -camera.viewportHeight / 2
					- layer.positionY);
		}
		batch.end();
	}

	/**
	 * move the parallax background on the x-axis
	 * @param pDelta
	 */
	public void moveX(float pDelta) {
		for (ParallaxLayer layer : layers) {
			layer.moveX(pDelta);
		}
	}

	/**
	 * move the parallax background on the y-axis
	 * @param pDelta
	 */
	public void moveY(float pDelta) {
		for (ParallaxLayer layer : layers) {
			layer.moveY(pDelta);
		}
	}
}

Unseren eigenen Parallax-Hintergrund bauen wir uns jetzt ganz schnell:

camera=new OrthographicCamera(400,240);
camera.position.x=200;
camera.position.y=120;
camera.update();
batch=new SpriteBatch();

layer1=atlas.findRegion("layer1");
layer2=atlas.findRegion("layer2");
layer3=atlas.findRegion("layer3");
ParallaxLayer l1=new ParallaxLayer(layer1,0,0);
ParallaxLayer l2=new ParallaxLayer(layer2,0.5f,0);
ParallaxLayer l3=new ParallaxLayer(layer3,1,0);
ParallaxLayer[] layers={l1,l2,l3};
background=new ParallaxBackground(layers, camera,batch);

// [...] in render
background.moveX(30*delta); // move to the right to show the effect
		
background.render();

parallaxexample
(interessant zu wissen: wir bewegen hier die Texturen an sich und nicht die Kamera)

Ich bastel immer noch an Kollisionserkennung mit Tilmaps rum und kriege es irgendwie nicht hin.
Brauche hierfür wohl noch ein paar Tage. :/
Irgendeine Idee, was ich in der Zwischenzeit (einfaches) erklären könnte? 🙁

bitowl

geposted in libgdx

9 Antworten zu “Tag 16 – parallaxes Scrollen”

  1. derSchotte sagt:

    wüsste da etwas: ParallaxScrolling per Camera oder Spieler…

    grüße

  2. djgriff sagt:

    Hi bitowl.. loving the tutorials.. learnt alot so far.. great stuff!

    Is the camera moving or is it the layers?

    thanks

  3. I can get the background to show but, the two top layers leave the screen as they move across it. How can I get the two top layers to repeat? (In simple terms the two top layers that move are not repeated).

    • bitowl sagt:

      Sorry, my spam filter ate your comment.

      You would probably have to draw it a second time moved by the width of the image. Then check wheter the first image is out of the screen and if yes, stop to draw it.
      That would be the simplest solution I could think of.

      bitowl

  4. Md. Sadaf Noor sagt:

    Really good job! It would be much appreciated if you can provide the full source code of the game then we can play with it. 🙂

  5. Hor sagt:

    Can you, please, host the source code somewhere? It would be VERY helpful to noobs who’s starting..

    Nice codes, btw. Cya!

  6. werner sagt:

    hello thanks for the code works great, I only have one issue how I can make the background infinite?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.