カスタムテキストチャット UI

この例では、TextChatService クラスを使用して自分のフロントエンドを設計する方法を示しています。デフォルトのテキストチャンネルを CreateDefaultTextChannels から再利用し、デフォルトの UI と比べて非常にシンプルです。

1. スタジオの TextChatService ウィンドウで ChatWindowConfiguration.Enabled および ChatInputBarConfiguration.Enabled プロパティを false に設定して、デフォルトの 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 ScrollingFrame と親にし、ScreenGui に移動し、必要に応じて 再配置 と サイズ変更 を行います。

   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
      
      -- 受信メッセージの受信を開始する
      TextChatService.MessageReceived:Connect(addMessageGui)

      TextChatService.MessageReceived イベントを使用するときは、メッセージがチャットウィンドウにすでに存在するかどうかを確認することが重要です。このイベントは、送信とメッセージをサーバーから受信するときそれぞれ 1回呼び出されます。

4. チャット入力バーにメッセージを送信して、エクスペリエンスをテストします。チャットウィンドウにメッセージが表示されるべきです。次に、キーが押されたときに TextBox を焦点合致させたり、チャットタグ を追加したりするなど、この例を拡張できます。