블루프린트로 채팅 만들기(1) - Unreal Engine

 저번 시간에 채팅을 만들었었다. 그러나 그런 방식의 채팅은 현재 쓰이지 않는 방향이다. 그래서 오늘은 좀 더 좋은 모습의 채팅창을 만들어 보겠다.

 

 먼저 컨트롤러 부터 만들어 주자. 블루프린트 클래스 생성에서 플레이어 컨트롤러를 상속 받아 BP_ChatController 로 이름을 붙여준다.

 

 그 뒤 컨트롤러에 추가해줄 액터 컴포넌트를 만들어 준다. 이 또한 블루프린트 클래스 생성에서 액터 컴포넌트를 상속받아 BP_ChatActorComponent 로 이름을 붙여주겠다.

 

 여기서 의문이 생긴다. 액터는 어느정도 알겠는데 액터 컴포넌트는 무엇인가? 

 

 일단 액터는 월드(레벨)에 배치될 수 있는 모든 오브젝트를 의미한다. 말 그대로 그 자체로 존재가 가능하며 월드에 배치가 가능해진다.

 

 액터 컴포넌트는 액터에 추가되어 특정 기능을 제공하는 재사용 가능한 모듈이다. 자체적으로 월드에 배치될 수 없으며, 반드시 액터에 부착되어야 한다. 이는 액터의 기능을 세분화하여 관리하고, 코드의 유지보수성을 향상시키는 결과를 낳는다.

 

 결국 컴포넌트가 무엇인지 이해 해야지만 이번 과정이 어떻게 흘러가는지 이해할 수 있을 것이다. 액터 컴포넌트라고 말했지만 결국 컴포넌트의 의미가 재사용 가능한 모듈이라고 이해하자.

 

 만들어준 ChatController 블루프린트 클래스에 들어가  컴포넌트에 추가 버튼을 눌러 우리가 만든 ChatActorComponent 를 추가해준다.

 

 그 뒤 월드 세팅에서 컨트롤러를 ChatController 로 바꾸어 준다.

 

 게임 모드는 이미 만들어진 탬플릿인 ThirdPersonGameMode 를 베이스로 진행하였다.

 

 이제 위젯 블루프린트 클래스를 생성해주자. 우리는 총 3개의 위젯 블루프린트 클래스를 만들텐데 첫번째는 대화창, 두번째는 대화창에 올라갈 글, 세번째로는 이 두개를 한번에 묶은 위젯 이다.

 

 일단 대화창을 만들어 주자. 유저 인터페이스에서 위젯 블루프린트 클래스를 생성해 준 뒤 UWB_ChatBox 라 이름을 붙여주자.

 

 생성된 블루프린트를 열어 다음과 같은 팔레트들을 추가해 준다. 순서도 아래와 같이 만들어 주면 되겠다.

 

 처음에 생성된 위젯 블루프린트는 fullscreen 을 기준으로 만들어 지는데 우리는 이를 desired 로 바꾸어 보기 편하게 만들어 주겠다. 오른쪽 상단위의 버튼을 눌러 Desired 로 바꾸어 주자.

 

 이제 크기 박스(Size Box) 부터 천천히 디테일을 살펴보겠다. 아래는 크기 박스의 디테일이다.

 

 

 크기 박스는 너비와 높이만 바꾸어 준다. 이정도면 화면 구석에 위치할 때 거슬리지 않는 정도의 크기를 가질 것이다.

 

 세로 박스 (Vertical Box) 에 관해서는 변경점은 없다.

 

 ScrollBox 는 사이즈를 채우기로 선택해주고 세로 정렬은 하단 세로 정렬로 맞추어 준다. (Bottom Align Vertically)  그리고 변수 여부를 체크해 준다.

 

 EditableTextBox 또한 변수 여부를 체크해 준 뒤 폰트 크기를 15로 줄여준다. 그리고 디테일 검색창에 Enabled 로 검색하여 비헤이비어 활성화 여부를 체크 해제해 준다.

 

 

 다음엔 위젯 블루프린트 클래스를 하나 더 생성해 준다. UBW_ChatEntry 라는 이름으로 생성한 뒤 다음과 같이 설정해 준다.

 

 

 이 위젯은 사용자가 입력한 글씨가 어떻게 보이는지 정의하는 용도이다. 즉 여기서 플레이어가 친 채팅의 크기, 색상 등을 바꿀 수 있다. 위와 같이 택스트 박스 하나를 추가해 주고 디테일을 다음과 같이 설정해준다.

 

 컬러 및 오파시티는 원하는 색상을 넣고 폰트에서 크기는 상황에 맞추어 키워준다. 타입페이스는 Regular 로 바꾸어 준 뒤 디테일 검색창에 auto 를 검색해 텍스트 자동 매핑 (Auto Wrap Text) 를 체크해준다. 그 뒤 변수 여부를 체크해주자.

 

 이제 ChatEntry 의 그래프로 들어간다. 그 뒤 다음과 같이 설정해 준다.

 

 여기서 TextBlock 은 위에서 변수 여부를 체크한 Text Block 이다. Message 는 새로운 String 형 변수를 생성해 Get Message 로 가져워 To Text 에 붙여준다. Message 의 디테일은 다음과 같다.

 

 저장한 뒤에 ChatBox 블루프린트로 돌아간다.그래프로 들어가 함수 (Function) 에 Focus Chat 라 이름 붙여 생성해준다. 그 뒤 아래와 같이 블루프린트를 만들어 준다.

 

 이 함수는 플레이어가 채팅을 켤때 다른 상호작용이 안되도록 방지하기 위한 함수이다. Bool 형 변수인 Chat Focused 를 생성해 셋에서 체크박스를 선택해준다.

 

 다른 함수인 Exit Chat 을 만들어 줄 차례이다. 이것도 아래와 같이 블루프린트를 만들어 준다.

 

  여기서는 ChatFocused 를 해제해준다. 이 함수는 플레이어가 채팅을 껐을때 다른 상호작용이 가능하게 돌아가기 위한 함수이다.

 

 이 다음에는 Scroll 이라는 함수를 만들어준다. 이는 새로운 택스트가 생성될 때 기존의 택스트가 위로 밀리는 효과를 주기 위한 함수이다.

 

 여기서는 ScrollMutiplier 라는 float 형 변수를 생성해서 작성해준다. 아래는 변수의 모습이다.

 이제 이벤트 그래프로 돌아간다.

 

 처음에는 플레이어의 컨트롤러를 가져와 여기에 존재하는 BP_ChatActorComponent 를 가져올 것이다. 이를 위해서 아래와 같이 작성해준다.

 

 Compoent Class 를 BP_ChatActorComponent 를 선택해준 뒤 Return Value 에서 변수로 승격해준다. 이름을 ChatPC_ComponentRef 라 붙여준다. 이제 AddCahtMessage 라는 함수를 만들어 줄 차례이다. 아래의 사진과 같이 블루프린트를 작성해준다.

 

 이 함수로 메시지가 입력되면 계속해서 메시지 창에 글이 남고 기존의 글은 한칸씩 (60.f 로 설정했기에 이정도씩) 밀려난다.

 

 오늘은 이정도까지만 작성하겠다. 내일 남은 작업으로 완성시켜보자.