유니티 빌드 화면 크기 - yuniti bildeu hwamyeon keugi

안녕하세요.

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

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

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

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

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

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

안녕하세요 극꼼입니다!

지난번에 레터박스를 이용해 디폴트 해상도에서 벗어나면 남는 부분을 까맣게 처리했는데요, 

https://geukggom.tistory.com/104

[Unity] 해상도에 따른 화면 비율 유지(feat. 레터박스(Letter box))

안녕하세요 극꼼입니다. 오늘은 해상도가 달라져도 화면 비율을 유지할 수 있는 래터박스를 만들어보도록 하겠습니다. 저는 16:10 비율로 만든 후, 다른 비율의 해상도일 경우 남은 빈 공간을 검

geukggom.tistory.com

이번 포스팅에서는 캔버스 내에서 배경이 되는 UI가 화면 빈 공간에 맞춰 크기가 달라지게 하는 방법에 대해 다뤄보겠습니다.

아래는 예시)

UI Canvas의 인스펙터창에는 Canvas Scaler라는 컴포넌트가 있습니다. 

여기서 UI Scale Mode를 'Scale With Screen Size'로 설정해줍니다.

해상도가 바뀌어도 화면 크기에 맞춰 UI 크기가 바뀌도록 해줍니다.

Screen Match Mode는 'Match Width Or Height'로 설정해줍니다. 디폴트 해상도(Reference Resolution) 비율보다 가로 또는 세로비율이 더 커질 경우 어디를 기준으로 둘건지를 정해줍니다. 

Width쪽으로 Match를 옮길 경우, 화면에 가로폭이 모두 보이는 방향으로 UI크기를 조절해주므로

이렇게 세로방향에 빈 공간이 생기게 됩니다.

반대로, Height로 설정할 경우, 화면에 세로폭이 모두 보이는 방향으로 UI 크기를 조절해주므로

위와 같이 가로에 공간이 남게 됩니다. 

이렇게 빈 공간이 생기지 않게 그때그때 Match값이 달라지도록 해줄겁니다.

* 그 전에, 배경 외의 UI는 

Rect Transform 컴포넌트에서 Anchor Preset을 미리 설정해줘야 화면 밖으로 밀려나지 않습니다.

코드는 간단합니다.

//Default 해상도 비율
float fixedAspectRatio = 9f / 16f; 

//현재 해상도의 비율
float currentAspectRatio = (float)Screen.width / (float)Screen.height;

//현재 해상도 가로 비율이 더 길 경우
if (currentAspectRatio > fixedAspectRatio) thisCanvas.matchWidthOrHeight = 0;       
//현재 해상도의 세로 비율이 더 길 경우
else if (currentAspectRatio < fixedAspectRatio) thisCanvas.matchWidthOrHeight = 1;

배경 UI의 해상도 비율보다 현재 해상도 비율의 가로 비율이 더 길 경우 Match값을 0으로,

세로 비율이 더 길 경우 Match값을 1로 설정해줍니다. 

코드를 적용하면 포스팅 처음에 올린 예시들처럼 배경 UI의 크기가 조절됩니다.