🎮 Default Setting

PlayerController	ActorComponent	GameModeSetting

• BP_ChatPlayerController 를 생성하고 GameMode 설정을 한다. AC_Chat_PC는 ActorComponent로 PlayerController의 Component로 설정한다.

---

---

🎮 Widget

WBP_ChatBox, WBP_ChatEntry, WBP_ChatUI를 활용한다.

1️⃣ WBP_ChatBox

📌 구성요소

• Size Box
  • 자식 위젯의 크기를 제한하거나 고정시킬 수 있도록 도와주는 컨테이너
  • 보통 채팅 박스의 크기를 일정하게 유지하고 싶을 때 사용.
• Vertical Box
  • 여러 위젯들을 수직 방향 으로 정렬해주는 컨테이너
  • 여기서는 ScrollBox_58, EditableText_151이 수직으로 배치되어 있다.
• ScrollBox_58
  • 스크롤 가능한 컨테이너
  • 일반적으로 채팅 메세지를 저장하고 표시하는 용도로 사용.
  • 새로운 채팅 메세지를 계속 추가해도 스크롤을 통해 이전 메세지 확인 가능.
• EditableText_151
  • 사용자가 텍스트를 입력할 수 있는 위젯.
  • 일반적으로 채팅 입력창 역할을 함.
  • 사용자 입력을 받아 Enter 키 등의 이벤트로 메세지를 전송하게 만듦.

📌 Focus Chat(Function)

• Set User Focus

  • 채팅 입력창에 포커스를 주게함 (Ediable Text -> SetUserFocus)
  • 포커스를 줄 대상을 Get Player Controller을 통해 가져옴.
  • 어떤 UI에 포커스를 줄 것인가? Target : Editable Text 151

• Set Is Enabled

  • 채팅 입력창을 활성화 상태로 설정
  • 비활성 상태면 포커스 안먹힘.

• 활성화 되면 Chat Focused (Bool Variable) True 로 설정.

👉 외부에서 Focus Chat 함수가 Called 되면 실행되는 로직 (Enter Key Pressed) Focus, Enable 설정

📌 Exit Chat(Function)

• Chat Focused (Bool Variable) False 로 설정

• SetText를 활용하여 입력칸 비우기.

• Set Is Enabled 비활성화

• Set Input Mode Game Only 를 이용하여 입력이 완료되면 Focus를 끄고 게임 모드로 전환

👉 외부에서 Exit Chat 함수가 Called 되면 실행되는 로직. Focus Chat과 반대.

📌 Scroll(Function)

• Scroll 에 Input(매개변수)로 Up(Bool Variable)를 추가한다.

• Select Float을 통해 Up이 True 면 A를 Excute / Up이 False면 B를 Excute

  • A와 B에 1, -1 을 넣어서 마우스 스크롤의 굴리는 방향에 따라 스크롤 바가 방향이 전환되게 함.

👉 마우스 스크롤을 할 때 Scroll 함수를 호출하여서 Set Scroll Offset를 통해 Scroll의 위치를 전환

📌 AddChatMessage

• AddChatMessage (Custom Event)

  • 외부에서 채팅을 Commit 하면 Called 함수
  • Message라는 String을 Input(매개변수)로 받아서 동작을 시작

