[개발 일지] 4. 해상도 설정

0. 들어가기 전에

사람들마다 가지고 있는 기기의 해상도가 다르기 때문에 이에 대응할 방법이 필요하다.

 

솔직히 나는 UI 랑 해상도 공부할 때가 제일 하기 싫은 것같다.. 어렵고 알아야 하는 것도 많고 귀찮고 재미없다.. 하지만 해야지.. 

 

 

---

 

 

1. 해상도 설정

일단 게임 오브젝트로 캔버스를 하나 만든다. 이제 이 캔버스에 UI 를 추가하면 된다. 그 전에 먼저 해상도 설정을 해야 한다.

 

1.1 Canvas 설정

일단 Canvas 게임 오브젝트의 Canvas 컴포넌트 속 Render Mode 를 Screen Space - Camera 로 설정해준다. 이렇게 하면 캔버스 크기가 Camera 사이즈에 맞춰서 조정된다.

 

그 다음 Canvas Scaler 의 UI Scale Mode 를 Scale With Screen Size 로 설정해준다. Reference Resolution 은 X:1920, Y:1080 으로 설정해주고, Screen Match Mode 를 Expand 로 설정해준다.

 

1.2 CameraResolution 스크립트

이 코드를 Camera 게임 오브젝트에 부착하면 된다.

using UnityEngine;

public class CameraResolution : MonoBehaviour
{
    private int ScreenSizeX = 0;
    private int ScreenSizeY = 0;

    void Awake()
    {
        RescaleCamera();
    }

    void Start()
    {

    }

    void Update()
    {
        //RescaleCamera();
    }

    void OnPreCull()
    {
        if (Application.isEditor) return;

        RescaleCamera();
    }

    private void RescaleCamera()
    {
        if (Screen.width == ScreenSizeX && Screen.height == ScreenSizeY) return;

        float targetAspect = 16.0f / 9.0f;
        float windowAspect = (float)Screen.width / (float)Screen.height;
        float scaleHeight = windowAspect / targetAspect;
        Camera camera = GetComponent<Camera>();

        // Clear Flags와 Background Color 설정
        camera.clearFlags = CameraClearFlags.SolidColor; // Solid Color로 설정
        camera.backgroundColor = Color.black; // 배경색을 검정으로 설정

        if (scaleHeight < 1.0f)
        {
            Rect rect = camera.rect;
            rect.width = 1.0f;
            rect.height = scaleHeight;
            rect.x = 0;
            rect.y = (1.0f - scaleHeight) / 2.0f;
            camera.rect = rect;
        }
        else
        {
            float scaleWidth = 1.0f / scaleHeight;
            Rect rect = camera.rect;
            rect.width = scaleWidth;
            rect.height = 1.0f;
            rect.x = (1.0f - scaleWidth) / 2.0f;
            rect.y = 0;
            camera.rect = rect;
        }

        ScreenSizeX = Screen.width;
        ScreenSizeY = Screen.height;
    }
}

 

1.3 Camera 설정

기존 카메라에 Pixel Perfect Camera 를 부착했었는데 이를 부착하면 코드가 잘 반영이 안 되는 것 같아서 뺐다.

 

 

---

 

 

2. 결과물

 

 

해상도가 달라져도 버튼 UI 가 깨지거나 이상한 곳으로 가지 않고 제 위치에 잘 있는 모습을 확인할 수 있다. 겉에 파란색 배경을 검정색 배경으로 바꾸어 더 그럴듯하게 수정했다.

 

 

---

 

 

3. 참고 자료

[Unity] 화면 비율 고정하는 방법!

[Unity] 화면 비율 고정하는 방법!

PC 해상도에 관한 고찰

[Unity] 해상도에 따른 화면 비율 고정하기

[Unity] 해상도에 따른 화면 비율 고정하기

[Unity] 해상도 변경과 UI 배치

[Unity] 해상도 변경과 UI 배치

유니티 기초 강좌: 해상도 조절 및 Canvas Scaler - 라이브스마트

유니티 기초 강좌: 해상도 조절 및 Canvas Scaler - 라이브스마트

기술수련소 | 다양한 해상도에 맞게 자동 조절되는 UI 설정 방법. Scale With Screen Size 설정

다양한 해상도에 맞게 자동 조절되는 UI 설정 방법. Scale With Screen Size 설정