[Unity][2D] UI 배치를 위한 Canvas 알아보기

카메라를 Zoom in/out 했을 때 UI는 움직이지 않는다.

그걸 Unity에서는 어떻게 구현해야하는지 공부하는 시간을 가졌다.

 

(▼) Hierarchy에서 오른쪽 버튼을 누르면 추가할 수 있는 많은 것들이 있는데, UI에 있는 것들을 클릭하면 자동으로 Canvas가 생성된다. 

(▼) UI > Image를 눌러주고 Source를 넣어준다. (캡츠루라니!)

(▼) Canvas의 inspector를 확인해서 Render Mode를 World Space > Screen Space - Camera (Overlay도 되는 듯)로 바꿔주었다. 그러고 Scene에서 UI 크기를 대충 맞추어 준다.

 

(▼) 카메라에서 Size를 변경시켜주면 UI를 제외하고 Zoom in/out이 된다.

 

(▼) 여기서 Maximize on Play를 누르고 확인했을 때 이런식으로 UI가 화면을 채우지 못한다.

(▼) 이를 해결하기 위해 Canvas Scaler에서 UI Scale Mode를 Scale With Screen Size로 바꾸어 주었고, Scene에서 크기를 조금 조절해주었다.

단점은 Invalid editor window Unity Editor.FallbackEditorWindow라는 에러가 생긴다.

(▼) 구글링했을 때는 Window>Layouts>Revert Factor Settings를 누르라는데 Failed to Destroy 어쩌구하면서 빨간 글씨가 뜬다. 무시하고 재생했을 때는 괜찮은데 다음에 또 문제가 생길지도 모르겠다.?

(▼) 저번에 그리드를 기준으로 3개가 연달아서 하얀 칸으로 둔 부분의 좌표가 항상 일정하게 나오는가? 궁금했는데 이렇게 했을 때 동일한 칸은 동일하게 잘 나옴을 확인했다.

 

곰부 시간

Canvas의 Rendor Mode (1번 사이트 참조)

1) Screen Space-Overlay : 렌더링 된 UI요소를 화면에 배치

2) Screen Space-Camera : Overlay와 비슷하지만 Canvas가 Camera의 앞에 배치되서 카메라가 줌인 줌아웃을 해도 Canvas는 알아서 일치하도록 크기가 변경된다.

3) World Space : 다른 오브젝트 처럼 박동시킨다. 세계 속의 인터페이스로 써봐라.

 

Camera의 Projection

1) Perspective : 카메라의 원근감을 적용해서 오브젝트를 렌더링 한다.

2) Orthographic : 카메라가 원근감 없이 오브젝트를 균일하게 렌더링 한다.

나는 2D를 다루니 Orthographic을 그냥 쓰면 될거 같다.

https://dooding.tistory.com/10 관련해서 설명이 쏙쏙 들어오는 블로그

[Unity] 카메라 Perspective와 Orthographic 모드 비교

================================== 참고 사이트 ==================================

https://docs.unity3d.com/kr/530/Manual/UICanvas.html

유니티 - 매뉴얼: 캔버스

 

https://answers.unity.com/questions/1137110/invalid-editor-window-unityeditorfallbackeditorwin.html

Invalid editor window UnityEditor.FallbackEditorWindow UnityEditor.EditorApplicationLayout:SetPlaymodeLayout() - Unity Answers