참고영상 : https://www.youtube.com/watch?v=uQZFawccnNg
※ 구현 목표
서로 다른 모바일 해상도에 화면 고정 방식으로 대응한다.
다른 해상도에서는 검은 레터박스 여백으로 9:20 비율을 맞춰준다.
1. UI 캔버스 설정
참고 : https://docs.unity3d.com/kr/2020.3/Manual/script-CanvasScaler.html
캔버스 스케일러 - Unity 매뉴얼
캔버스 스케일러(Canvas Scaler) 컴포넌트는 캔버스 내 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어하는 데 사용됩니다. 스케일은 글꼴 크기와 이미지 경계 등 캔버스 아래의 모든 요소에 영향을
docs.unity3d.com
1) UI Canvas Scaler
UI의 Canvas Scaler 컴포넌트에서는 UI 요소의 포지션과 크기 지정을 3가지 모드로 설정 가능하다.
① Constant Pixel Size (고정픽셀크기)
기본 디폴트 값이며, 해상도와 상관없이 고정된 픽셀 크기로 UI요소를 그린다.
해상도가 높은 기기를 사용하면 의도와 다르게 엄청나게 작은 크기로 UI가 그려지기 때문에 권장하지 않는 모드이다.
② Scale With Screen Size (화면 크기에 따른 스케일)
화면 크기에 따라 UI요소가 그려진다.
해상도가 달라지더라도 해당 기기 크기에 대응하여 UI가 커지고 작아지므로 유니티 툴에서 그린 UI와 동일한 비율로 나온다.
주로 해당 모드로 작성한다.
③ Constant Physical Size (고정 물리적 크기)
UI 요소의 포지션과 크기가 물리적 단위로 지정된다.
기기의 크기를 정확히 알고 입력해두어야 의도에 맞는 UI 배치가 되기 때문에 특정 기기에서만 작동하는 게임 개발시에만 사용할 듯 하다.
2) Screen Match Mode
현재 해상도가 Reference Resolution (참조 해상도)와 맞지 않는 경우 처리 방식 모드 선택이다.
① Match Width or Height
비율이 맞지 않는 경우 Width와 Height 중 어느곳을 기준으로 Match 할 지 지정한다.
중간 값도 가능하다.
※ Match Width or Height의 1, 0 값과 Expand와 Shrink이 비슷하게 보일 수 있으나 Match 방식의 경우 무조건 Width, Height에 맞추게 되므로 해상도에 따라 짤리거나 여백을 만드는 것을 지정할 수 없다.
② Expand
캔버스를 확장하여 여백을 만드는 식으로 비율을 맞춘다.
(이번에 구현할 것은 잘리지 않는 고정 해상도가 목표이기 때문에 해당 모드로 설정해준다.)
③ Shrink
캔버스를 잘라 비율을 맞춘다. (UI가 해상도에 따라 잘릴 수 있으니 주의)
2. 카메라 비율을 캔버스에 맞추기
참고 : https://docs.unity3d.com/kr/2018.4/Manual/class-Camera.html
카메라 - Unity 매뉴얼
카메라 는 월드를 캡처하여 플레이어에게 보여주는 장치입니다. 카메라를 커스터마이즈 및 조정하여 게임의 프레젠테이션을 독창적으로 만들 수 있습니다. 하나의 씬에 카메라를 원하는 만큼
docs.unity3d.com
1) 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// 해상도 고정 카메라 스크립트
public class CameraResolution : MonoBehaviour
{
void Start()
{
Camera camera = GetComponent<Camera>();
Rect rect = camera.rect;
float scaleheight = ((float)Screen.width / Screen.height) / ((float)9 / 20);
float scalewidth = 1f / scaleheight;
// 위 아래 공백 생성 (휴대폰이 날씬한 경우)
if (scaleheight < 1)
{
rect.height = scaleheight;
rect.y = (1f - scaleheight) / 2f;
}
// 좌 우 공백 생성 (휴대폰이 뚱뚱한 경우)
else
{
rect.width = scalewidth;
rect.x = (1f - scalewidth) / 2f;
}
camera.rect = rect;
}
void OnPreCull() => GL.Clear(true, true, Color.black);
}
|
cs |
2) 해설
Camera Rect는 화면상 카메라의 출력 값을 설정한다.
X : 카메라가 시작될 수평 시작점
Y : 카메라가 시작될 수직 시작점
W : 화면상 카메라의 출력 너비
H : 화면상 카메라의 출력 높이
공백을 만들어 화면 비율을 맞출 것이기 때문에
해상도에 따라 시작 점 위치를 변경하여 대응한다.
코드 세부 설명은 코드 주석을 봐도 이해가 될 것이니 간단히 요약만 하고 넘어가도록 한다.
휴대폰이 얇은 경우 (주로 최신형일 수록 점점 더 얇고 길어진다) 기본 해상도 비율을 채우고 상하 부분이 남는데 이곳을 여백으로 채운다.
출력 높이를 줄이고 수직 시작점을 올려주면 된다.
휴대폰이 두꺼운 경우 (주로 구형일 수록 두껍고 짧다) 기본 해상도 비율을 채우고 좌우 부분이 남는데 이곳을 여백으로 채운다
출력 너비를 줄이고 수평 시작점을 높이면 된다.
※ 주의할 점
해당 방식은 다른 해상도 대응 UI 제작 방식인 앵커(Anchors)와 같이 사용하면 의도와 다른 결과가 나올 가능성이 높다.
직접 Pos를 설정해주는 것을 추천한다.
'유니티 게임 개발 > 유용한 기술' 카테고리의 다른 글
| [유니티] 캐릭터 fbx 파일 적용하기 (0) | 2023.07.10 |
|---|---|
| [유니티] 터레인 (Terrain) 사용법 (1) | 2022.12.16 |
| [유니티] TextMeshPro 한글 폰트 에셋 만들기 (0) | 2022.12.08 |
| [유니티] 2D 맵 쉽게 만들기 (Tilemap-RuleTile) (0) | 2022.12.02 |