유니티 오브젝트 해상도 - yuniti obeujegteu haesangdo

안녕하세요.

개발을 하다 보면 핸드폰마다 해상도가 달라서 곤란한 경우가 자주 있습니다.

지금 출시된 모든 휴대폰을 다 확인이 불가능하기 때문에 간단하게 해상도를 설정하는 방법에 대해 알아보도록 하겠습니다.

일단 현재 나와있는 폰들의 해상도를 알아보도록 하겠습니다.

구글에서 "휴대폰 해상도"라고 검색을 하면 휴대폰 해상도에 대한 정보들이 나와있는 것을 볼 수 있습니다.

그중에서 다음 사이트에 보면 잘 정리가 되어있습니다.

https://zetawiki.com/wiki/%EC%8A%A4%EB%A7%88%ED%8A%B8%ED%8F%B0_%ED%95%B4%EC%83%81%EB%8F%84,_%ED%99%94%EB%A9%B4%EB%B9%84%EC%9C%A8

스마트폰 해상도, 화면비율 - 제타위키

9:16 ★★★ 1440 × 2560(갤6, 갤7, 갤노4, 갤노5, G3, G4, G5, 픽셀XL)1080 × 1920(갤4, 갤5, 갤노3, 옵G프로, G2, 넥5, 아이폰6, 픽셀)

zetawiki.com

스마트폰은 16:9가 많이 있는 것을 확인해 볼 수 있어서 앱 개발 시 16:9를 기준으로 개발하는 것이 좋을 것 같습니다.

그러나 기타 해상도가 다른 휴대폰들은 화면에 UI가 이상한 곳으로 이동되는 현상이 발생할 수 있습니다.

유니티 에디터 상에서 해상 해상도를 설정하는 방법은 게임 탭에서 해당 해상도를 추가하는 방법입니다.

추가해서 해당 해상도로 설정을 하면 문제와 생긴 기기와 같은 화면을 볼 수 있습니다.

그리고, 기기 해상도를 완벽히 다 호환하기는 어렵지만 Canvas Object에서 "Canvas Scaler" Componect를 수정하면 됩니다.

잠시 설정에 대한 설명을 하면,

UI Scale Mode - 캔버스에 UI 요소들이 스케일링되는 방법을 결정하게 됩니다.

   Constant Pixel Size - 화면 크기에 관계없이 동일한 픽셀 크기를 유지합니다.

   Scale With Screen Size - 화면이 커질수록 UI 요소도 커집니다.

   Constant Physical Size - 화면 크기와 해상도에 관계없이 UI 요소가 동일한 물리적인 크기로 유지됩니다.

여기서 "Scale With Screen Size"를 설정해서 해상도에 맞춰서 기준 해상도를 Referance Resolution을 정한 후

"Match Widh Or Heght"로 해상도에 따라 스케일을 변경할 수 있습니다.

만약 위에 같이 X 2560, Y 1440으로 설정을 했다면 Match를 0.5로 했을 경우 그에 따라 전제 스케일이 변하게 되고,

만약 X가 변경되지 않게 하려면 Match를 0, Y이 변경이 되지 않게 하려면 Match를 1로 하면 된다.

세부 설정은 유니티 매뉴얼을 참조하시면 됩니다.

https://docs.unity3d.com/kr/current/Manual/script-CanvasScaler.html

캔버스 스케일러 - Unity 매뉴얼

캔버스 스케일러(Canvas Scaler) 컴포넌트는 캔버스 내 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어하는 데 사용됩니다. 스케일은 글꼴 크기와 이미지 경계 등 캔버스 아래의 모든 요소에 영향을 미칩니다.

docs.unity3d.com

✔ 유니티 해상도 고정

Unity Build Setting의 Resolution and Presentation 옵션에서 Fullscreen Mode가 있다. 

풀스린으로 빌드하고 실행한뒤 Alt + Enter를 누르면 창모드로 전환된다.

창모드 상태에서 종료하고 다시 실행하면 다시 창모드로 실행된다.

항상 풀스크린을 유지할수는 없는걸까?

또한 내 화면 비율은 16:9로 제작되었는데 16:11의 모니터 비율에서는 엉망이되어버린다.

그래서 프로그램을 실행할때 화면해상도를 코드로 제어를 할 수 있다.

다른 비율에서 실행되면 16:9로 실행하고 나머지 공간은 검은색으로 영역을 채운다.

아래는 해상도를 고정하고 풀스크린으로 만드는 간단한 예제 코드이다.

● 예제 코드

using UnityEngine;

public class Fixed : MonoBehaviour
{
    private void Start()
    {
        SetResolution(); 
    }
    
