2024.04.17 TIL - 깃허브 특강, Canvas(Render Mode, UI 순서, 게임종료)

깃허브 특강

스파르타 게임개발 캠프에서 깃허브 특강을 해주셨는데요.

정말 알찬 강의여서 블로그에 정리해뒀습니다▼

2024.04.17 - [GitHub|Git] - 깃허브 특강 정리

 

저는 원래 깃허브 데스크탑을 사용하고 있었는데요.

브랜치를 만들고 협업하는 것까지는 했었는데, 더 많은 브랜치들을 만들고 기업에서는 어떻게 관리하는지까지 자세히 알게되었습니다.

그러다보니 제가 이때까지 깃플로우를 간단하게 사용하고 있다는 것을 느꼈고, 앞으로의 프로젝트때는 브랜치를 좀 더 늘려서 사용해보려 합니다.

지금은 깃허브 데스크탑을 사용하지만 추후에 Git 명령어도 익혀서 Git 역량을 좀 더 쌓아가고 싶습니다.

 

오늘 깃허브 특강 정리하느라 TIL을 3시간동안 썼네요..ㅎㅎ

그래도 한 번 기록해두면 또 볼 수 있으니 기록하는 재미가 있습니다~

 

Canvas

오늘 UI 작업을 하다가 캔버스에 대해 알게된 내용들을 정리해보겠습니다.

 

Render Mode

아래의 공식문서를 기반으로 작성해봤습니다▼

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

스크린 공간 - 오버레이(Screen Space - Overlay)

UI가 스크린의 크기에 맞게 배치된 모습

공식 문서에 적힌 설명▼

이 렌더 모드에서는 UI 요소가 화면에서 씬의 위에 렌더링됩니다. 스크린의 크기가 조절되거나 해상도가 변경되면 캔버스는 여기에 맞춰 자동으로 크기를 변경합니다.

 

공식 문서의 내용대로 2가지 시뮬레이터로 테스트해보니까 UI가 스크린의 크기에 맞춰서 자동으로 크기가 변경되거나 배치가 이루어지는 것을 확인할 수 있었습니다.

 

겪고 깨달은점▼

카메라가 바라보는 스크린 / Canvas

왼쪽 사진이 카메라를 더블클릭했을 때 뜨는 화면,

오른쪽 사진은 Canvas 오브젝트를 더블클릭했을 때 뜨는 화면입니다.

이것의 의미는 UI는 Canvas 영역에 그려지고, Canvas는 카메라가 바라보는 영역이 아닌 독립된 스크린을 가지고 있다는 것입니다.

 

스크린 공간 - 카메라(Screen Space - Camera)

Perspective로 카메라 설정 후 테스트

공식 문서에 적힌 설명▼

Screen Space - Overlay 와 유사 하지만 이 렌더링 모드에서는 Canvas가 지정된 Camera 앞에서 지정된 거리에 배치됩니다 . UI 요소는 이 카메라에 의해 렌더링됩니다. 즉, 카메라 설정이 UI 모양에 영향을 미칩니다. 카메라가 Perspective 로 설정된 경우 UI 요소는 원근감으로 렌더링되며 원근 왜곡 정도는 카메라 시야각 으로 제어할 수 있습니다 . 화면의 크기가 조정되거나 해상도가 변경되거나 카메라 절두체가 변경되면 캔버스도 이에 맞춰 자동으로 크기를 변경합니다.

 

겪고 깨달은점▼

카메라를 Perspective 로 설정한 후 테스트를 해봤습니다.

Overlay와 달리 카메라의 시야각에 영향을 받아서 카메라의 시야각을 극한으로 줄이니까 UI들이 깨져서 나왔습니다.

 

 

월드 공간(World Space)

Canvas의 Render Mode를 월드공간(World Space)로 바꿨을 때의 결과

공식 문서에 적힌 설명▼

이 렌더 모드에서는 캔버스는 씬에 있는 다른 오브젝트처럼 동작합니다. 캔버스의 크기는 사각 트랜스폼을 사용하여 수동으로 설정할 수 있으며 UI 요소는 3D 배치에 기반하여 씬의 다른 오브젝트의 앞 또는 뒤에 렌더링됩니다. 이 방식은 월드의 일부를 이루도록 의도된 UI에 유용합니다. 이 방식은 “서사적 인터페이스”라고도 합니다.

 

제가 이해한 것이 맞다면 캐릭터의 닉네임 같은 UI에 사용될 수 있는 모드인 것 같습니다.

 

겪고 깨달은점▼

왼쪽 사진의 하단을 보시면 카메라영역이 아주 작게 보이실 겁니다.

월드 공간에서 카메라가 바라보는 화면이 모바일 화면(Game)에 보이게 됩니다.

그래서 모바일 화면에는 아무런 UI가 보이지 않는 것이죠.

카메라가 비추고 있는 화면에 Canvas가 없기 때문입니다.

 

 

UI 배치 순서

공식 문서에 적힌 설명▼

캔버스에 있는 UI 요소는 계층 구조에 나타나는 것과 동일 순서로 그려집니다. 첫 번째 자식이 처음으로 그려지고, 두 번째 자식이 그 다음으로 그려지는 식입니다. 두 UI 요소가 겹쳐지면 나중에 그려지는 것이 먼저 그려진 것의 위에 나타나게 됩니다.

어떤 요소가 다른 요소의 위에 겹쳐지는지 여부를 변경하고 싶으면 간단히 드래그하여 계층 구조에서 요소의 순서를 변경하면 됩니다. 이 순서는 Transform 컴포넌트에서 SetAsFirstSibling, SetAsLastSibling, SetSiblingIndex 메서드를 사용하여 스크립팅을 통해 제어할 수도 있습니다.

 

겪고 깨달은점▼

StartScene에서 게임의 인트로 화면과 스테이지 화면을 모두 처리하고 싶었습니다.

그래서 인트로 화면 속 Start 버튼을 누르면 스테이지 화면이 나오며, 인트로 화면은 가려지게 설정했습니다.

 

아래의 사진에서 Stage 오브젝트를 제외한 나머지 UI들은 인트로 화면의 요소들 입니다.

이렇게 Stage 화면을 다른 UI들보다 맨 위에 두게 되면

이렇게 인트로 화면보다 뒤에 위치하게 됩니다.

 

이번엔 Stage를 다른 UI들보다 계층을 아래에 위치하게 되면

이렇게 모든 UI들을 가리고 스테이지 화면만이 앞에 나오게 됩니다.

 

 

 

게임종료를 에디터와 애플리케이션 모두 작동되게 하기(Quit 버튼)

Application.Quit();

위의 코드를 작성하면 게임종료가 됩니다.

하지만 이 코드는 스마트폰에서의 종료방식입니다.

 

저는 테스트를 해보기 위해 에디터상에서 작업을 했는데 종료 버튼을 테스트하고 싶어도 애플리케이션이 아니라서 종료가 안되더라구요. 그래서 종료버튼을 누르면 에디터상에서도 종료되도록 구현해주어야 했습니다.

 

    public void OnClickQuit()
    {
#if UNITY_EDITOR
        UnityEditor.EditorApplication.isPlaying = false;
#else
        Application.Quit();
#endif
    }

위와 같이 코드를 작성하시면 에디터상에서의 종료, 애플리케이션상에서의 종료 모두 작동됩니다.