Having the Background or Camera “Scroll” based on

Question

I'm working on an RPG game that has a Top-Down view. I want to load a picture into the background which is what the character is walking on, but so far I haven't figured out how to correctly have the background redraw so that it's "scrolling". Most of the examples I find are auto scrolling.

I want the camera to remained centered at the character until you the background image reaches its boundaries, then the character will move without the image re-drawing in another position.

Answer 1

Your question is a bit unclear, but I think I get the gist of it. Let's look at your requirements.

1. You have an overhead camera that's looking directly down onto a two-dimensional plane. We can represent this as a simple {x, y} coordinate pair, corresponding to the point on the plane at which the camera is looking.
2. The camera can track the movement of some object, probably the player, but more generally anything within the game world.
3. The camera must remain within the finite bounds of the game world.

Which is simple enough to implement. In broad terms, somewhere inside your Update() method you need to carry out steps to fulfill each of those requirements:

if (cameraTarget != null)
{
    camera.Position = cameraTarget.Position;
    ClampCameraToWorldBounds();
}

In other words: if we have a target object, lock our position to its position; but make sure that we don't go out of bounds.

ClampCameraToBounds() is also simple to implement. Assuming that you have some object, world, which contains a Bounds property that represents the world's extent in pixels:

private void ClampCameraToWorldBounds()
{
    var screenWidth = graphicsDevice.PresentationParameters.BackBufferWidth;
    var screenHeight = graphicsDevice.PresentationParameters.BackBufferHeight;

    var minimumX = (screenWidth / 2);
    var minimumY = (screnHeight / 2);

    var maximumX = world.Bounds.Width - (screenWidth / 2);
    var maximumY = world.Bounds.Height - (screenHeight / 2);
    var maximumPos = new Vector2(maximumX, maximumY);

    camera.Position = Vector2.Clamp(camera.Position, minimumPos, maximumPos);
}

This makes sure that the camera is never closer than half of a screen to the edge of the world. Why half a screen? Because we've defined the camera's {x, y} as the point that the camera is looking at, which means that it should always be centered on the screen.

This should give you a camera with the behavior that you specified in your question. From here, it's just a matter of implementing your terrain renderer such that your background is drawn relative to the {x, y} coordinate specified by the camera object.

Given an object's position in game-world coordinates, we can translate that position into camera space:

var worldPosition = new Vector2(x, y);
var cameraSpace = camera.Position - world.Postion;

And then from camera space into screen space:

var screenSpaceX = (screenWidth / 2) - cameraSpace.X;
var screenSpaceY = (screenHeight / 2) - cameraSpace.Y;

You can then use an object's screen space coordinates to render it.

Answer 2

Your can represent the position in a simple Vector2 and move it towards any entity. public Vector2 cameraPosition;

When you load your level, you will need to set the camera position to your player (Or the object it should be at)

You will need a matrix and some other stuff, As seen in the code below. It is explained in the comments. Doing it this way will prevent you from having to add cameraPosition to everything you draw.

    //This will move our camera
    ScrollCamera(spriteBatch.GraphicsDevice.Viewport);

    //We now must get the center of the screen
    Vector2 Origin = new Vector2(spriteBatch.GraphicsDevice.Viewport.Width / 2.0f, spriteBatch.GraphicsDevice.Viewport.Height / 2.0f);

    //Now the matrix, It will hold the position, and Rotation/Zoom for advanced features
    Matrix cameraTransform = Matrix.CreateTranslation(new Vector3(-cameraPosition, 0.0f)) *
       Matrix.CreateTranslation(new Vector3(-Origin, 0.0f)) *
       Matrix.CreateRotationZ(rot) * //Add Rotation
       Matrix.CreateScale(zoom, zoom, 1) * //Add Zoom
       Matrix.CreateTranslation(new Vector3(Origin, 0.0f)); //Add Origin

      //Now we can start to draw with our camera, using the Matrix overload
    spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend, SamplerState.LinearClamp, DepthStencilState.Default,
                             RasterizerState.CullCounterClockwise, null, cameraTransform);


    DrawTiles(spriteBatch); //Or whatever method you have for drawing tiles

    spriteBatch.End(); //End the camera spritebatch
    // After this you can make another spritebatch without a camera to draw UI and things that will not move

I added the zoom and rotation if you want to add anything fancy, Just replace the variables.

That should get you started on it.

However, You will want to make sure the camera is in bounds, and make it follow.

Ill show you how to add smooth scrolling, However if you want simple scrolling see this sample.

   private void ScrollCamera(Viewport viewport)
        {
            //Add to the camera positon, So we can see the origin
            cameraPosition.X = cameraPosition.X + (viewport.Width / 2);
            cameraPosition.Y = cameraPosition.Y + (viewport.Height / 2);

            //Smoothly move the camera towards the player
            cameraPosition.X = MathHelper.Lerp(cameraPosition.X , Player.Position.X, 0.1f);
            cameraPosition.Y = MathHelper.Lerp(cameraPosition.Y, Player.Position.Y, 0.1f);
            //Undo the origin because it will be calculated with the Matrix (I know this isnt the best way but its what I had real quick)
            cameraPosition.X = cameraPosition.X -( viewport.Width / 2);
            cameraPosition.Y = cameraPosition.Y - (viewport.Height / 2);

            //Shake the camera, Use the mouse to scroll or anything like that, add it here (Ex, Earthquakes)

            //Round it, So it dosent try to draw in between 2 pixels
            cameraPosition.Y= (float)Math.Round(cameraPosition.Y);
            cameraPosition.X = (float)Math.Round(cameraPosition.X);


            //Clamp it off, So it stops scrolling near the edges
            cameraPosition.X = MathHelper.Clamp(cameraPosition.X, 1f, Width * Tile.Width);
            cameraPosition.Y = MathHelper.Clamp(cameraPosition.Y, 1f, Height * Tile.Height);

        }

Hope this helps!