    /// <summary>
    /// 해상도 고정 함수
    /// </summary>
    public void SetResolution()
    {
        int setWidth = 1920; // 화면 너비
        int setHeight = 1080; // 화면 높이

        //해상도를 설정값에 따라 변경
        //3번째 파라미터는 풀스크린 모드를 설정 > true : 풀스크린, false : 창모드
        Screen.SetResolution(setWidth, setHeight, true);
    }
}

감사합니다.

이번 영상은 Ui 요소 및 디자인 시 다양한 화면 해상도 또는 비율에 대응하는 방법에 대해 알려주고 있습니다.

요약하자면 Unity Ui의 Rect Transform의 원리와 Anchor의역할을 하는지 알려드립니다.

Anchor (영단어의 뜻은 갈고리)는 화면의 특정 위치를 고정시켜줌으로서 화면비율에 따른 작업의 부담감을 대폭 줄여줍니다.

위의 사항외에도, Ui 요소 (이미지, 버튼 및 기타)의 늘림 (Stretch), 그리고 간단한 예제의 시연도 있으니, 많은 도움이 되리라 믿습니다.

설명은 영어이지만, 한국어 자막을 포함했으니 보시는데 어려움이 없어요. ,,ㅎㅅㅎ,,

유니티를 기준으로 빌드할 수 있는 플랫폼도 다양하고 플랫폼별 실행환경에도 셀 수 없을만큼 다양한 기기들이 존재합니다. 다행히 어느정도 규격이 되는 해상도들이 정해져있긴 하지만 사용자가 어떤 기기에서, 어떤 해상도에서 실행할지에 따라 각각 다른 해상도로 개발을 진행하는 것 또한 사실상 불가능에 가깝습니다. 그래서 어떤 기기, 어떤 해상도에서 실행되던 개발자가 원하는대로 사용자에게 보여질 수 있도록 하는 방법에 대해 알아보도록 하겠습니다.

Canvas를 생성하고 클릭해서 인스펙터에서 보면 기본으로 추가되어있는 'Canvas Scaler' 라는 컴포넌트가 있습니다. 이 컴포넌트는 Canvas 내의 UI 요소들의 스케일과 픽셀 밀도를 제어해주는 컴포넌트입니다. 컴포넌트의 자세한 기능들은 유니티 공식 레퍼런스 docs.unity3d.com/kr/2018.4/Manual/script-CanvasScaler.html 에서 확인하실 수 있습니다.

바로 이 컴포넌트를 이용해서 여러 해상도들에 대응할 수 있도록 만들어 줄겁니다.

Canvas Scaler설정에 앞서 먼저 Canvas 컴포넌트의 설정을 바꿔주도록 합시다.

Canvas 컴포넌트의 Rander Mode가 기본 설정으로 Screen Space - Overlay로 설정되어 있을텐데요 이 설정을 Screen Space - Camera 로 바꿔주고 Render Camera에 사용할 Camera 오브젝트를 링크시켜줍니다. 그러면 설정해준 캔버스는 링크된 카메라에만 렌더되어 보여집니다. 게임 개발을 하다보면 컷신이 나온다거나, 대사 창이 나온다거나, 타격/피격 수치가 화면상에 표시되어야 하는 등 다양한 요소들이 보여지도록 해주어야 하는데 이때 렌더되는 순서나 특정 요소만 렌더링 시켜 보여주어야 하는 경우가 생기는데 이때의 제어를 캔버스와 카메라를 다양하게 사용하면 보다 더 편하게 제어할 수 있게됩니다.

카메라도 설정해줍시다.

UI 요소들은 특별한 경우가 아니라면 항상 평면공간 2D에서 표현시키기 때문에 링크시킨 카메라 오브젝트에 Projection 값을 Orthographic으로 설정시켜줍니다. Size는 원하는대로 조절하셔도 상관없습니다만, 어차피 캔버스에서 기준이 되는 해상도를 잡아줄 것이기 때문에 하지않겠습니다.

다시 캔버스로 돌아와서 처음 언급했던 Canvas Scaler 옵션을 설정해주도록 합시다.

UI Scale Mode를 기준이 되는 해상도에 맞춰 재배치가 가능하도록 Scale With Screen Size로 바꿔주고 Reference Resolution에 원하는 기준 해상도를 잡아줍니다. 저는 가로 환경 FHD로 설정해주겠습니다. 마지막으로 Screen Match Mode가 Match Width Or Height로 설정되어 있는 상태에서 Match값을 1로 설정시켜줍니다. 만약 세로 환경으로 만드실 경우 0으로 설정해주시면 됩니다.

