기본 인터페이스에 대한 이해와 간단한 예제 구현을 통해 Unity에서의 HUD를 구현해보자
Screen Space - Overlay
개발 씬에서 해상도를 맞추고, 오브젝트를 끌어다 놓으며 작업을 한다. 그 화면의 크기가 캔버스의 크기와 크게 차이가 나는데도 막상 실행시키면 본래 작업하던 화면위에 캔버스 ui가 띄워지곤 한다.
기본적인 부분이니 이해 못한 상태로 암튼 되니 개발하지 말자
- 캔버스 컴포넌트를 보면
Render mode가 있다. - 기본 설정인
Screen Space - Overlay는 카메라가 어디있든 보이는 디스플레이 위에 캔버스가 자동으로 얹혀진다는 뜻이다.
- 그렇기 때문에 아래와 같이 캔버스의 크기가 기존에 상정했던 카메라 뷰와 차이가 매우 많이 나더라도 런타임엔 해상도 그대로 카메라 위에 얹혀지게 되는 것이다.
Canvas Scaler (for 반응형디자인)
캔버스 스케일러 - Unity 매뉴얼 <공홈 메뉴얼>
- 여기서 Scale With Screen Size로 설정하면 해상도에 따라 유동적으로 변하는 오브젝트 크기를 유지 시켜줄 수 있다.
Scale With Screen Size 프롬프트 세부 설정
-
Reference Resolution : 기준이 되는 해상도를 기입한다.
-
Match : 크기 유지에 참고하는 정렬기준이다.
가로뷰 게임일 경우 height 를 1로 설정하면 조정이 자연스럽고
세로뷰 게임일 경우 width를 1로 맞추면 좋다.
위 골드메탈님의 영상에서는
new text라는 텍스트 하나를 띄우는 것이고 중앙 정렬을 해야해서 0.5에 맞춘 것 같다.
이 canvas scaler와 이전 포스팅에서 설명한 stretch를 활용하면 기기별 해상도에 따라 ui가 적절히 적용되는 반응형 디자인을 할 수 있다.
WorldToScreenPoint
월드 상의 오브젝트 위치를 스크린 좌표로 변환해주는 함수
public Vector3 WorldToScreenPoint(Vector3 position)
스크린, 즉 캔버스 상에서의 위치정보는 RectTransform이기 때문에
HUD오브젝트가 Transform상의 월드 오브젝트와의 상호작용이 되려면 컨버팅 작업이 필요하다!
- 위와 같이 움직이는 캐릭터를 따라다니는 hud 체력바를 캔버스상에 띄우고자 하면..
RectTransform rect;
void Awake()
{
rect = GetComponent<RectTransform>();
}
void FixedUpdate()
{
rect.position = Camera.main.WorldToScreenPoint(GameManager.instance.player.transform.position);
}이렇게 기존 Transform 변수를 RectTransform으로 변환해서 사용하면 된다.
참고로 Camera.main 에 속해있는 함수이다.
RectTransform -> Transform
참고 레퍼런스
https://youtu.be/ip0xffLSWlk?si=VXfy-hnQjaMLbER_
예제 관련 이미지를 참고하였습니다.
