Parallax Background with FPS motion?


I’m trying to use some parallax background layers in my game, it works perfectly, but I have a problem:

  • I have independent Draw(draw everything) and Calc(calculate everything) methods.
  • Draw is called in every loop.
  • Calc is called in every loop but is limited to FPS, so If the game is running in 30 FPS or 60FPS, all the moviments in the game will not be changed with the fps difference, this is really good.
  • I can’t adapt and separate the code of Parallax Background in Draw and Calc, I’m trying and trying but nothing works, because I need to calculate and draw the parallax background at same time(one inside other).
  • If I run this in default “render”, it works, but If I have 30FPS the background move slower than 60FPS. I want to separate Calc from Draw to calculate the moviment of the Parallax Background based on my FPS motion code.

Is there a way to do this?

ParralaxBackground (this code I need to separate):

public class ParallaxBackground {
   private ParallaxLayer[] layers;
   private Camera camera;
   private SpriteBatch batch;
   public Vector2 speed = new Vector2();
   public ParallaxBackground(ParallaxLayer[] layers,float width,float height,Vector2 speed){
      this.layers = layers;
      camera = new OrthographicCamera(width, height);
      batch = new SpriteBatch();
   public void render(float delta)
      camera.position.add(speed.x*delta,speed.y*delta, 0);
      for(ParallaxLayer layer:layers)
         float currentX = - camera.position.x*layer.parallaxRatio.x % ( layer.region.getRegionWidth() + layer.padding.x) ;
         if( speed.x < 0 )
        	 currentX += -( layer.region.getRegionWidth() + layer.padding.x);
            float currentY = - camera.position.y*layer.parallaxRatio.y % ( layer.region.getRegionHeight() + layer.padding.y) ;
            if ( speed.y < 0 )
            	currentY += - (layer.region.getRegionHeight()+layer.padding.y);
                     -camera.viewportWidth + currentX + layer.startPosition.x ,
                     -camera.viewportHeight + camera.position.y + layer.startPosition.y);
               currentY += ( layer.region.getRegionHeight() + layer.padding.y );
            } while( currentY < camera.viewportHeight);
            currentX += ( layer.region.getRegionWidth()+ layer.padding.x);
         }while( currentX < camera.viewportWidth);


public class ParallaxLayer{
   public TextureRegion region ;
   public Vector2 parallaxRatio;
   public Vector2 startPosition;
   public Vector2 padding ;
   public ParallaxLayer(TextureRegion region,Vector2 parallaxRatio,Vector2 padding){
      this(region, parallaxRatio, new Vector2(0,0),padding);

   public ParallaxLayer(TextureRegion region,Vector2 parallaxRatio,Vector2 startPosition,Vector2 padding){
	  this.region  = region;
      this.parallaxRatio = parallaxRatio;
      this.startPosition = startPosition;
      this.padding = padding;


        rbg = new ParallaxBackground(new ParallaxLayer[]
	                new ParallaxLayer(new TextureRegion (new Texture("images/bg_1.png")),new Vector2(1.0f,1.0f), new Vector2(camera.position.x+viewport.getWorldWidth()/6, (viewport.getWorldHeight() * 0.5f)+groundHeight), new Vector2(0, 0)),
        		}, viewport.getWorldWidth(), viewport.getWorldHeight(),new Vector2(50,0));



E.g of Draw and Calc:


sprite.draw (batch); //Draw everytime


			//FPS Independent TICK = FPS based.
			accum += getDeltaTime();
			while(accum >= TICK)
			    accum -= TICK; 

			    sprite.x + = 5;

With this code, the sprite is continuously drawn and the moviment in 10/20/30/50/60/120FPS is always the same.