واجهة الدردشة النصية المخصصة

هذا المثال يوضح كيفية استخدام TextChatService لتصميم الواجهة الأمامية الخاصة بك. يعيد استخدام قنوات النص الافتراضية من CreateDefaultTextChannels وهو بسيط جدًا مقارنةً بالواجهة الافتراضية.

1. قم بتعطيل واجهة المستخدم الافتراضية التي تأتي مع TextChatService عن طريق تعيين الخصائص ChatWindowConfiguration.Enabled و ChatInputBarConfiguration.Enabled إلى false في نافذة الخصائص في الاستوديو.

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 عندما يتم الضغط على مفتاح أو إضافة علامات الدردشة.