유니티 2D UI - 대화창 구현하기! - SetSiblingIndex 와 이미지 순서

유니티 수업을 들으며 혼자서 진행하고 있는 프로젝트 입니다.

2D슈팅게임이 목표엿는데요, 슈팅게임을 하다 보면 당연히 

대화가 필요한 시점도 나오겠죠.

그래서 오늘은 한번 대화창을 제작해 보았습니다!

▲최종 결과물이라고 생각해 주시면 되겠습니다.

 (Gif 파일은 이상이 없는데 올리는 과정에서 뭔가 문제가 생기는지 화면이 자꾸 깨지네요)

1. 계획 세우기 단계.

 대화창을 제작하기로 결정한 후, 대화창에 넣기로 한 필요 기능들은 다음과 같았습니다.

ⓐ  사용할 때 해당 판넬이 앞으로 돌아나오며 하이라이트를 받도록 조정, 

대화의 대상이 되는 1개 캐릭터만 제외하고 RGB컬러를 어둡게 맞춰주는 상태 

     (미세값 조정 예정 : RGB전부  대략 77정도가 적절해 보임) 

ⓑ  캐릭터 판넬은 1 판넬당 1캐릭터의 초상화를 표시하며 화자가 바뀌었을 때는 뒷면에 있는           캐릭터의 Sorting layer를 변경함으로서 해당 캐릭터가 앞면으로 나오도록 조정할 수 있을 것.        캐릭터가 앞면으로 나오는 장면은 애니메이션화 하여 판넬이 뒤로 빠졌다가 다시 들어오되        다시 들어오는 순간 소팅 레이어가 바뀌도록 할 것.

ⓒ     또한 캐릭터들이 대화가 시작할때 화면으로 들어오도록 하기 위해, 

          이를 위해 판넬은 바깥에 만들어 두고, 판넬이 들어오고 움직일 위치를 미리 지정해 두기             위한 게임 오브젝트를 생성해 둘 것.

일단 초상화가 움직이는데에는 간단한 itween 을 사용하기로 하였고, 

OnDialog() 함수를 만들어서 대화창 모드가 구현되도록 하였습니다.

2. 제작을 위한 유니티 안에서의 구현.

제작을 위해 필요한 것들은 다음과 같았습니다.

다이얼로그 이벤트 제작을 위한 기본 틀이 되는 텍스트 출력 바,

실제 그림을 출력하는 charLeft,Right 판넬 (각2개씩)

그리고 왼쪽 오른쪽에서 각각 원래 위치와 대화할때 이동하는곳, 자기 대사가 아닐때 뒤를 지키는 곳 이렇게 3군데씩 위치를 잡아주었습니다.

이렇게 설명하다 보니 마치 공작시간에 준비물 나열하는거 같네요~

위쪽에 보이는 챗이벤트는 간단하게 보면 대화 구현에 필요한 정보를 담아두는 곳입니다. 앞으로 여러개의 이벤트를 만들게 될 텐데, 그 이벤트들을 쉽게 집어넣을 수 있도록, 저런 게임오브젝트를 만들어서 넣어두면 이벤트를 자동으로 읽을 수 있도록 해 둔 거죠. 자세한건 바로 아래에서 설명드릴게요!

네 이게 바로 그 스크립트입니다.

실제로 위쪽에 보여드린 완성본의 스크립트에 쓰이는 테스트이기도 한데요,

변수를 하나 하나 설명해 드릴게요!

MaxChatSize는 이 대화가 몇번의 대화가 나오는지를 결정합니다. 여기선 값이 5니까, 5번의 대화가 출력되고 나면 자동으로 함수가 종료됩니다.

보시면 Scrips, image_number, chatStepPanel도 똑같이 5개의 원소를 가지시는게 보이실 거에요. 이것들은 대화가 진행되면서(예를들어 첫번째 대화에서 로드되는 것들은 Script[0],image_number[0],chatStepPanel[0]에 번호가 저장되어 있죠. Script[0]에 있는 대사, ,image_number[0] 에 지정된 이미지의 번호,chatStepPanel[0]에 지정된 판넬의 번호처럼 말이죠.

실제 이 스크립트는 다음과 같이 구성되어 있습니다.

awake 문에서 끝나고, 업데이트문같은건 없죠.

한마디로, 이 스크립트가 포함된 오브젝트가 활성화되는 순간, 미리 정해진 값들을 그대로 GameMgr 로 전달해 줍니다.

GameMgr은 그대로 그걸 다이얼로그 스크립트의 데이터에 전달해 주고요.

말하자면 게임매니저 이스크립트 자체가 변수라고 할 수 있겠네요.

실제 이 변수들은 ,다음과 같이 사용되게 됩니다.

Chat 이란 함수를 구현해 뒀거든요.

Chat 함수는, 다이얼로그 창이 활성화된  매 업데이트 문마다 실행되며,

chatStep의 진행에 따라서  따로 저장되어있는 스크립트와 그림을 판넬에로드해 주고 움직이게 됩니다.

안쪽에선 Swap, 하이라이트, 텍스트 함수 등등 여러가지 기능들이 모여서 동작해 주고 있지요.

Swap 함수가 구현하기 좀 어려웠는데, 

특히 판넬 이미지는 UI기 떄문에 소팅레이어를 정할 수가 없었기 때문에,      이 이미지들의 순서를 바꾸는 법과 
(panle [1].transform.SetSiblingIndex (0);)

판넬 안의 이미지를 수정하는 방법 
panle[i].GetComponent<Image>().sprite = image_char[img]; 
을 배우는데 시간이 좀 걸렸습니다. 

사실.transform.SetSiblingIndex (0);은 실제 이미지의 순서를 바꾼다기 보다, 아예 차일드 내부의 순서를 바꿔버리는 함수에요. 예를들면 저 .transform.SetSiblingIndex (0);) 라는 함수는 차일드들 중에서 맨 위로 올라가도록 하는 기능이죠. 유니티 히에라키 화면 보셔도 바로 확인이 가능하니까 궁금하신 분들은 한번 시험해 보세요. 

차일드 순위가 내려갈수록(숫자가 늘어날수록) 점점 위쪽으로 보입니다.

저희가 막 순서대로 만들면 순서대로 가려지는거랑 비슷하죠.

이 순서를 조정해서 위아래 전환이 가능합니다.

그래서 나온 스왑 함수가 바로 이거죠.

이번에 대화창을 구현한 것은 정말 좋은 기회였던 거 같아요.

특히 이미지가 딸린 UI를 컨트롤하는 방법에 대해서 정말 좋은 공부가 되었던 거 같습니다.

다음번엔 어떤 걸 구현해 볼까요~! 벌써 기대가 됩니다.