이제 기본적인 설정을 마쳤습니다. 이제 UI를 배치해봅시다.

저는 각 모서리들에 UI가 배치되도록 설정했습니다. 만약 이게 게임이라면 저는 사용자들에게 저 버튼들이 화면에서 저렇게 배치되어서 보였으면 좋겠네요. 실제로 사용자들에게도 저렇게 보여지는지 확인해보겠습니다.

일단 게임씬을 전체화면으로 확인해봤습니다. 모두 원하는 위치에 배치되어져 보이네요. 다만 신경쓰이는 부분이 있습니다. 바로 화면에 가득차게 보여지는게 아니고 좌우의 회색부분이 화면을 잘라서 보여줍니다. 그 이유는 제가 게임씬의 해상도를 FHD 1920x1080 (16:9)로 설정해두었기 때문입니다. 유니티 에디터의 상하단에 메뉴들 때문에 게임씬에 보여지는 화면은 위아래가 더 좁아졌기 때문에 그만큼 비율을 맞추기위해 좌우도 줄여서 보여지도록 만든겁니다. 저렇게 잘라서 보여지도록 만들어주는 영역을 레터박스라고 하는데 저는 저 부분이 없이 화면을 가득 메워서 보여줬으면 좋겠습니다.

그래서 이미지에 있는 부분을 클릭해주면 게임씬의 해상도를 설정해줄 수 있는데 이걸 비율과 상관없이 화면 전체에 그려지도록 Free Aspect로 설정해주겠습니다.

[여기서 중요한 점]

만약 애초에 게임씬의 해상도 설정을 Free Aspect로 두고 UI를 배치하시면 안됩니다. 반드시 작업 전에 기준이 되는 해상도, 비율로 설정해두고 작업하셔야 합니다. 만약 Free Aspect로 설정해두고 열심히 작업하시다가 나중에 깨달으시면 UI 오브젝트들을 다 다시 설정해야하는 불상사가 일어날 수 있습니다. 반드시 작업 전 기준 해상도를 설정해주세요.

비율과 상관없이 항상 화면에 가득차서 보여지도록 설정을 바꿔줬더니 좌우에 있던 레터박스 영역은 사라졌는데 제가 배치해두었던 UI들의 위치가 이상하네요. 좌우에 위치한 UI들은 항상 좌우의 가장 끝에 위치시키고 싶은데 말입니다.

그 이유는 바로 제가 처음에 UI 오브젝트들을 생성하고 배치할 때 단순히 PosX, Y 좌표값으로만 배치시켰기 때문입니다. 빨간색으로 박스쳐드린 부분을 보시면 오브젝트의 피벗이 가운데로 설정되어 있는것을 확인하실 수 있습니다. 즉, 해당 오브젝트의 PosX, Y 값은 부모 오브젝트(캔버스=화면)의 가운데에서의 값인겁니다. 상하좌우 모서리가 넓어지던 좁아지던 아무런 관계도 상관도 없는 설정인 셈이지요.

제가 의도하고자 했던 버튼들의 상하좌우 모서리에 위치시키는 배치를 하려면 위와 같이 설정시켜주어야 합니다.

설정하는 곳에 보시면 쓰여져 있습니다만, Shift키와 Alt키를 누르고 설정하는지에 따라 설정이 바뀝니다. 만약 피벗도, 위치도 좌측 상단에 배치시키고 싶으시다면 Shift키와 Alt키를 같이 누른 상태에서 프리셋을 클릭해주시면 간단하게 설정해줄 수 있습니다.

(단 설정은 원하는 배치에 맞춰 설정해주어야 합니다. 절대적인 설정이 아닙니다.)

피벗 설정을 다시 해주고 게임씬을 전체화면으로 만들어보면 이전과 동일하게 레터박스가 생성되고 각 위치에 보여집니다. 겉으로 봐선 아까와 아무런 차이가 없습니다.

하지만 비율과 상관없이 화면에 가득 채워지도록 Free Aspect 옵션으로 변경해주면, 이전과는 다르게 각 모서리에 자동으로 배치되는 모습을 보실 수 있습니다. 이는 가운데 피벗이 아니라 각 버튼 오브젝트들의 피벗 값이 캔버스의 모서리 끝으로 설정되어 배치되기 때문입니다.

이렇게 피벗을 이용하면 실행하는 해상도에 대응해서 자동으로 배치를 시킬 수 있습니다.

테스트로 보여드리기 위해 각 비율에 따라 자동으로 설정되어 보여지는 모습들입니다.

도움이 되셨으면 좋겠습니다.

감사합니다.