유니티 스크롤되는 배경 만들기

안녕하세요 이번에는 유니티에서 스크롤 되는 배경을 만들어 보겠습니다.

다른 글들은 그냥 방법만 알려주고 추가적인 설명은 없는데, 저는 좀 더 자세하게 알아보겠습니다.

 

스크롤 되는 배경을 만드는 방법은 크게 3가지가 있습니다.

---

첫번째로 가장 쉬운 방법은 엄청긴 배경을 만들어놓고, 카메라가 플레이어를 따라 움직이거나 어느 방향으로 움직이면 당연히 배경이 움직이게 됩니다. 하지만 이 방법은 배경이 유한하다는 큰 한계가 있기때문에 완전 작은 게임이 아니고서는 우리가 원하는 방법이 아닙니다.

---

두번째 방법은 배경을 일정한 속도로 이동시킨뒤 카메라로부터 일정 거리로 부터 멀어지면 위치를 초기화해 화면이 계속 반복되게 만드는 방법입니다.

예제를 통해서 보여드리겠습니다.

배경으로 사용할 두 이미지 background와 Sun을 추가해보았습니다.

둘다 같은 사이즈의 배경이 없는 PNG파일입니다.

... 진짜 대충 그렸습니다. 배경으로 사용할 두 파일을 씬 위에 배치해 봅시다.

배경이 초기화되고 생성될 위치인 빈 GameObject를 두 개 생성해서 적당한 위치에 놓아줍시다.

그리고 C# 코드를 만들어서 오브젝트에 넣어줍시다.

using UnityEngine;

public class BackGround : MonoBehaviour
{
    public Transform Left;
    public Transform Right;
    public float speed = .1f;
    

    // Update is called once per frame
    void Update()
    {
        transform.position = new Vector2(transform.position.x - speed, transform.position.y);

        if(transform.position.x < Left.position.x)
        {
            transform.position = new Vector2(Right.position.x,transform.position.y);
        }


    }
}

 

초기화 위치인 Left와 Right, 배경이 움직이는 속도 변수를 만들어줍시다.

그리고 Update에서는 일정한 속도로 왼쪽으로 움직이는 식과 배경의 x좌표와 기준점 Left의 x좌표를 비교해 배경이 기준점을 넘어가면, x좌표를 Right기준점으로 바꾸는 조건문을 두었습니다.

우리는 2가지 배경을 사용했는데 둘의 속도를 인스펙터에서 바꾸면 태양 같은 천천히 움직이는 배경은 좀더 자연스럽게 보일 수 있습니다.

---

 

 

세번째 방법은 간단하게 사용할 수 있고 빠르게 만들 수 있어서 추천드립니다. 이 방법을 쉽게 설명 드리자면 완전 옛날 만화 영화 만드는 기법처럼 배경을 컨베이어 벨트처럼 만들어 놓고, 계속 돌려 반복되게 만드는 방법입니다. 이렇게만 설명하면 이상하니 같이 만들어보면서 설명하겠습니다.

아까는 스프라이트를 바로 끌고와 오브젝트로 만들었다면 이번에는 새로운 Material을 만들어야합니다. 

Material같은 경우에는 말그대로 렌더링할때 그 물체의 재질을 다르게 만들어 추가적인 효과를 줍니다. 3D같은 경우에는 많이 사용되지만 2D같은 경우에는 아직 어떻게 사용하면 좋은지 아직은 잘 모르겠습니다. 나중에 추가적으로 조사해보겠습니다.

 

일단 Create > Material로 새 Material을 만들고 Shader를 particles/alpha blended로 바꿔 줍시다.

이렇게 바꾸면 밑에 기본 설정과 달리 Tiling과 Offset이 나타납니다. 우리가 움직이는 배경을 만들기 위해서 가장 중요한것이 이 Offset입니다. 여기서 오프셋이 뭐냐 찾아보니,  동일 오브젝트 안에서 오브젝트 처음부터 주어진 요소나 지점까지의 변위차를 나타내는 정수형이라고 하는데.... 쉽게 말하면 기준값과 더해진 값의 편차라고 생각하면 될 듯 합니다. 이 편차를 증가시키면 어떻게 되는지 스크립팅을 통해 알아봅시다.

먼저 배경을 배치할 판인 3D물체인 Quad를 하나 생성해줍시다. 그리고 그 쿼드의 Material을 우리가 만든 Material로 적용시켜 줍시다. 그러면 우리가 만든 쿼드가 배경으로 변할 겁니다.

인제 이 배경을 움직이게 만드는 스크립트를 작성해봅시다.

using UnityEngine;

public class BackGroundScroll : MonoBehaviour
{

    public float scrollspeed = 0.2f;
    Material myMaterial;

    private void Start()
    {
        myMaterial = GetComponent<Renderer>().material;
    }
    // Update is called once per frame
    void Update()
    {
        float newOffSetX = myMaterial.mainTextureOffset.x + scrollspeed * Time.deltaTime;
        Vector2 newOffset = new Vector2(newOffSetX, 0);

        myMaterial.mainTextureOffset = newOffset;
    }
}

여기서 봐야 할 부분은 크게 2가지 입니다.

Material 형식의 myMaterial에 GetComponent로 쿼드에 적용된 렌더러에서 메터리얼을 가져오고, Update부분에서 newOffsetX라는 실수형 변수에 우리가 받아온 myMaterial 즉 쿼드의 메터리얼에서 mainTextureOffset의 X값에 계속 일정한 값을 추가해 저장합니다. mainTextureOffset은 우리가 사용중인 메인 텍스쳐의 텍스쳐 오프셋을 가져옵니다.

계속 증가하는 이 값을 mainTextureOffset에 저장하면, 값이 계속 증가하고 우리 Quad의 오프셋이 증가해 배경이 움직이게 됩니다!!

저도 자세한 작동 원리는 찾아보기가 힘들었습니다. 그래도 대강 오프셋 값을 조절해 배경을 움직인다는것은 이해했으니 이것에 만족하고 넘어갑시다.. ;;

 

추가적으로 질문있거나 틀린부분있으면 댓글로 남겨주세요!!