[Unity] UI transition ( 화면 전환 )

게임의 UI가 전환될 때, 사용자에게 자연스러운 느낌을 주기 위한 여러가지 전환 방법이 존재한다.

여러 게임에서 상황에 따라 UI를 전환하는 방법을 정의함으로써 향후 게임 개발 시에 참고하고자 한다.

( 정해진 규칙이 정해지진 않았지만, 다른 게임에서 어떤 방식을 사용했는지 확인하기 위함 )

1. 전체 UI 화면에서 다른 전체 UI 화면으로 전환 시

: UI에 애니매이션 없이 즉시 화면이 바뀌는 경우

: 즉시 화면이 바뀌지만, UI 요소가 위에서 내려오거나 양 옆에서 나타나거나 하는 형태의 애니매이션이 존재하는 경우

( 이 경우 중요한 포인트가 되는 UI에만 애니매이션이 있는 경우가 많음 )

2. 전체 UI 화면에서 팝업 UI가 나오는 경우

: UI에 애니매이션이 없이 즉시 팝업이 나오는 경우

: 팝업 UI에 스케일, 알파 애니매이션이 존재하는 경우

: 팝업의 중요도에 따라 개별 애니매이션이 적용되는 경우

( 게임 보상 획득 팝업, 패키지 구매 팝업 등 )

3. 게임의 씬이 변경되는 경우 ( 로고 -> 타이틀, 타이틀 -> 게임, 메인 로비 -> 게임 진입 시 )

: 화면 전환의 시간이 오래 걸리는 경우 별도의 로딩 화면을 구현하여 처리되며, 프로그레스바가 존재

: 화면 전환 시간이 짧은 경우, 전체 화면을 검은색으로 덮고 중앙에 로딩 이미지를 띄움

 

위의 3가지 경우로 대부분의 화면 전환은 정의할 수 있으며, 여러 게임을 확인 했을 때 앞으로의 게임은 다음과 같은 방식을 사용하고자 한다.

1) 전체 화면의 UI 전환은 즉시 화면이 갱신되는 방식을 사용하되, 중요 정보를 담고 있는 부분에만 짧게 애니매이션을 줄 수 있도록 한다.

: 시스템적으로 전체화면은 별도의 UI 전환 처리를 하지는 않으며, 개별 UI 마다 별도의 애니매이션을 구현한다.

: 전체 화면이 즉시 갱신 되지 않는 경우, 사람에 따라 게임이 느려보이는 착각 및 답답함을 느낄 수 있다.

2) 팝업 UI는 기본적으로 스케일과 알파 애니매이션이 동작되도록 시스템으로 구현한다.

3) 게임 씬의 경우 전환 시간에 따라 케이스 별로 짧게 보여주는 전환 UI 또는 로딩 UI를 사용할 수 있도록한다.

: 시스템적으로 짧은 시간 보여주는 UI와 로딩 UI를 구현하여 전환 UI를 쉽게 구현할 수 있도록 한다. 

: 짧은 시간 보여주는 UI 전환은 영상 편집 기법에서 사용하는 방법을 사용할 수 있다.

ㄱ. dissolve

: 앞의 장면과 뒤의 장면이 겹치면서, 앞의 장면이 서서히 사라지는 형태

=> 게임에서는 전환될 UI와 없어질 UI를 동시에 띄우고, 없어질 UI에 알파값을 1 -> 0으로 변경하면서 0이되면 사라지게 하는 방식이라고 할 수 있다.

ㄴ. wipe

: 앞의 장면과 뒤의 장면이 겹쳐있는 상태에서, 앞의 장면이 특정 방향으로 지워지듯이 사라지는 형태

=>  게임에서는 전환될 UI와 없어질 UI를 동시에 띄우고, 없어질 UI에 uv를 조정하거나 애니매이션으로 사라지게 하는 방식이라고 할 수 있다

ㄷ. fade in/out

: 화면을 점차 어둡게 하거나 밝게하면서 새로운 장면으로 변경하는 형태

=> 게임에서는 화면이 점점 어두워지면서 완전히 어두워 지면 UI를 삭제하고, 새로운 UI를 띄운 상태에서 화면을 다시 밝게하는 방식이라고 할 수 있다.