[libdgx] day 16 – parallax scrolling

Today I react to the proposal from derSchotte to tell you something about parallax scrolling.

parallax scrolling means, that the different layers of the screen are scrolled at different speeds. The more distance the layer has to the camera the slower it does move.

With this technique you can fake a certain three-dimensionality in 2D.

As I’m still not 100% healthy, a few days too late with my tutorials and have much other stuff to do, the next days the tutorials will only be rough written and then a few days later written more precisely.

Inspired by this forum post I as well wrote these ParallaxLayer and ParallaxBackground classes (just a little bit simpler).

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 {

 /**habe ich mir auch mal so zwei Klassen ParallaxLayer und ParallaxBackground geschrieben.
  * 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);
  }
 }
}

These are really easy to use:

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();

(might worth noticing: we are scrolling by moving the textures and not the camera)

I’m still fiddeling with collision detection on tile-basis and am not getting it right.
Probably gonna need a few more days for this :/
Any suggestion on things I should explain to fill the days between?