게임 분석을 해보자! 붕괴 스타레일 #4 UI구조 및 연출 - 메인 화면#1

 

https://cdn .tgdaily.co.kr/news/photo/202308/326715_98467_4223.png

 

 

생각보다 길었네요.

 

#3에서 메인화면에 도달할거라 예측했지만

 

로딩화면에 생각 외로 글 내용이 너무 길어졌던 것 같습니다.

 

이제부터 메인 화면의 UI를 씹고 뜯고 맛보고 즐길 예정입니다만,

 

정말 많은 UI들이 존재합니다.

 

그렇기 때문에 메인화면도 대략 3편으로 구성되지 않을까 싶습니다.

---

---

UI 종류

---

 

먼저 시작하기 앞서서 UI 종류에 대해서 알아보고자 합니다.

 

기본적으로 유니티에서 UI를 구현할 때 사용하는 Canvas에서 크게 2가지로 나뉩니다.

 

 

UI 종류 큰틀

 

 

1. Screen Space - Overlay 또는 Camera

 

기본적으로 우리가 보는 스크린에만 뜨는 UI라고 생각하시면 됩니다.

 

 

 

위 사진과 같이 HP, MP 등의 Status 정보나, 인벤토리, 캐릭터 스테이터스, 미니맵 등

 

게임을 플레이하면서 기본적으로 필요한 데이터의 정보 등을 나타냅니다.

 

특징은 3D 세계를 중점으로 두는 것이 아닌

 

카메라가 비추고 있는 스크린을 중점으로 나타낸다는 점입니다.

 

 

 

2. World Space

단어 뜻대로 실질적 3D로 구성된 World 내에 하나의 오브젝트로 존재하는 UI입니다.

 

World Space 시 Rect Transform의 변화

 

Overlay로 설정했을 시에는 Screen에 따라 크기 등 Transform에 변화가 생기지만

 

World Space로 했을 경우, World 내에 존재하는 하나의 오브젝트가 되기 때문에

 

Position, Rotation, Scale 등을 Control 할 수 있게 됩니다.

 

 

위의 사진과 같이 상호 작용 가능한 캐릭터 위에 캐릭터의 이름을 표시하거나

 

대사가 있는 캐릭터의 경우는 말풍선과 같이 대사를 표현할 때 사용하기도 합니다.

 

그 외에도 다양한 용도로 사용될 테지만, 당장 떠오르는건 이정도네요.

 

 

 

 

 

---

 

UI 종류 세분화

 

제가 거론하는 종류보다 더 많을테지만,

 

아주 조금만 더 구분해보자면

 

아까 UI 종류 중 1번인

Screen Space의 경우

 

위와 같이 2가지로 더 분류가 됩니다.

 

1. SceneUI

이는 처음에 설명했던 HP, 미니맵 등 기본적으로 게임을 플레이하면서 필요한 정보를 띄워주는 UI입니다.

 

2. PopupUI

 

팝업 UI는 말대로 팝업창이라고 보면 됩니다.

 

Canvas로 구성된 하나의 UI를 SceneUI 위에 띄우는 방식입니다.

 

대표적으로 NEXON의 Maplyestory를 보면

 

출처 : https://archive.maplestory.nexon.com/News/GMsDiary/84?p=8

 

인벤토리와 같이 메인 화면은 그대로 둔 채, 인벤토리가 뜨는 방식입니다.

 

특징으로는 드래그, 크기 키우기 등이 가능합니다.

 

어느 정도 UI 종류에 대해 간단하게 설명이 끝났으니,

 

본격적으로 붕괴 스타레일 메인 화면의 UI에 대해서 분석해보겠습니다.

 

---

 

메인화면의 UI 종류

 

 

기본 메인화면 UI

 

기본 게임플레이 메인 화면 UI

 

 

기본 게임플레이 메인 화면 UI는 당연히

Screen Space - Overlay 또는 Camera 

방식의 화면이며 세부적으로 들어가면

 

SceneUI

라고 생각합니다.

 

SceneUI의 특징은 위에서 설명드렸던대로이며

 

주의할 점은 게임 플레이에 있어서 절대 방해되지 않게

 

