사용자 지정 텍스트 채팅 UI

이 예시에서는 TextChatService 클래스를 사용하여 자체 프론트엔드를 디자인하는 방법을 보여줍니다.기본 텍스트 채널을 CreateDefaultTextChannels에서 재사용하고 기본 UI와 비교하면 매우 간단합니다.

1. Studio의 속성 창에서 속성과 속성 속성을 설정하여 기본 UI인 UI를 비활성화하고 스튜디오의 속성 창에서 속성을 비활성화합니다.

2. 채팅 입력 바의 대체 항목을 만듭니다. 사용자가 Enter를 누르면 메시지가 발송되는 텍스트 상자입니다.

   1. Create a ScreenGui 및 StarterGui 에 부모로 지정하십시오.

   2. Create a TextBox 및 새로운 ScreenGui 에 부모로 지정하고, 원하는 대로 위치 조정 및 크기 조정 합니다.

   3. Create a LocalScript 및 새로운 TextBox 에 부모로 지정하십시오.

   4. 다음 코드를 LocalScript에 추가하십시오:

      클라이ент
      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("Failed to send message")
      		end
      
      		-- 사용자는 메시지를 보낸 후 입력 상자가 지워지기를 기대합니다
      		textBox.Text = ""
      	end
      end)

3. 채팅 창의 대체 창을 만듭니다.이것은 메시지를 받은 대로 표시하는 ScrollingFrame 이며, TextChatService.MessageReceived 에서 수신됩니다.이 단계에서는 또한 메시지를 자동으로 레이아웃하기 위해 UIListLayout를 생성합니다.

   1. 다른 새로운 ScreenGui를 만들고 부모로 StarterGui에 지정하십시오.

   2. Create a 및 를 부모로 지정하고, 원하는 대로 위치를 조정하고 크기를 조정합니다.

   3. Create a UIListLayout 및 ScrollingFrame 에 부모로 지정하십시오.

   4. Create a LocalScript 및 ScrollingFrame 에 부모로 지정하십시오.

   5. 다음 코드를 LocalScript에 추가하십시오:

      클라이ент
      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
      
      -- 받는 메시지 수신 시작 Start listening for incoming messages
      TextChatService.MessageReceived:Connect(addMessageGui)

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

4. 채팅 입력 바에 메시지를 보내 경험을 테스트하세요.채팅 창에 메시지가 나타나야 합니다.그런 다음 키가 누르거나 채팅 태그를 추가하는 등의 기능을 추가하여 이 예제를 확장할 수 있습니다.You can then expand on this example by adding features such as focusing the TextBox when a key is pressed or adding chat tags .