사용자 정의 텍스트 채팅 UI

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

1. Studio의 속성 창에서 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. 채팅 창의 대체품을 만듭니다. 이는 ScrollingFrame으로, TextChatService.MessageReceived로부터 수신된 메시지를 표시합니다. 이 단계에서는 메시지를 자동으로 배치하는 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에 포커스를 주거나 채팅 태그를 추가하는 등의 기능을 추가하여 이 예제를 확장할 수 있습니다.