적절한 위치에 배치해야 한다는 점입니다.

 

만약 미니맵이 잘보이게 하려고 화면 가운데에 두면

 

미니맵은 잘보이겠지만, 게임 플레이에 매우 방해가 될 것 입니다.

 

각 위치를 보시면

 

1시 방향에 UI 퀵 버튼

 

3시 방향에 캐릭터 정보

 

5시 방향에 공격과 스킬 정보

 

7시 방향에 채팅 관련 UI와 Footer

 

11시 방향에 미니맵과 위치 정보, 그리고 퀵버튼 3가지가 보입니다.

 

 

해당 UI를 보고 짐작되는 Hierachy 구조는 아래와 같습니다

 

Root(Canvas)

ㄴ QuickUIButtons (1시 방향 UI)

    ㄴ Btn_TravelRerod (여정 기록 UI)

    ㄴ Btn_ ObscureAchievement (무명의 공훈 UI)

    ㄴ Btn_ Warp (워프 UI)

    ㄴ Btn_ Guide(가이드 UI)

    ㄴ Btn_ Backpack(배낭 UI)

    ㄴ Btn_ PartyOrganization(파티 편성 UI)

    ㄴ Btn_ StatusOfCharacter(캐릭 UI)

 

ㄴ CharacterStatus (3시 방향 UI)

    ㄴ Character1 (1번 캐릭터)

        ㄴ Left

            ㄴTxt_CharacterName

            ㄴSlider_HP

        ㄴ Middle

            ㄴ Mask_CharacterImage

                ㄴ CharacterImage

        ㄴ Right

            ㄴ Slider_UltimateCounter

            ㄴ ImageCharacterIndex

            ㄴ TxtIndexNumber

 

    ㄴ Character2 (2번 캐릭터)

        ㄴ Left

            ㄴTxt_CharacterName

            ㄴSlider_HP

        ㄴ Middle

            ㄴ Mask_CharacterImage

                ㄴ CharacterImage

        ㄴ Right

            ㄴ Slider_UltimateCounter

            ㄴ ImageCharacterIndex

            ㄴ TxtIndexNumber

 

    ㄴ Character3 (3번 캐릭터)

        ㄴ Left

            ㄴTxt_CharacterName

            ㄴSlider_HP

        ㄴ Middle

            ㄴ Mask_CharacterImage

                ㄴ CharacterImage

        ㄴ Right

            ㄴ Slider_UltimateCounter

            ㄴ ImageCharacterIndex

            ㄴ TxtIndexNumber

 

    ㄴ Character4 (4번 캐릭터)

        ㄴ Left

            ㄴTxt_CharacterName

            ㄴSlider_HP

        ㄴ Middle

            ㄴ Mask_CharacterImage

                ㄴ CharacterImage

        ㄴ Right

            ㄴ Slider_UltimateCounter

            ㄴ ImageCharacterIndex

            ㄴ TxtIndexNumber

 

 

ㄴ AttackDashSkill (5시 방향 UI)

    ㄴ ImageBackground ( 테두리 라인 이미지 )

        ㄴ AttackUI

            ㄴ MovingImageBackground ( 원이 빙빙 도는 이미지 )

                ㄴ ImageBackground ( 검은 배경 원형 배경 이미지 )

                    ㄴ ImageAttack ( 공격 문양 이미지 )

                    ㄴ ImageAttackAttribute ( 공격 속성 이미지 )

            ㄴ ImageControl ( 마우스 좌 클릭 이미지 ) 

 

        ㄴ SkillUI

            ㄴ ImageBackground ( 검은 배경 원형 배경 이미지 )

                ㄴ ImageSkill ( 스킬 문양 이미지 )

                ㄴ TxtSkillType ( 스킬 타입 텍스트 )

            ㄴ ImageControl ( 마우스 우 클릭 이미지 ) 

            ㄴ SliderSkillCount ( 사용가능한 스킬 개수 나타내는 슬라이더 ) 

        ㄴ DashUI

            ㄴ ImageBackground ( 검은 배경 원형 배경 이미지 )

                ㄴ ImageSkill ( 대시 문양 이미지 )

            ㄴ ImageControl ( 마우스 우 클릭 이미지 ) 

 

