2D Background Scrolling & Parallax Scrolling in Unity3D

Scrolling backgrounds is quite a necessity in 2D Platformer/Sidescroller/Shooter games. I had been  working on  a platformer recently and made a script for myself.

giphy.gif

This script is can be attached to a sprite to make it scroll horizontally. It requires a SpriteRenderer and takes a RigidBody2D as a target.

Seamless sprites as the following should be used. The longer the image, it looks better.

Bushes.png
Seamless Bush Sprite for Background

Following is the C# code for the background scrolling:

// Background Scrolling
// Author: Rakesh Malik
// Date: 6-Dec-2016

using UnityEngine;
using System.Collections;

[RequireComponent (typeof (SpriteRenderer))]

public class ScrollBackground : MonoBehaviour {

    //target can be rigidbody2d component of a player or some object
    public Rigidbody2D target;
    //speed of scrolling
    public float speed;

    private float initPos;

    void Start () {
         initPos = transform.localPosition.x;
         //Create a clone for filling rest of the screen
         GameObject objectCopy = GameObject.Instantiate (this.gameObject);
         //Destroy ScrollBackground component in clone
         Destroy(objectCopy.GetComponent<ScrollBackground> ());
         //Set clone parent and position
         objectCopy.transform.SetParent (this.transform);
         objectCopy.transform.localPosition = new Vector3 (getWidth(), 0, 0);
    }
 
    void FixedUpdate () {
         //get target velocity
         //if you wish to replace target with a non-rigidbody object, this is the place
         float targetVelocity = target.velocity.x;
         //translate sprite according to target velocity
         this.transform.Translate (new Vector3 (-speed * targetVelocity, 0, 0) * Time.deltaTime);
         //set sprite is moving out of screen shift it to put clone in its place
         float width = getWidth ();
         if (targetVelocity > 0) {
             //shift right if player is moving right
             if (initPos - this.transform.localPosition.x > width) {
                 this.transform.Translate (new Vector3 (width, 0, 0)); 
             }
         } else {
             //shift left if player moving left
             if (initPos - this.transform.localPosition.x < 0) {
                 this.transform.Translate (new Vector3 (-width, 0, 0)); 
             }
         }
    }

    float getWidth() {
        //Get sprite width
        return this.GetComponent<SpriteRenderer> ().bounds.size.x;
    }
}

Multiple instances can be used for Parallax Scrolling too, when speed is set as different values. The following image shows an example of parallax scrolling as used in my game. There are 10 layers of background with different speeds each. I found prime numbers to be used as speed is best. For example the parameters used for speed in my set up are:

  • 0.07, 0.19, 0.53, 0.63, 1.29 for 5 background objects
  • 1.o for focused layer (Small Bushes in the image)
  • 0.97, 0.91, 0.89, 0.51 for 4 foreground objects.

Screen Shot 2016-12-06 at 1.57.45 PM.png

Though the script depends on only 2D rigidbody platformer characters. It is can easily be used for any non-rigidbody characters or for vertical scrolling in shooting games.

Please note that, this code is only for scrolling backgrounds in 2D games which is made up of sprites. If you want to scroll a texture in a 3D game, it can be done in more easier way.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s