[Unity/C#] 배경 이미지 무한 스크롤

 

배경 화면 무한 스크롤을 만드는 방법에 대해 포스팅하겠다.

 

일단 배경 화면 무한 스크롤을 만드는 방법은 크게 두 가지가 있다. (두 가지 말고 다른 방법이 있을 수 도 있다.)

1. 배경 이미지 3개를 순서대로 배치하고 위치를 최신화 시켜주는 방법
2. Material의 Offset 값을 이용하는 방법

현재 진행하는 프로젝트의 배경은 애니메이션이 들어가 있기 때문에 1번 방법을 사용해 구현해 보겠다.

---

 

스크롤하고자 하는 배경 이미지 3개를 스크롤하고자 하는 방향에 맞춰 배치한다. (이 글에서는 아래로 스크롤하겠다.)

 

이렇게 생성한 배경 이미지를 스크롤하는 Background Scroll Handler 스크립트를 작성하겠다.

using System.Collections;
using UnityEngine;

public class BackgroundScrollHandler : MonoBehaviour
{
    [SerializeField] private Transform[] backgroundImages;
    [SerializeField] private float scrollSpeed;
    private Coroutine scrollCoroutine;

    private void Start()
    {
        StartBackgroundScroll();
    }

    private void StartBackgroundScroll()
    {
        if (scrollCoroutine != null)
        {
            StopCoroutine(scrollCoroutine);
        }

        scrollCoroutine = StartCoroutine(BackgroundScrollCoroutine());
    }

    private IEnumerator BackgroundScrollCoroutine()
    {
        Vector3 scrollVec = new Vector3(0, scrollSpeed,0);
        while (true)
        {
            for (int i = 0; i < backgroundImages.Length; i++) // 배경화면 아래로 스크롤
            {
                backgroundImages[i].position -= scrollVec * Time.deltaTime;
            }
            yield return null;
        }
    }
}

이렇게 작성한 스크립트를 BackGround 오브젝트에 붙이고 캐싱한다.

 

 

OnTriggerExit2D를 이용하여 위치를 최신화시켜 줄 거기 때문에 스크롤할 오브젝트들에게 붙일 Background Move Trigger 스크립트를 작성한다.

using UnityEngine;

public class BackgroundMoveTrigger : MonoBehaviour
{
    private Vector3 movementVec;

    private void Awake()
    {
        movementVec = new Vector3(transform.position.x, 20.2f, 0f); // 최신화할 위치 입력
    }

    private void OnTriggerExit2D(Collider2D other)
    {
        if (other.CompareTag("MainCamera"))
        {
            transform.position = movementVec;
        }
    }
}

스크롤할 오브젝트들에게 해당 스크립트를 붙이고 RigidBody2D (GravityScale = 0)와 BoxCollider2D (isTrigger 체크)를 추가한다.

 

그리고 메인카메라에 BoxCollider2D (is Trigger 체크)를 붙히고 배경 이미지 하나 크기만큼 조절을 해주고 테스트해본다.

---

 

최신화할 때 좌표를 임의로 지정해주는 방식이 아닌 가장 맨 위에 있는 배경 이미지의 위치 정보를 받아와서 최신화하는 방법을 사용했다면 혹시나 일어날 버그를 줄일 수 있을 거 같다.

 

혹시나 더 좋은 방법이나 고쳐야할 부분이 있다면 편하게 댓글 달아주세요 !