사용자 정의 텍스트 채팅 UI

이 예제는 TextChatService 클래스를 사용하여 자신의 프론트엔드를 디자인하는 방법을 보여줍니다. 이는 CreateDefaultTextChannels에서 기본 텍스트 채널을 재사용하며, 기본 UI에 비해 매우 간단합니다.

1. 프로퍼티 창에서 ChatWindowConfiguration.Enabled 및 ChatInputBarConfiguration.Enabled 속성을 false로 설정하여 TextChatService와 함께 제공되는 기본 UI를 비활성화합니다.

2. 채팅 입력 바에 대한 대체물을 만듭니다. 이는 사용자가 Enter를 눌렀을 때 메시지를 방출하는 텍스트 상자입니다.

   1. ScreenGui를 만들고 이를 StarterGui에 부모로 설정합니다.

   2. TextBox를 만들고 이를 새 ScreenGui에 부모로 설정한 다음, 원하는 대로 재배치하고 크기를 조정합니다.

   3. LocalScript를 만들고 이를 새 TextBox에 부모로 설정합니다.

   4. 다음 코드를 LocalScript에 추가합니다:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral은 기본 공개 채널입니다.
      local RBXGeneral = TextChatService:FindFirstChild("TextChannels"):WaitForChild("RBXGeneral")
      
      local textBox = script.Parent
      textBox.FocusLost:Connect(function(enterPressed)
      	local text = textBox.Text
      	if enterPressed and #text > 0 then
      		local success, response = pcall(function()
      			return RBXGeneral:SendAsync(textBox.Text)
      		end)
      
      		if not success then
      			RBXGeneral:DisplaySystemMessage("메시지 전송 실패")
      		end
      
      		-- 사용자는 메시지를 전송한 후 입력 상자가 비어있길 기대합니다.
      		textBox.Text = ""
      	end
      end)

3. 채팅 창에 대한 대체물을 만듭니다. 이는 TextChatService.MessageReceived로부터 수신된 메시지를 표시하는 ScrollingFrame입니다. 이 단계에서는 메시지를 자동으로 레이아웃하는 UIListLayout도 만듭니다.

   1. 또 다른 새 ScreenGui를 만들고 이를 StarterGui에 부모로 설정합니다.

   2. ScrollingFrame을 만들고 이를 ScreenGui에 부모로 설정한 다음, 원하는 대로 재배치하고 크기를 조정합니다.

   3. UIListLayout을 만들고 이를 ScrollingFrame에 부모로 설정합니다.

   4. LocalScript를 만들고 이를 ScrollingFrame에 부모로 설정합니다.

   5. 다음 코드를 LocalScript에 추가합니다:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- 수신된 각 메시지에 대한 새 텍스트 레이블을 만드는 함수
      local function addMessageGui(textChatMessage: TextChatMessage)
      	local isOutgoingMessage = textChatMessage.Status == Enum.TextChatMessageStatus.Sending
      
      	local parent = script.Parent
      
      	local originalLabel = parent:FindFirstChild(textChatMessage.MessageId)
      	if originalLabel then
      		originalLabel.Text = textChatMessage.Text
      		originalLabel.BackgroundTransparency = if isOutgoingMessage then 0.5 else 0
      	else
      		local textLabel = Instance.new("TextLabel")
      		textLabel.BorderSizePixel = 0
      		textLabel.Font = Enum.Font.BuilderSans
      		textLabel.TextSize = 18
      		textLabel.TextXAlignment = Enum.TextXAlignment.Left
      		textLabel.BackgroundTransparency = if isOutgoingMessage then 0.5 else 0
      		textLabel.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
      		textLabel.TextColor3 = Color3.fromRGB(255, 255, 255)
      		textLabel.Name = textChatMessage.MessageId
      		textLabel.AutomaticSize = Enum.AutomaticSize.XY
      		textLabel.Text = textChatMessage.Text
      		textLabel.Parent = parent
      	end
      end
      
      -- 수신 중인 메시지를 듣기 시작합니다.
      TextChatService.MessageReceived:Connect(addMessageGui)

      TextChatService.MessageReceived 이벤트를 사용할 때는 메시지가 채팅 창에 이미 존재하는지 확인하는 것이 중요합니다. 이 이벤트는 메시지를 전송할 때와 서버로부터 메시지를 수신할 때 각각 한 번 호출됩니다.

4. 채팅 입력 바에서 메시지를 전송하여 게임을 테스트합니다. 채팅 창에 메시지가 나타나는 것을 볼 수 있어야 합니다. 그런 다음 키가 눌릴 때 TextBox에 포커스를 추가하거나 채팅 태그와 같은 기능을 추가하여 이 예제를 확장할 수 있습니다.