When i scale down my 2D scrolling background it leaves a blur between frames

Question

I have a set of background images which start side by side and then move to the left and then offscreen.

In the game I need them to shrink when a button is pressed but have the Player sprite stay the same size. Current method: a scale variable (which is applied gradually) used in the draw method for background. This works and everything is fine except the edge of the textures look like the last column of pixels has been stretched to fill the space where it used to exist.

see here:

I considered adding a 2D camera and using a zoom out function instead of scaling down, but that would shrink my player too. I considered zooming out with a camera and scaling UP my player sprite but after a few button clicks the player sprite is going to lose quality and backgrounds are going to have to get huge to fill my viewport

Here is the relevant code:

float aScale = 1.0f;

public LevelScreen()
{
    SetUpLevel();
}

private void SetUpLevel()
{
// Setting Background positions - each rectangle follows the last
Back1Pos = new Rectangle(0, 0, (int)(Texture.Back01.Width * aScale), (int)(Texture.Back01.Height * aScale));
Back2Pos = new Rectangle(Back1Pos.Right, Back1Pos.Top, Back1Pos.Width, Back1Pos.Height);
Back3Pos = new Rectangle(Back2Pos.Right, Back2Pos.Top, Back1Pos.Width, Back1Pos.Height);
//.... etc
}


// Update Method
// Background Scrolling
back1Rect.X -= (int)(theScrollSpeed.X * theGameTime.ElapsedGameTime.TotalSeconds);
back2Rect.X -= (int)(theScrollSpeed.X * theGameTime.ElapsedGameTime.TotalSeconds);
back3Rect.X -= (int)(theScrollSpeed.X * theGameTime.ElapsedGameTime.TotalSeconds);
// .... etc


// Draw Method (Texture2D, Pos, SourceRect, Colour, Rotation, Origin, Scale, SEffects, Layerdepth)

mBatch.Draw(Texture.Back01, new Vector2(back1Pos.X, back1Pos.Height), 
            new Rectangle(0, 0, back1Pos.Width, back1Pos.Height), Color.White, 0f,
            Vector2.Zero, aScale, SpriteEffects.None, 0f);
// .... etc

This all seems to work fine. If you set the scale low before running the game everything appears normal, it is only when it is changed mid-game. and i think it has to do with the fact I tried to apply it gradually, like a 'Zoom out' effect instead of snapping backwards.

//Button press makes zooming true

if (zooming == true)
{
    if (aScale > newScale)
    {
       aScale -= 0.05f * (float)theGameTime.ElapsedGameTime.TotalSeconds;
    }
    else
    {
       aScale = newScale;
       zooming = false;
    }
}

Is there perhaps a better way I could gradually scale down? Any help would be appreciated. Thanks in advance!

You could draw the whole thing to a RenderTarget2D and then draw that as a scaled Texture2D. — user1306322

kunjee kunjee · Accepted Answer · 2013-08-09T05:22:36

Here is Stackoverflow question for zooming. It also have all the required links you needed to make it work.

XNA don't have any thing like 2D camera as far as I know. But you have to create / mock it using Matrix and stuff. Here is wonderful article explaining things in detail. Please have a look and let me know if you further details required.

When i scale down my 2D scrolling background it leaves a blur between frames

1 Answers