Parallax Scrolling
Parallax Scrolling uses several background images, and then adjust an offset which makes the backgrounds move relative to each other. This makes it look like a scrolling background.
Background Class
We need to create a class to create a background (this will be used to make 3 backgrounds). In your Game1.cs or by adding a class to the project enter the following code:
public class Background
{
private Texture2D Texture; //The image to use
private Vector2 Offset; //Offset to start drawing our image
public Vector2 Speed; //Speed of movement of our parallax effect
public float Zoom; //Zoom level of our image
private Viewport Viewport; //Our game viewport
//Calculate Rectangle dimensions, based on offset/viewport/zoom values
private Rectangle Rectangle
{
get { return new Rectangle((int)(Offset.X), (int)(Offset.Y), (int)(Viewport.Width / Zoom), (int)(Viewport.Height / Zoom)); }
}
}
This creates the basis for a background class. The background class will also need a constructor, this will be used to setup each background with a texture, the speed it scrolls, and a level of zoom:
public Background(Texture2D texture, Vector2 speed, float zoom)
{
Texture = texture;
Offset = Vector2.Zero;
Speed = speed;
Zoom = zoom;
}
The background class will also need an update method, it essentially adjusts the offset of the background according to the elapsed time:
public void Update(GameTime gametime, Vector2 direction, Viewport viewport)
{
float elapsed = (float)gametime.ElapsedGameTime.TotalSeconds;
//Store the viewport
Viewport = viewport;
//Calculate the distance to move our image, based on speed
Vector2 distance = direction * Speed * elapsed;
//Update our offset
Offset += distance;
}
The background class will also need a draw method:
public void Draw(SpriteBatch spriteBatch)
{
spriteBatch.Draw(Texture, new Vector2(Viewport.X, Viewport.Y), Rectangle, Color.White, 0, Vector2.Zero, Zoom, SpriteEffects.None, 1);
}
Define a list of backgrounds
In your Game1.cs, we need to create a list to store the backgrounds in use. So declare the following with your other variables:
List<Background> backgrounds = new List<Background>();
In the LoadContent method we need to read in the backgrounds, and add them to our list of backgrounds:
backgrounds.Add(new Background(Content.Load<Texture2D>(@"Clouds1"), new Vector2(300, 300), 0.6f));
backgrounds.Add(new Background(Content.Load<Texture2D>(@"Clouds2"), new Vector2(500, 500), 0.8f));
backgrounds.Add(new Background(Content.Load<Texture2D>(@"Clouds3"), new Vector2(700, 700), 1.1f));
Using the Backgrounds
Now in the Update method, we need to set a direction for the scrolling, and then update each background:
if (Keyboard.GetState().IsKeyDown(Keys.A))
{
direction = new Vector2(-1, 0);
}
if (Keyboard.GetState().IsKeyDown(Keys.D))
{
direction = new Vector2(1, 0);
}
foreach (Background bg in backgrounds)
bg.Update(gameTime, direction, GraphicsDevice.Viewport);
Now in the Draw method add the code before any foreground drawing:
spriteBatch.Begin(SpriteSortMode.Deferred, null, SamplerState.LinearWrap, null, null);
foreach (Background bg in backgrounds)
bg.Draw(spriteBatch);
spriteBatch.End();
The Textures
You can create your own background textures, or you can use these HERE. You will need to put them in the content folder of your project, and you will need to add them to the content pipeline and make sure they are built.