2D Scrolling Background in Unity

When creating a scrolling background image you will use something called a Quad and convert the Sprite into a Material. This works only if the background is designed to be scrollable. The general steps are:

A. Create a new Project or use an existing project. B. Import the background sprite into the project C. Convert the Sprite into a Material D. Add a Quad 3D object and resize this object to match the background and set the Material Filtering E. Resize the Camera F. Add a Scrolling Script to the Quad

1. Download the scrolling backgrounds folder that contains some background images (see link for lecture). This will contain three images, a city background image (1230x600), a space background (1782x600) and a trees background (1100x405) 2. Start Unity and choose New to create a new Project. 3. Name the project Scrolling Background and select the 2D option. 4. Create the Project. 5. In the Assets folder create two new folders named Sprites and Scripts. 6. Drag these three background images into the sprites folder. 7. Click the scrolling city background image in the Sprites folder. The Inspector window shows the properties:

You are going to change the Texture Type and the Wrap mode.

8. Set the Texture Type to Default and the Wrap Mode to Repeat.

9. Scroll down in the Inspector window and click the Apply button. 10. Repeat these steps for the other two sprites. 11. Click the Game Object menu, choose 3D, and choose Quad:

You want to resize the quad object so it matches the background. The city background image has a size of 1230 x 600. This must be converted into Units (with 100 pixels per unit as the scale).

1230 / 100 = 12.3 width 600 / 100 = 6 height

12. Click the Quad object and in the Inspector window in the Transform area set the Scale X to 12.3 and the Scale Y to 6

13. Drag the City scrolling background image and drop it on the Quad object.

14. Make sure the Quad is selected and look in the Inspector window and locate the Shader button

15. Click this button and set it to Particles/Alpha Blended

You will next resize the Camera. The background height is 6 units so the camera size will be set to 6/2.

16. Click the Main Camera object. 17. In the Inspector set the camera size to 3

You will next add the Script to make the background scroll.

18. Right click the Scripts folder and choose Create/C# Script. Name this script scrolling. 19. Double click to Edit the script.

20. Edit the script so it looks like:

using System.Collections; using System.Collections.Generic; using UnityEngine; public class scrolling : MonoBehaviour {

public float speed = .3f; private Renderer r;

// Use this for initialization void Start () { r = GetComponent(); }

// Update is called once per frame void Update () { Vector2 offset = new Vector2(Time.time * speed, 0); r.material.mainTextureOffset = offset;

} }

This script creates a Renderer object in the Start method, creates a new 2D vector, and assigns it to the material. The scrolling speed can be changed by changing speed. In this case the value of Time.time * speed is positive in the X position so the scrolling is to the left (moving to the right). Scrolling vertically is done by setting the Y value).

21. Save this script and drag the script and drop it on the Quad object. 22. Run your game.