내일배움캠프 26일차 TIL "UI에서의 Anchor"

 

 

UI는 게임을 구성하는데 있어 빠질 수 없는 요소 중 하나이다.

마땅한 UI없이도 게임이 성립할 수는 있겠지만, UI가 있기에 사용자는 게임의 정보를 직관적으로 알 수 있고, 상호작용할 수 있게 된다.

 

 

우선 약식으로 다음과 같은 UI들을 구성했다.

 

 

상단바와 하단바, 그리고 게임 중간에 뜰 팝업창을 묘사했다.

 

그러나 UI를 생성만 하고 다른 작업을 하지 않는다면, 해상도가 변경 되었을 때 문제가 발생한다.

 

 

해상도를 1920x1080에서 760x1280으로 변경하니 UI의 표기가 의도하지 않게 변했다.

이 현상 자체는 Canvas Scaler에서 수정할 수 있다.

 

 

UI scale mode를 Scale With Screen Size로 변경하고, 제작할 게임의 비율을 입력하면, 해상도가 바뀌더라도 UI의 비율이 그대로 유지된다.

해상 설정을 적용하고, 760x1280 해상도를 적용하면 다음과 같이 표시된다.

 

 

비율은 유지가 되지만, 그래도 표시에 이상한 점이 존재한다. 

나는 상단바와 하단바를 만들었는데, 상단과 하단이 아닌 중앙에 위치하고 있다.

 

그런 경우에는 해당 UI의 Anchor를 수정하여 해결할 수 있다.

 

 

Scene창에서 보이는 x자 모양의 기호가 앵카를 표현하는 것이다. 

x의 각 다리가 해당 UI의 꼭지점에 대응된다.

앵카는 영어로 닻을 의미하는데, 여기서는 해당 UI가 캔버스 어디에 앵카처럼 박혀 있는지를 의미한다.

기본적으로 앵카값은 캔버스 정중앙에 위치하여 있다.

 

 

 

이 앵카 값을 변경하여 해상도가 변경 되어도, 해당 UI가 특정 위치에 위치하도록 할 수 있다.

 

Top 의 앵카를 Min(0,1) Max(1,1), Bot 의 앵카를 Min(0,0) Max(1,0)로 변경하고 다시 760x1280 해상도를 적용하면 다음과 같이 표시된다.

 

 

Top과 Bot이 의도한대로 상단과 하단에 위치하는 모습을 볼 수 있다.

다소 얇아진 느낌이 든다면, 앵카를 다시 Top을 Min(0,0.9) Max(1,1), Bot을 Min(0,0) Max(1,0.1) 로 바꾸면 두께도 유지할 수 있다.

 

 

760x1280가 아닌 다른 해상도를 적용해도 문제 없는 모습을 볼 수 있다.