Slick Forums

Hello!
I'm currently writing a primitive game using slick2d, the gameplay is similar to Mario.
Could you please help with the endless background for the level?
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-logic 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

Just checked the approach on Delphi, everything is working well, so the problem seems to be in the engine.
I must be used it in a wrong way. Could someone please suggest how he would do so?

Some things to consider:

• Slick loads images in power of two, so your 1280x480 image is being stored as a 2048x512 openGL texture. That means plenty of wasted space and some increased loading time, but more importantly, you may run into some older machines that don't support textures larger than 1024 (or certain mobile devices only 512x512!). Just something to be aware of...
• You aren't including the delta value in your movement, which might cause stuttering/jumping. This is the amount of time that surpassed since the last frame, and it's used to reduce stuttering as well as to ensure consistent playback speed across platforms.
  
  Code:
  position1.x -= MOVING_STEP * delta;
  position2.x -= MOVING_STEP * delta;
• There is a typo in your second if statement, it should instead look like:
  
  Code:
  position2.x = position1.x + img1Width;

Also, your logic won't scale too well as your game grows... Let's say you want 3 images side by side? Or 30? That will lead to a lot of if statements and bounds checking. It would be easier to render all background images in a loop side by side, and use g.translate to scroll. If any images are < 0 or > screenWidth, push/pop them around the stack as necessary.

I don't have the time to debug your code any further, but I suspect it's a problem with logic or lack of delta values.

Hello davedes

Thank you a lot for your tips. Will try your approach.

Yes, that was a typo in code, but as far as imgs has the same width that was fine.

I've wrote there not to make someone to debug my code, but just to get such tips like you kindly provided above.

Thanks a lot!