Making a repeating background

Of course, we could have the background remain static throughout the project, but that would get boring rather quickly and the plane will not appear to actually be moving. Instead, to make the game more visually interesting, let's have the background move to make the player's plane appear to be flying:

  1. From the Project tab, open the Scripts folder and then select Create | C# Script. Name the newly created script RepeatingBackground.
  2. Double-click on the script file to open it up in your IDE of choice and use the following code:
    using UnityEngine;

public class RepeatingBackground : MonoBehaviour
{

    [Tooltip("How fast should this object move")] 
    public float scrollSpeed;

    /// <summary>
    /// How far to move until the image is offscreen.
    /// </summary>
    public const float ScrollWidth = 8;  // bg width / 
                                         // pixels per unit

    /// <summary>
    /// Called at a fixed time frame, moves the objects and 
    /// if they are off the screen do the appropriate thing
    /// </summary>
    private void FixedUpdate()
    {
        // Grab my current position
        Vector3 pos = transform.position;

        // Move the object a certain amount to the left 
        // (negative in the x axis)
        pos.x -= scrollSpeed * Time.deltaTime;

        //Check if object is now fully offscreen
        if (transform.position.x < -ScrollWidth)
        {
            Offscreen(ref pos);
        }

        // If not destroyed, set our new position
        transform.position = pos;
    }

    /// <summary>
    /// Called whenever the object this is attached to goes 
    /// completely off-screen
    /// </summary>
    /// <param name="pos">reference to position</param> 
    protected virtual void Offscreen(ref Vector3 pos)
    {
        // Moves the object to be to off-screen on the
       // right side
        pos.x += 2 * ScrollWidth;
    }
    
}

Repeating background script

The repeating background script does a number of different things. First, we have two properties, scrollSpeed, which is the measure of how fast the background will move, and ScrollWidth, which is a const variable. The const keyword stands for constant, which means that this value cannot change from 8— the width of our background sprite.

We're also using a function named FixedUpdate, which unlike the regular update is called at a fixed time to keep the movement of our image steady. In this function, we set a helper variable pos to the object's current positon and then move it in the x axis negatively (to the left), and after we move it, we check whether it's completely off screen. If it is, then we call the Offscreen function. Afterwards, we set our position to the pos value.

The Offscreen function is something we would like to extend in the future. Instead of being public or private, we are using a new access modifier named protected, which means that it acts private, unless it is used by a child class, then it is still accessible. In addition, the function is also virtual, which means that we can override it in the future if we'd like to, which we will when we are creating our obstacles.

  1. Save the script and move back to the Unity editor. Then, select the background object from the Hierarchy tab and add the RepeatingBackground component to it. From the Inspector tab, change the Scroll Speed property to 5 and then run the game:
    Repeating background script

    You'll see that now the background image will move all the way over to the left and then repeat itself again! This is great, but half the time, there's some other background on our screen. Now we will see how we can easily fix this.

  2. Create an empty game object, name it Background, and set its position to 0,0,0. From there, drag and drop our background object on top of it to make it a child. Then, select the child again and duplicate it (Ctrl + D). Select the duplicate object from the Hierarchy tab and then change the X position to 8:
    Repeating background script

    This sprite on the right-hand side will move the same way as our original and will fill in the space that our left side leaves behind. It'll also be fully on the screen when we move the first image to the right via the Offscreen function.

    With this, we now have an infinitely repeating background, but we can also reuse this same function in other interesting ways to create a more dynamic feel by adding some elements in front of the background.

  3. From the Art Assets folder, bring in the groundGrass sprite and place it into the world at 0, -2, 0.
  4. Then, attach a RepeatingBackground component to the object with a Scroll Speed of 5 and change the two background object's Scroll Speed down to 2.
  5. Make the groundGrass a child of the Background object as well and then duplicate (Ctrl + D) it with a position to 8,-2,0.
  6. Save the scene and play the game!
Repeating background script

And with this, we have a much more realistic world, with objects closer to the camera moving faster than objects far away, in addition to repeating forever!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset