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

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

1. スタジオのプロパティウィンドウで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. チャットウィンドウの代替品を作成します。これは、TextChatService.MessageReceivedから受信したメッセージを表示するScrollingFrameです。このステップでは、メッセージを自動的にレイアウトするための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にフォーカスを当てたり、チャットタグを追加したりして、この例を拡張することができます。