• Create Widget (WBP_ChatEntry)

  • 채팅 한 줄을 표현하는 Widget 생성
  • Message
    • 텍스트를 위젯 생성 시에 전달 (WBP_ChatEntry->Message(bool valualbe)의 Expose on Spawn 옵션 덕분에 메세지 넘기는게 가능

• Add Child (Target: Scroll Box)

  • Scroll Box는 여러 개의 Child Wiget을 Vertical 혹은 Horizon으로 Alignment해서 보여주는 스크롤 가능한 컨테이너
  • Add Child로 새로 만든 Message Wiget을 Child Wiget으로 추가

• Scroll to End

  • 이 노드는 Scroll Box를 자동으로 맨 아래로 스크롤함
  • 최신의 Message를 보이도록 자동으로 스크롤
  • 안 하면 새 메시지가 추가되더라도 사용자가 직접 스크롤해야 볼 수 있음 → UX 안 좋음

👉 문자열(Message)을 받아서 → 채팅 메시지 위젯을 생성하고 → Scroll Box에 추가하고 → 자동으로 맨 아래로 스크롤해서 최신 메시지가 보이도록 함.

📌 Event Graph

• Widget이 형성되면 GetPlayerController -> Get Component by Class (AC_Chat_PC)
• Promote Value -> Set Chat PC Component Ref

• OnTextCommitted (EditableText_151)

  • 채팅 입력창에서 Text가 Commit 됐을 때 실행
  • Text
    • 입력된 텍스트
  • Commit Method
    • Commit 방식(여기선 On Enter) (Equal Enum)

• Branch 1

  • Enter로 Commit 될 경우 True 실행

• 만약 채팅이 비었을 경우 (Is Empty == True)

  • Sequence의 Then1 이 실행되면서 Exit Chat

• 채팅이 있는 경우 (Is Empty == false)

  • Chat PC Component Ref(AC_Chat_PC) 의 Send Chat Message On Server 이벤트 실행
  • 채팅 입력 시 사용자를 구분하기 위해 PlayerState를 가져와서 Get Player Name 이후 Append

👉 채팅입력 시 Enter로 Commit, 채팅이 비면 Exit Chat 호출, 그렇지 않으면 ActorComponent Send Chat Message on Server 호출

2️⃣ WBP_ChatEntry

📌 구성요소

• WBP_ChatBox의 ScrollBox에 Text를 추가하는 WBP_ChatEntry를 만든 것.
• EditableText에서 입력된 Message를 받아서 ScrollBox에 갱신해야하기 때문에 Text를 받아서 출력을 하는 SetText를 할 수 있는 Text Block을 사용.
• Details 패널에서 AutoWrapText 활성화.
  • 문장이 길어지면 자동으로 줄 바꿈을 해주는 기능

📌 Event Graph

• Event Construct

  • 위젯이 생성되고 화면에 처음 나타날 때 한 번 실행되는 초기화 이벤트.
    C++로 따지면 NativeConstruct() 함수

• Message

  • 
  • Instance Editable
    • 블루프린트나 에디터나 디테일 패널에서 해당 변수 값을 바꿀 수 있음
  • Expose on Spawn
    • 블루프린트에서 해당 오브젝트를 Spawn할 때 변수 값을 설정할 수 있음.
    • 생성할 때 변수 초기값을 넘겨줄 수 있게 함.

👉 ChatEntry Widget이 생성되면 Message 값을 받아서 TextBlock의 SetText 해라는 의미.

3️⃣ WBP_ChatUI

📌 구성요소

• 사용자에게 보여지는 전체 UI를 담당

• Overlay

  • UI 요소들을 겹쳐서 배치할 수 있는 컨테이너
  • 내부적으로 Z-Order에 따라 위젯들을 겹쳐서 보여줄 수 있음. 채팅창이나 알림창 등에 자주 사용

• WBP_ChatBox

  • 앞서 설정 했던 실제 채팅 기능을 수행하는 Widget
  • Overlay 위에 배치되어 채팅을 출력하는 것을 처리

---

---

🎮 AC_Chat_PC

1️⃣ Event Begin Play

• GetOwner() 의 반환 타입은 AActor* 이므로 PlayerController로 Casting하는 과정이 필요하다.

• Is Local Player Controller를 통해서 Clients에게만 Branch의 True로직이 Excute 되도록 함.

• Client가 True라면 WBP_ChatUI 생성 후 변수로 Promote

• Viewport에 표시하고 ChatUI의 구성요소인 WBP_ChatBox Instance를 가져와서 변수로 Promote

2️⃣ Input Binding

• 앞서 WBP_ChatBox의 Function들을 입력(Input)과 바인딩

  • Enter를 입력하면 Focus Chat(Function) Excute
  • Mouse Wheel Up/Down에 따라 Scroll (Up(True/False)) Excute

3️⃣ Run On Server & Client

📌 Run On Server

• SendChatMessageOnServer

  • 이 함수는 클라이언트(PlayerController의 AC_Chat_PC의 On Text Committed에 의해)에서 서버로 호출하는 RPC함수이다.
  • Message라는 String을 받아 로직을 실행

• Get Game State

  • 현재 게임의 GameState를 가져온다.
  • GameState는 모든 PlayerState를 저장하고 공유하는 서버-클라 공용 객체

• For Each Loop

  • 모든 PlayerState에 대해 반복 실행
  • 각각의 PlayerState를 기반으로 해당 PlayerController를 찾아서 메세지를 보냄

• Add Chat Message on Owning Client

  • PlayerController를 통해 찾은 Component에서 실행되는 Client 전용 Event

🔁 전체 동작 흐름 정리

• 클라이언트가 SendChatMessageOnServer(Message) 호출

• 서버에서 모든 PlayerState 순회

• 각 플레이어의 PlayerController를 가져옴

• 해당 컨트롤러에 붙은 AC_Chat_PC 컴포넌트 획득

• 그 컴포넌트에 AddChatMessageOnOwningClient(Message) 호출

→ 각 클라이언트에서 채팅 메시지가 뜸

📌 Run On Client

• AddChatMessageonOwningClient

  • 이 함수는 서버에서 클라이언트로 호출하는 RPC함수이다.
  • Message라는 String을 받아 로직을 실행

• Add Chat Message

  • 앞서 Begin Play에서 Promote하여 만든 Variable인 Chat Box Ref를 통해 Add Chat Message 호출

🔁 전체 동작 흐름 정리

• 서버에서 전달받은 Message를

• Chat Box Ref로 참조된 UI에 넘겨주고

• Add Chat Message 함수 호출 → 채팅 메시지가 화면에 출력됨

---

---

🎮 회고

우리가 게임을 하면 흔히 볼 수 있는 스크롤채팅시스템을 만드는 것도 쉽지 않았다. AActor의 하위 AInfo의 GameFrameWork의 개념이 이제는 익숙하지만 가끔은 헷갈려서 다시 찾아보곤 했는데 확실히 개념을 짚고 넘어가야 겠다는 생각을 했다.
그리고 이전에 만들었던 GunfireParagon Project에서 UI를 담당하지 않아서 익숙치 않은 개념들이 많았는데 이번 기회에 정리가 된 것 같아서 좋았다.