endless background for the level

Question

Could you please help with the endless background for the level?

I'm currently writing a primitive game using slick2d, the gameplay is similar to Mario.

I have two pictures - img1 and img2 (both 1280x480, while the screen resolution is 640x480). Initially the X of the img2 is == (X of img1 + width of img1). I.e. its glued to the end of the img1. When the img1 is out of the left screen border, it's X coordinate becomes img2X + imgWidth.

The logic looks right for me, but sometimes the pictures getting overstriked (a lot, approx 1/4 of the screen). Is there any mistakes in the logic? Does the approach is good? Maybe there is more simple and right way to do so?

The pseudo-code look like below:

class BkgDrawer {


Image img1 = new Image("imgs/background/bkg1.png");
Image img2 = new Image("imgs/background/bkg2.png");

int img1Width = img1.getWidth(); //1280
int img2Width = img2.getWidth(); //1280
int screenResolution = game.getResolution; //640

Vector2f position1 = new Vector2f (0,0);
Vector2f position2 = new Vector2f (position1.x+img1.getWidth(), 0); //initially position2 is glued to the end of img1

public void render(    ) {
  if (position1.x + img1Width < 0) { //the img is over the left border of the screen
      position1.x = position2.x + img2Width; //glue it to the end of  img2
  }
//the same for the img2
  if (position2.x + img2Width < 0) { //the img is over the left border of the screen
      position2.x = position1.x + img2Width; //glue it to the end of  img2
  }
  img1.draw(position1.x, position1.y);
  img2.draw(position2.x, position2.y);
  //move coordinate to get the background moving.
  position1.x -= MOVING_STEP;
  position2.x -= MOVING_STEP;
  }
}

Sorry for the lot of text and thanks

Answer 1

I have found only one bug and it will only have an affect if the two images have different widths: Your two if-statements use the same width img2Width

You may have noticed that you have duplicate code to handle the rendering and repositioning of each background. Might I suggest that you refactor the background code into a Background class that contains the background image, position, and and update method that repositions it by MOVING_STEP. You will avoid mistakes like the one I mentioned above.