Parallax Scrolling

From TRCCompSci - AQA Computer Science
Revision as of 10:59, 24 March 2019 by Admin (talk | contribs) (Created page with "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 backg...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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));

Now in the Update method, we need to set a direction for the scrolling:

if (Keyboard.GetState().IsKeyDown(Keys.A))
{
     direction = new Vector2(-1, 0);
}
if (Keyboard.GetState().IsKeyDown(Keys.D))
{
     direction = new Vector2(1, 0);
}

Now we can update each background:

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.