Any ideas on how I can get my foreground/midground to transition more smoothly?

[Molderr]

A bit wordy and messy code, but my foreground and background suddenly shift instead of fully going to its duplicate. I guess it has something to do with the scale and window size.

Game code - Pastebin.com

[OboShape]

Hi Molderr,

what course (and if possible what lecture if avaiable) is this from and ill get tags updated for you so the right people can find the question.

Darren

[Molderr]

I didn’t realize that the comment wasn’t attached to the video

It’s for: C++ Fundamentals: Game Programming For Beginners
Specifically ‘Drawing the Midground and Foreground’ of the dapper dasher project.

[OboShape]

No worries, I think the tagging system was having a moment to itself. I’ll get it updated just now

[Tuomo_T]

Thanks @OboShape!

The issue stems from the scaling values you’re using for your project. The reason we’re using background.width * 2, for example, is because Stephen scales the texture by a factor of 2. Since you’re changed the scaling of the background, midground, and foreground textures to fit your project better, the background.width is off for calculating when to transition. Fixing this is a matter of making sure the scaling matches.

This is your code, for context:

bgX -= 20*dt;
    if (bgX <= -Background.width*2)

    {
        bgX = 0.0;
    }

//Scroll the midground
    mgX -= 40*dt;
    if (mgX <= -Midground.width*2)
    {
        mgX = 0.0;
    }

//Scroll the foreground
    fgX -= 80*dt;
    if (fgX <= -Foreground.width*2)
    {
        fgX = 0.0;
    }
    //The background position changes on a rate of 20*delta time

Vector2 bg1Pos {bgX,0.0};

//Draw the Background
DrawTextureEx(Background,bg1Pos, 0.0, 6.0, PINK);
//The background position changes on a rate of 20*delta time
Vector2 bg2Pos {bgX + Background.width*6, 0.0};
DrawTextureEx(Background,bg2Pos, 0.0, 6.0, PINK);

//Draw the Midground
Vector2 mg1Pos {mgX,0.0};
DrawTextureEx(Midground,mg1Pos,0.0,4,WHITE);
Vector2 mg2Pos {mgX+Midground.width*2, 0.0};
DrawTextureEx(Midground,mg2Pos,0.0,4,WHITE);

//Draw the Background
Vector2 fg1Pos {fgX,0.0};
DrawTextureEx(Foreground,fg1Pos,0.0,5.2,WHITE);
Vector2 fg2Pos {fgX+Foreground.width*2, 0.0};
DrawTextureEx(Foreground,fg2Pos,0.0,5.2,WHITE);

All we need to do is change those *2 bits to match the scaling you’ve set. So *6, *4, and *5.2, respectively. We can also take this one step further and store these scaling values in variables so errors like this are less common.

//Scaling values for out background, midground, and foreground textures. Placed above our Game's While-Loop
float backgroundScale = 6.f;
float midgroundScale = 4.f;
float foregroundScale = 5.2f;

bgX -= 20*dt;
if (bgX <= -Background.width*backgroundScale)
{
    bgX = 0.0;
}

//Scroll the midground
mgX -= 40*dt;
if (mgX <= -Midground.width*midgroundScale)
{
    mgX = 0.0;
}

//Scroll the foreground
fgX -= 80*dt;

if (fgX <= -Foreground.width*foregroundScale)
{
    fgX = 0.0;
}
 
//The background position changes on a rate of 20*delta time
Vector2 bg1Pos {bgX,0.0};
//Draw the Background
DrawTextureEx(Background,bg1Pos, 0.0, backgroundScale, PINK);
//The background position changes on a rate of 20*delta time
Vector2 bg2Pos {bgX + Background.width*backgroundScale, 0.0};
DrawTextureEx(Background,bg2Pos, 0.0, backgroundScale, PINK);
 
//Draw the Midground
Vector2 mg1Pos {mgX,0.0};
DrawTextureEx(Midground,mg1Pos,0.0,midgroundScale,WHITE);
Vector2 mg2Pos {mgX+Midground.width*midgroundScale, 0.0};
DrawTextureEx(Midground,mg2Pos,0.0,midgroundScale,WHITE);
 
//Draw the Background
Vector2 fg1Pos {fgX,0.0};
DrawTextureEx(Foreground,fg1Pos,0.0,foregroundScale,WHITE);
Vector2 fg2Pos {fgX+Foreground.width*foregroundScale, 0.0};
DrawTextureEx(Foreground,fg2Pos,0.0,foregroundScale,WHITE);