[Unity] 2D 무한 배경 구현하기

2D 게임을 개발할 때 배경을 자연스럽게 반복시키는 무한 배경이 필요할때가 있습니다.
이번 글에서는 다양한 방법으로 2D 무한 배경을 구현하는 방법을 소개하겠습니다. 크게 UI, Sprite, Quad를 이용한 방법으로 나누어 설명합니다.

 

UI를 이용한 뒷배경 처리 방법

이 방법은 배경 이미지를 직접 이동시켜 움직이는 것처럼 보이도록 처리하는 방식입니다. 하지만 이미지가 이동할 때, 빈 공간이 생기는 것을 방지하기 위해 추가 이미지를 생성하여 연결해야 합니다.

따라서 배경 이미지를 1개 더 복제하여 원본 이미지 옆에 붙이고, 두 이미지를 반복적으로 이동시켜 자연스러운 배경 스크롤 효과를 연출할 수 있습니다.

 

Hierarchy 구조는 다음과 같이 설정합니다. Group_Background 객체를 부모로 하고, 그 아래에 두 개의 배경 이미지 객체를 자식으로 배치합니다. 이때 부모 객체인 Group_Background를 스크립트를 통해 이동시켜 배경이 무한히 반복되는 효과를 구현합니다.

 

using UnityEngine;

public class RepeatBG_UI : MonoBehaviour
{
    // 배경 이동 속도 조절 (1~200 사이 값 설정 가능)
    [SerializeField][Range(1f, 200f)] float speed = 3f;

    // 배경이 반복될 구간의 값 (해상도 가로 길이)
    [SerializeField] float posValue;

    // 배경의 초기 위치
    Vector2 startPos;

    // 배경의 새로운 위치 계산용 변수
    float newPos;

    void Start()
    {
        startPos = transform.position; // 현재 오브젝트의 초기 위치 저장
    }

    void Update()
    {
        // Mathf.Repeat를 사용하여 posValue 값을 초과하지 않도록 반복적인 값 계산
        newPos = Mathf.Repeat(Time.time * speed, posValue);

        // 배경을 왼쪽으로 이동, 초기 위치에서 newPos만큼 이동시킴
        transform.position = startPos + Vector2.left * newPos;
    }
}

---

Sprite를 이용한 뒷배경 처리 방법

이 방법 또한 UI방법과 동일하게 객체가 직접 이동하며 움직이는 것처럼 보이기 때문에 똑같이 2개의 배경 이미지를 연결시켜 줍니다. 스크립트의 repeatDistance변수를 위해 이미지 객체에 직접 스크립트파일을 추가해줘야합니다.

using UnityEngine;

public class RepeatBG_Sprite : MonoBehaviour
{
    // 이동 속도 (1~200 사이에서 조절 가능)
    [SerializeField][Range(1f, 200f)] float speed = 3f;

    // 배경이 반복되는 거리 (Sprite 크기로 자동 계산)
    float repeatDistance;

    // 배경의 초기 위치
    Vector2 startPos;

    // 배경의 새로운 위치 계산용 변수
    float newPos;

    void Start()
    {
        // 현재 오브젝트의 초기 위치 저장
        startPos = transform.position;

        // SpriteRenderer를 사용해 배경 스프라이트의 가로 크기를 계산
        repeatDistance = GetComponent<SpriteRenderer>().bounds.size.x;
    }

    void Update()
    {
        // Mathf.Repeat를 사용해 반복적인 X축 이동 거리 계산
        newPos = Mathf.Repeat(Time.time * speed, repeatDistance);

        // 배경을 왼쪽으로 이동하며 초기 위치에서 newPos만큼 이동
        transform.position = startPos + Vector2.left * newPos;
    }
}

---

Quad를 이용한 뒷배경 처리 방법

3D 공간에서도 활용할 수 있으며, 3D와 2D를 혼합한 게임에 적합합니다.

 

구현 방법

1. Quad 생성 : Quad를 생성하고 배경 이미지를 텍스처로 할당합니다.

2. 이미지 설정 : 사용할 이미지의 Wrap Mode값을 Repeat으로 변경합니다.

2. Material 설정 : Universal Render Pipeline/Lit으로 설정, 사용할 이미지를 넣어줍니다. Tiling값을 알맞게 조절하여 자연스러운 이미지크기로 변경합니다.

 

3. 스크립트

using UnityEngine;

public class RepeatBG_Quad : MonoBehaviour
{
    // 배경 스크롤 속도 (0.1 ~ 10 사이에서 조절 가능)
    [SerializeField][Range(0.1f, 10f)] float scrollSpeed = 0.5f;

    // Quad의 Material을 저장할 변수
    private Material material;

    void Start()
    {
        // Renderer에서 Material 가져오기
        material = GetComponent<Renderer>().material;
    }

    void Update()
    {
        // X축 방향으로 스크롤 오프셋 계산
        Vector2 offset = new Vector2(scrollSpeed * Time.deltaTime, 0);

        // Material의 메인 텍스처 오프셋 값을 변경하여 스크롤 효과 적용
        material.mainTextureOffset += offset;
    }
}