Hello.
I imagine this topic is not new but I haven’t found much about this.
I’m learning steb by step SDL2 and now I’m trying to create an infinite/continous horizontal scroll. To create the continous effect, it uses 3 images to create a big background, chaining the images while they are being scrolled and rendered. A classical.
But I noticed it’s not smooth, jerking slightly.
Furthermore, I compiled the LazyFoo’s tutorial #31 about continous scroll with 1 image, noticing the same effect but in a lower pace, I guess due the tutorial only uses 1 image therefore there are less rectangles to process. Not sure about this. The “jerking” is still there, normally when the image is close or just dissappearing by the left side of the window.
To discard a problem in code, I translated it into similar projects in XNA (just the calculations and rendering since I don’t know much about XNA), and it is completely smooth. So I don’t think the problem is in how the continous scroll is made… perhaps the timing?. The code is pretty simple.
- Window and redender are created with default parameters.
- I used a simple delay for getting 60FPS, to avoid messing with variable FPS, etc. (perhaps could it be the problem?).
- Use a left scroll with 3 pixels per frame (it could be changed in source since I’m testing it).
- Images are 400 x 300; same size for main window.
- I’m using Visual Studio 2013, 32bit mode, default compilation parameters for debug/release (I don’t think I need to mess with optimizations, etc. for this simple code), under Windows7 64b.
- SDL2 last version to date.
Sample code:
Code:
int direction = -1; // left
int speed = 3; // 3 pixels per frame
bool loop = true;
int delay = 16; // for 60FPs
while (loop)
{
SDL_Event event;
while (SDL_PollEvent(&event))
{
if (event.type == SDL_QUIT) {
loop = false;
}
}
//chain images for left scroll [b](note 1)[/b]
if (bgPosOne.x < -bgPosOne.w)
bgPosOne.x = bgPosThree.x + bgPosThree.w;
if (bgPosTwo.x < -bgPosTwo.w)
bgPosTwo.x = bgPosOne.x + bgPosOne.w;
if (bgPosThree.x < -bgPosThree.w)
bgPosThree.x = bgPosTwo.x + bgPosTwo.w;
// scroll images [b](note 2)[/b]
bgPosOne.x = bgPosOne.x + (direction * speed);
bgPosTwo.x = bgPosTwo.x + (direction * speed);
bgPosThree.x = bgPosThree.x + (direction * speed);
//show result[b] (note 3)[/b]
// Clear the window and make it all red
SDL_RenderClear( renderer );
// Render the background images (only the images with coordenates inside the camera will be shown)
SDL_RenderCopy(renderer, bgTextureOne, NULL, &bgPosOne );
SDL_RenderCopy(renderer, bgTextureTwo, NULL, &bgPosTwo);
SDL_RenderCopy(renderer, bgTextureThree, NULL, &bgPosThree);
// Render the changes above
SDL_RenderPresent( renderer);
// Add a 16msec delay to make our game run at ~60 fps
SDL_Delay(delay);
}
-(1) it chains the images in sequence to simulate a big image. When an image goes out of the window, it’s appended with the last image in the right side making it look continous. If the image is still inside the visible window, the X coordinate of each image is adjusted to the previous image. Ie:
image_1 pos x = 0; image_2 pos x = 400; image_3 pos x = 800
then scroll 3p, new X values are:
image_1 pos x = -3; image_2 pos x = 397; image_3 pos x = -797
then scroll 3p, new X values are:
image_1 pos x = -6; image_2 pos x= 394; image_3 pos x = -794
so on...
It’s the classical approach to this kind of continous scroll.
-(2) scroll images to left
-(3) renders the result.
Some variations tested over this code (and not shown here):
-Changing the speed (pixels advanced per frame) or delay, doesn’t show any improvement or makes the problem worse.
-Checking if an image is out of the window, therefore it’s not renderered and not sent to render, doesn’t improve anything.
-The effect is more noticeable when scrolling to right.
-Using other time control variations, kind of simple delta-time, etc. no improvement noticeable.
-Used surfaces and blitting instead textures, the effect is even worse.
Any suggestion is welcome. I ran out ideas about why or what happens, so any suggestion is welcome. I’m not asking about debugging my code. If you have a simple working example of smooth background and can share it, nice, I could study it and compare with my code.
Thanks you.------------------------
Signature under construction.