[ Unity2D ] 방치형 게임 - Background 설정

 

 

SJCE 스터디에서 진행하는 방치형 게임 만들기의 배경은 3개의 이미지가 반복해서 등장하는 방식으로 구현할 것이다. 

이번 주차에 배운 개념에 관한 글은 아래에서 확인할 수 있다.

2025.04.24 - [Study] - [ SJCE 스터디 / 2주차 ] 유니티 기초 (라이프 사이클, State Machine , 배경 설정, 델타 타임, Enum) 와 DB

[ SJCE 스터디 / 2주차 ] 유니티 기초 (라이프 사이클, State Machine , 배경 설정, 델타 타임, Enum) 와 DB

 

 

 

 

 

본격적인 구현에 앞서, 유니티의 화면 움직이기 단축키는 Q, 오브젝트 이동시키기 단축키는 W다.

 

 

 

 

---

 

 

 

Step 1. 프로젝트 폴더에 배경 이미지 넣기

우선, 구글에서 도구 > 사용권한 > 크리에이티브 커먼즈 설정으로 찾은 라이선스가 허락된 이미지를 3개 골라준다.

• Unity Hub 프로젝트 우클릭 > Reveal in finder > Asset 폴더 > Resources 폴더 생성 > Backgrounds 폴더 생성 > 이미지 삽입

 

 

 

Step 2. Image 컴포넌트 생성

• Hierarchy 창에서 우클릭 > UI > Image 선택
• Canvas와 EventSystem이 자동으로 생성됨
• Image 오브젝트 선택 후 Inspector 창에서 Source Image 클릭 > Resources > Backgrounds 폴더 내 이미지 선택
• 해당 방식으로 3개의 이미지 컴포넌트 생성

 

 

 

Step 3. Game 뷰 화면 비율 조정

Game > Free Aspect > 적정 비율로 선택 (720x1280 으로 맞추겠음)

💡 Scene 뷰는 편집용, Game 뷰는 실제 플레이어가 보게 될 화면을 시뮬레이션해 주는 창

 

 

 

 

Step 4. 이미지 크기(W×H) 및 위치 Position (X, Y, Z) 설정

이미지 오브젝트를 클릭하고 Inspector 창에서 설정해준다.

• 이미지의 Width = 화면의 가로 길이(720)
• 위치는 W 키를 눌러 조절해주고 Pos Z는 0으로 되어 있는지 확인한다 (2D 게임임)

• bg1의 Pos X가 360이면, bg2의 Pos X는 1080(360+이미지 가로 길이720) 이런 식으로 맞춰준다.

 

 

 

 

 

Step 5. Background Scroll 로직 구현

Background Scroll 오브젝트 생성 > Script 생성 후 연결 > Element에 bg1, bg2, bg3 오브젝트 추가한다.

• Assets > Scripts > moveBackground.cs (값은 프로젝트마다 다르니 수정해야 함)

using UnityEngine;
using UnityEngine.UI;

public class moveBackground : MonoBehaviour
{
    public float scrollSpeed = 700f;
    public Image[] backgroundSprite;
    private float[] backgroundOffset;

    void Start()
    {
        backgroundOffset = new float[backgroundSprite.Length];
        for (int i = 0; i < backgroundSprite.Length; i++)
            backgroundOffset[i] = backgroundSprite[i].transform.localPosition.x;
    }

    void Update()
    {
        for (int i = 0; i < backgroundSprite.Length; i++)
        {
            backgroundOffset[i] -= Time.deltaTime * scrollSpeed;
            backgroundSprite[i].transform.localPosition = new Vector3(backgroundOffset[i], 0);

            if (backgroundSprite[i].transform.localPosition.x <= -720)
            {
                backgroundSprite[i].transform.localPosition = new Vector3(1440, 0);
                backgroundOffset[i] = 1440;
            }
        }
    }

    public void stopBackground() => scrollSpeed = 0f;
}

• 오브젝트에 script 연결 : 만든 script 파일을 오브젝트 inspector add component 부분으로 Drag&Drop

• Background Sprite 부분의 Element에 bg1,2,3 오브젝트 연결

 

 

 

이렇게 하면, 하단 처럼 배경이미지가 반복되어 나오면서 우리의 간단한 방치형 게임 배경 세팅이 완료됐다.

 

 

gif