ㄴ Chat (7시 방향 UI)

     ㄴ BtnChat ( 채팅 이미지를 포함하는 버튼 )

     ㄴ ImageChat ( Enter 표시 이미지 ) * Enter까지 포함하여 이미지일 수 있음

         ㄴ Txt_Enter( Enter 글씨 )

 

ㄴ Minimap&UIButtons (11시 방향 UI)

    ㄴ ImageLocationBackground (현재 위치 알려주는 텍스트의 배경 이미지 )

        ㄴ TxtLcation( 현재 위치를 표시하는 텍스트 )

    ㄴ Content

        ㄴ UpperIcons

            ㄴ BtnPause ( 일시정지 UI ) 

            ㄴ BtnTutorial ( 튜토리얼 UI )

        ㄴ Minimap

            ㄴMaskCircle ( 미니맵을 원형 모양으로 보여주기 위한 Mask )

                ㄴ ImageMinmap ( 미니맵 이미지 )

        ㄴ BottomIcons

            ㄴ BtnQuest ( 임무 UI )

 

ㄴ Footer

    ㄴ TxtUid ( 유저 아이디 번호를 출력하는 텍스트 )

 

 

작성하다보니 생각보다 많습니다...

 

스킬 개수를 표현하는 Slider와

 

궁극기 게이지 슬라이더의 물 처럼 표현한 기법 등

 

자세한 부분은 다음 포스팅에 다루도록 하겠습니다.

 

 

---

 

일시정지 시 메인화면 UI

일시정지 시 메인 화면의 UI

 

 

ESC 또는 11시 방향의 폰 모양의 아이콘을 누르면 위와 같이

 

캐릭터가 폰을 보고 있는 동작을 하며 오른쪽에 폰 내부의 디자인으로 UI들이 나옵니다.

 

일단 분석을 먼저 해야합니다.

 

어떻게 UI를 블록 하나하나로 나누고 구현할지 고민해야 합니다.

 

UI를 블록으로 구분

 

먼저 자세히 보면 왼쪽과 오른쪽이 하나의 사진으로 이어져있지만

 

빈 공간이 있기에 왼쪽 마스크와 오른쪽 마스크로 구분했습니다.

 

그 후 왼쪽과 오른쪽에 각 필요한 오브젝트들 구현했습니다.

 

특히 왼쪽의 오브젝트가 가장 많기 때문에

 

Top과 Bottom으로 한 번 더 구분하고 구현했습니다.

 

 

해당 UI를 보고 짐작되는 Hierachy 구조는 아래와 같습니다

 

Root (Canvas)

