Özelleştirilmiş metin sohbeti UI

Bu örnek, kendi ön yüzünüzü tasarlamak için TextChatService sınıfını nasıl kullanacağınızı gösterir. CreateDefaultTextChannels'dan varsayılan metin kanallarını yeniden kullanır ve varsayılan UI ile karşılaştırıldığında oldukça basittir.

1. TextChatService ile birlikte gelen varsayılan UI'yi, Studio'nun Properties penceresinde ChatWindowConfiguration.Enabled ve ChatInputBarConfiguration.Enabled özelliklerini false olarak ayarlayarak devre dışı bırakın.

2. Sohbet giriş çubuğu için bir yedek oluşturun. Bu, kullanıcı Enter tuşuna bastığında mesajları ileten metin kutusudur.

   1. Bir ScreenGui oluşturun ve StarterGui'ya ebeveyn olarak ekleyin.

   2. Bir TextBox oluşturun ve bunu yeni ScreenGui 'ya ebeveyn olarak ekleyin, ardından bunu istediğiniz gibi yeniden konumlandırın ve yeniden boyutlandırın.

   3. Bir LocalScript oluşturun ve bunu yeni TextBox'a ebeveyn olarak ekleyin.

   4. Aşağıdaki kodu LocalScript'e ekleyin:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- RBXGeneral varsayılan genel kanaldır
      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("Mesaj gönderilemedi")
      		end
      
      		-- Kullanıcılar, bir mesaj gönderildikten sonra giriş kutusunun temizlenmesini bekler
      		textBox.Text = ""
      	end
      end)

3. Sohbet penceresi için bir yedek oluşturun. Bu, TextChatService.MessageReceived'dan alınan mesajları gösteren ScrollingFrame'dır. Bu adım ayrıca mesajları otomatik olarak düzenlemek için bir UIListLayout oluşturur.

   1. Bir başka yeni ScreenGui oluşturun ve bunu StarterGui'ya ebeveyn olarak ekleyin.

   2. Bir ScrollingFrame oluşturun ve bunu ScreenGui'ya ebeveyn olarak ekleyin, ardından bunu istediğiniz gibi yeniden konumlandırın ve yeniden boyutlandırın.

   3. Bir UIListLayout oluşturun ve bunu ScrollingFrame'a ebeveyn olarak ekleyin.

   4. Bir LocalScript oluşturun ve bunu ScrollingFrame'a ebeveyn olarak ekleyin.

   5. Aşağıdaki kodu LocalScript'e ekleyin:

      Client
      local TextChatService = game:GetService("TextChatService")
      
      -- Alınan her mesaj için yeni bir metin etiketi oluşturma fonksiyonu
      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
      
      -- Gelen mesajları dinlemeye başla
      TextChatService.MessageReceived:Connect(addMessageGui)

      TextChatService.MessageReceived olayını kullanırken, mesajın zaten sohbet penceresinde var olup olmadığını kontrol etmek önemlidir. Bu olay, mesaj gönderildiğinde bir kez ve sunucudan alındığında bir kez çağrılır.

4. Oyunuzu, sohbet giriş çubuğunda mesaj göndererek test edin. Mesajların sohbet penceresinde göründüğünü almalısınız. Daha sonra, bir tuşa basıldığında TextBox'a odaklanmak veya sohbet etiketleri eklemek gibi özellikler ekleyerek bu örneği genişletebilirsiniz.