Moving Quads for scrolling background

Hi,

I wanted to extend what we learned in the scrolling background section so that I can achieve a better mirage of going forward. So what I did is, I duplicated the background quad twice and added them to the left and right of the background quad. I call this BackgroundSet1.Then I duplicated the set twice and add these on top of the first set to have a continuous background (in total 3 sets each have 3 quads).
Also, each set has a game object as a child, called bckAnchorPoint, with a circle collider(r=0.01) and a rigidbody2D stationed at the very top of each set.

I also created 2 anchor points, one at the origin of the top set, and one at the bottom of the bottom set. (The quads are 27 units and the coordinate system starts at the origin of the bottom set, so the bottom anchor is at -13.5 and the top anchor is at 54). The bottom anchor has a trigger collider (r=0.01)

I move all 3 sets at a constant speed, and when the bckAnchorPoint collides with the bottom anchor, the set at the bottom moves to the position of the top anchor. These are the scripts:

BackgroundMover:

public class BackgroundMover : MonoBehaviour
{
[SerializeField] float backgroudMoveSpeed;
[SerializeField] Transform bckground;

// Start is called before the first frame update
void Start()
{
    
    
    
}

// Update is called once per frame
void Update()
{
    bckground.position -= transform.up * backgroudMoveSpeed * Time.deltaTime;
   
}

}
BackgroundShifter:

Blockquotepublic class BackgroundShifter : MonoBehaviour
{

[SerializeField] Transform bck1, bck2, bck3;
[SerializeField] Transform anchorTop;

// Start is called before the first frame update
void Start()
{
    
}

// Update is called once per frame
void Update()
{
    
}
private void OnTriggerEnter2D(Collider2D collision)
{
    if (collision.tag == "bck")
    {
        bck1.position = anchorTop.position;
    }
    else if (collision.tag == "bck2")
    {
        bck2.position = anchorTop.position;
    }
    else if (collision.tag == "bck3")
    {
        bck3.position = anchorTop.position;
    }
}

}

Now, this kind of works as I want but there is a little problem. When the sets shift from bottom to top, they overlap just a little.
ezgif.com-gif-maker(2)

I am not sure if it can be seen in the gif but there is a little flashing line.
What I am asking is if there is a better way to make the bottom of the set snap at the top of the next one so that they would seem like a continuous image.
Thanx in advance…Cheers…=)

Hi again,

I manged to solve my problem by changing the script to this:

Blockquote
public class BackgroundShifter : MonoBehaviour
{

[SerializeField] Transform bck1, bck2, bck3;
[SerializeField] Transform anchorTop;

// Start is called before the first frame update
void Start()
{
    
}

// Update is called once per frame
void Update()
{
    
}
private void OnTriggerEnter2D(Collider2D collision)
{
    if (collision.tag == "bck")
    {
        bck1.position = new Vector2(0, bck3.position.y + 27f);
    }
    else if (collision.tag == "bck2")
    {
        bck2.position = new Vector2(0, bck1.position.y + 27f);
    }
    else if (collision.tag == "bck3")
    {
        bck3.position = new Vector2(0, bck2.position.y + 27f);
    }
}

}

Which should have been obvious…=)

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

Privacy & Terms