ㄴ Background ( 빈 오브젝트, 구분 용도 )

    ㄴ Left ( 왼쪽 오브젝트들. 사각형 모양의 이미지와 Mask, 그리고 테두리를 위해서 Outline을 넣어줍니다)

        ㄴ Image ( Background Image를 넣습니다 )

        ㄴ Content ( 빈 오브젝트, 주된 오브젝트들을 이곳에 넣습니다. )

            ㄴ Top ( 빈 오브젝트, 위 쪽 오브젝트 모음을 이곳에 넣습니다. Vertical Layout)

                ㄴ Uid_Wifi_Battery ( 빈 오브젝트, Uid와 전파 수신 강도, 배터리 정보를 넣습니다.  Horizontal Layout)

                    ㄴ TxtLabelUid ( UID 라벨 텍스트 입니다. )

                    ㄴ TxtUid ( UID  텍스트 입니다. )

                    ㄴ Img_UidCopy ( UID  이미지 입니다. )

                    ㄴ Space ( 빈 오브젝트, 빈 공간 넓이를 만드는 용도입니다. )

                    ㄴ Img_Wifi ( 이미지 오브젝트, 전파 수신 강도를 나타내는 이미지 입니다. )

                    ㄴ Img_Battery ( 이미지 오브젝트, 베터리 잔량을 나타내는 이미지 입니다. )

                ㄴ Profile ( 빈 오브젝트, 프로필 정보를 담고 용도입니다.  Horizontal Layout )

                    ㄴ Profile_Mask ( 프로필 이미지를 원형에 넣을 수 있게 하는 마스크 이미지입니다.  )

                        ㄴ Image_Profile ( 이미지 오브젝트, 프로필 이미지 입니다. )

                    ㄴ Name ( 빈 오브젝트, 이름과 균형 레벨 정보를 담는 용도입니다.  Vertical Layout)

                        ㄴ NickName ( 텍스트 오브젝트, 플레이어의 이름입니다. Shadow, Outline를 추가합니다. )

                        ㄴ BalanceLevel ( 빈 오브젝트, 균형 레벨 정보를 담는 용도입니다. )

                            ㄴ BalanceLevel ( 텍스트 오브젝트, 균형 레벨 텍스트 입니다. )

                            ㄴ Btn_BalanceLevelInfo( 버튼 오브젝트, 균형 레벨의 정보를 볼 수 있습니다. )

 

            ㄴ Bottom ( 빈 오브젝트, 아래 쪽 오브젝트 모음을 이곳에 넣습니다. Rect Mask )

                ㄴ Scroll View ( 스크롤 뷰 오브젝트, 많은 정보를 담고 스크롤링 할 수 있습니다. )

                    ㄴ Viewport ( Content에 있는 정보를 볼 수 있습니다. 범위 안에 오브젝트를 볼 수 있게 Mask 첨가 )

                        ㄴ Content ( 빈 오브젝트, 주된 오브젝트를 이곳에 넣습니다. Vertical Layout, Content Size Filter )

                            ㄴ Option(1)( 빈 오브젝트, 가로 한 줄로 원하는 만큼 넣습니다. Horizntal Layout )

                                ㄴ Btn_???( 버튼 오브젝트,  원하는 개수 만큼 넣습니다.)

                                      ....

                            ㄴ ....

 

    ㄴ Right ( 오른쪽 오브젝트들. 사각형 모양의 이미지와 Mask, 그리고 테두리를 위해서 Outline을 넣어줍니다)

        ㄴ Image ( Background Image를 넣습니다 )

        ㄴ Content ( 빈 오브젝트, 주된 오브젝트들을 이곳에 넣습니다.  Vertical Layout)

            ㄴ Btn_Close ( 버튼 오브젝트, 폰을 끄고 일시정지에서 벗어나는 기능을 합니다 )

            ㄴ Icons ( Image 오브젝트, 라운드 사각형 이미지를 가지며, 남은 아이콘을 담는 기능을 합니다. Vertical...) 

                ㄴ Btn_Mail ( 버튼 오브젝트, 우편함을 여는 기능을 합니다. )

                ㄴ Btn_Info ( 버튼 오브젝트, 게임 공지사항 및 정보 열람창을 여는 기능을 합니다. )

                ㄴ Btn_Setting ( 버튼 오브젝트, 설정을 여는 기능을 합니다. )

                ㄴ Btn_Camera ( 버튼 오브젝트, 인게임 내 사진을 촬영하는 카메를 여는 기능 합니다. )

                ㄴ Btn_Power ( 버튼 오브젝트, 게임을 종료하는 기능을 합니다. )

 

 

 

상상을 토대로 만들어 본 UI 디자인 

 

 

오늘의 회고

 

생각한 것 이상으로 작성하다보니 내용이 엄청 길어지네요.

 

메인 화면의 SceneUI를 유니티에서 구현한 화면은

 

조금 시간의 여유가 되면 다음 포스팅에서 같이 작성해보겠습니다.

 

다음 포스팅 내용은

 

먼저 메인 화면의 UI 구현과

 

핵심인 Transition에 대해서

 

어떤 시스템 구조를 가지고 있으며

 

어떻게 구현했을지에 대해서 분석과 구현입니다.

 

메인 화면의 Transition에 대해 분석과 구현이 마무리가 된다면

 

다음 포스팅은 UI가 아닌 게임 시스템을 분석해보고자 합니다.

 

예를 들어 캐릭터의 움직임, 공격, 애니메이션 전환과 상태 전환 등.

 

그럼 오늘의 포스팅은 여기까지 하겠습니다.

 

긴 글 읽어주셔서 감사합니다.