チャットウィンドウのカスタマイズ

*このコンテンツは、ベータ版のAI(人工知能)を使用して翻訳されており、エラーが含まれている可能性があります。このページを英語で表示するには、 こちら をクリックしてください。

ゲーム内テキストチャットシステムは、TextChatServiceによって提供され、プレイヤーはリアルタイムのゲーム内で簡単にコミュニケーションを取り、交流することができます。デフォルトのテキストチャットをサポートするだけでなく、カスタマイズが可能です。

チャットウィンドウの設定

全体的なチャットウィンドウは次の要素で構成されています:

  • チャットウィンドウ
  • 入力バー
  • チャンネルトラブ(オプション)
テキストチャットウィンドウのコアコンポーネント。

チャンネルトラブはデフォルトで無効になっており、各コンポーネントはスタジオまたはスクリプトを通じて切り替えることができます:

エクスプローラーウィンドウで、TextChatServiceブランチを展開し、ChatWindowConfigurationChatInputBarConfiguration、またはChannelTabsConfigurationを選択します。次に、プロパティウィンドウでコンポーネントを有効または無効にします。

ChannelTabsConfigurationが有効化されると、各デフォルトのTextChannelは次の表に示すとおり、タブとして表示されます。また、各カスタムTextChannelは、チャネルのNameプロパティに対応するタブを作成します。

デフォルトチャンネルタブ名
RBXGeneral一般
RBXSystem一般RBXGeneralと1つのタブに統合)
RBXTeamチーム
RBXWhisper他のプレイヤーのユーザー名

ウィンドウの外観

全体的なチャットウィンドウの外観はChatWindowConfigurationを使ってカスタマイズできます。

エクスプローラーの階層内のChatWindowConfigurationインスタンス。
プロパティ説明デフォルト
BackgroundColor3Color3 チャットウィンドウの背景色。[25, 27, 29]
BackgroundTransparencyチャットウィンドウの背景の透明度。0.3
Enabledデフォルトのチャットウィンドウを表示するかどうか。隠すにはfalseに設定。true
FontFaceチャットウィンドウのテキストのFontBuilderSansMedium
TextColor3チャットウィンドウのテキストのColor3[255, 255, 255]
TextSizeチャットウィンドウのテキストのサイズ。14
TextStrokeColor3チャットウィンドウのテキストのストロークのColor3[0, 0, 0]
TextStrokeTransparencyチャットウィンドウのテキストのストロークの透明度。0.5
HorizontalAlignmentチャットウィンドウの水平配置。Left
VerticalAlignmentチャットウィンドウの垂直配置。Top
HeightScale画面サイズに対するチャットウィンドウの高さのスケール。1
WidthScale画面サイズに対するチャットウィンドウの幅のスケール。1

入力バーの外観

チャット入力バーの外観はChatInputBarConfigurationを使ってカスタマイズできます。

エクスプローラーの階層内のChatInputBarConfigurationインスタンス。
プロパティ説明デフォルト
BackgroundColor3Color3 チャット入力バーの背景色。[25, 27, 29]
BackgroundTransparencyチャット入力バーの背景の透明度。0.2
FontFaceチャット入力テキストのFontBuilderSansMedium
PlaceholderColor3プレースホルダーチャット入力テキストのColor3[178, 178, 178]
TextColor3プレイヤーが入力したチャット入力テキストのColor3[255, 255, 255]
TextSizeチャット入力テキストのサイズ。14
TextStrokeColor3チャット入力テキストのストロークの色のColor3[0, 0, 0]
TextStrokeTransparencyチャット入力テキストのストロークの透明度。0.5
AutocompleteEnabledテキストチャットシステムが絵文字とコマンドのオートコンプリートオプションを表示するかどうか。絵文字は:の後に空白以外の文字を入力することでオートコンプリートされ、コマンドは/を入力することでオートコンプリートされます。true
KeyboardKeyCodeプレイヤーがデフォルトのチャット入力バーにフォーカスを当てるために押すことができる追加のキー。Slash

チャンネルトラブの外観

チャンネルトラブの外観はChannelTabsConfigurationを使ってカスタマイズできます。

エクスプローラーの階層内のChannelTabsConfigurationインスタンス。
プロパティ説明デフォルト
BackgroundColor3Color3 チャンネルトラブの背景色。[25, 27, 29]
BackgroundTransparencyチャンネルトラブの背景の透明度。0
HoverBackgroundColor3Color3 タブにカーソルを合わせたときの背景色。[125, 125, 125]
FontFaceチャンネルトラブのテキストのFontBuilderSansBold
TextColor3未選択のタブ内のテキストのColor3[175, 175, 175]
SelectedTabTextColor3選択されたタブ内のテキストのColor3[255, 255, 255]
TextSizeチャンネルトラブのテキストのサイズ。18
TextStrokeColor3チャンネルトラブのテキストのストロークの色のColor3[0, 0, 0]
TextStrokeTransparencyチャンネルトラブのテキストのストロークの透明度。1

メッセージのカスタマイズ

ChatWindowMessagePropertiesおよびTextChatService.OnChatWindowAddedコールバックを使用して、チャットメッセージの本文やプレフィックスの外観をカスタマイズできます。これにより、既存のUIをオーバーライドすることなく、チャットメッセージの外観をゲームのテーマに合わせて変更したり、異なるユーザーグループからのメッセージを色分けしたりチャットタグを追加したりすることができます。

ユーザー名の色付け

ユーザーがチャットメッセージを送信すると、そのDisplayNameがメッセージのプレフィックス部分として表示されます。デフォルトでは、各ユーザーの名前はそのPlayer.TeamColorに従って色付けされますが、ChatWindowMessagePropertiesおよびOnChatWindowAddedを使用してチャット名の色を変更できます。以下のLocalScriptは、StarterPlayerScripts内で各ユーザーに予め決められた色を割り当て、RGBカラーテーブルからランダムに選びます。

チャットウィンドウ内の色付けされたユーザー名。
ローカルスクリプト - ランダムユーザー名の色

local TextChatService = game:GetService("TextChatService")
local chatWindowConfiguration = TextChatService.ChatWindowConfiguration
local nameColors = {
Color3.fromRGB(255, 0, 0),
Color3.fromRGB(0, 255, 0),
Color3.fromRGB(0, 0, 255),
Color3.fromRGB(255, 255, 0),
}
TextChatService.OnChatWindowAdded = function(message: TextChatMessage)
local properties = chatWindowConfiguration:DeriveNewMessageProperties()
local textSource = message.TextSource
if textSource then
local index: number = (textSource.UserId % #nameColors) + 1
local randomColor: Color3 = nameColors[index]
properties.PrefixTextProperties = chatWindowConfiguration:DeriveNewMessageProperties()
properties.PrefixTextProperties.TextColor3 = randomColor
end
return properties
end

また、UIGradientを使用して、メッセージプレフィックスに色や透明度のグラデーションを適用できます。

チャットウィンドウ内のグラデーションユーザー名。
グラデーションユーザー名の色

local TextChatService = game:GetService("TextChatService")
local chatWindowConfiguration = TextChatService.ChatWindowConfiguration
local gradient = Instance.new("UIGradient")
gradient.Color = ColorSequence.new{
ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 0)),
ColorSequenceKeypoint.new(0.5, Color3.fromRGB(255, 255, 0)),
ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 0, 255))
}
TextChatService.OnChatWindowAdded = function(message: TextChatMessage)
local properties = chatWindowConfiguration:DeriveNewMessageProperties()
local textSource = message.TextSource
if textSource then
properties.PrefixTextProperties = chatWindowConfiguration:DeriveNewMessageProperties()
gradient:Clone().Parent = properties.PrefixTextProperties
end
return properties
end

リッチテキストのカスタマイズ

リッチテキストのフォントカラータグを使用してチャットメッセージをフォーマットすることができ、メッセージの特定の部分にフォーマットを適用するのに便利です。リッチテキストはグラデーションをサポートしていないことに注意してくださいが、以下のコードサンプルは、ユーザー名(TextChatMessage.PrefixTextに保存)をメッセージの本文に移動し、名前部分にのみリッチテキストタグを適用する方法を示しています。

チャットウィンドウ内のユーザー名のリッチテキストカスタマイズ。
リッチテキストのカスタマイズ

local TextChatService = game:GetService("TextChatService")
local Players = game:GetService("Players")
local chatWindowConfiguration = TextChatService.ChatWindowConfiguration
local gradient = Instance.new("UIGradient")
gradient.Color = ColorSequence.new{
ColorSequenceKeypoint.new(0, Color3.fromRGB(255, 0, 0)),
ColorSequenceKeypoint.new(0.5, Color3.fromRGB(255, 255, 0)),
ColorSequenceKeypoint.new(1, Color3.fromRGB(255, 0, 255))
}
TextChatService.OnChatWindowAdded = function(message: TextChatMessage)
local properties = chatWindowConfiguration:DeriveNewMessageProperties()
if message.TextSource then
properties.PrefixText = "[VIP]"
properties.Text = string.format("<font color='#00ffff'>%s</font>", message.PrefixText) .. " " .. message.Text
properties.PrefixTextProperties = chatWindowConfiguration:DeriveNewMessageProperties()
gradient:Clone().Parent = properties.PrefixTextProperties
end
return properties
end

プレイヤー以外のソースからのメッセージ

TextChatService.CreateDefaultTextChannelstrueである場合、デフォルトのテキストチャンネルの1つはRBXSystemチャンネルです。デフォルトのチャットスクリプトは、システムメッセージをこのチャンネルに自動的に表示します。これらのメッセージの外観は、TextChannel.OnIncomingMessageコールバックを使用してカスタマイズできます。

チャットシステムによって自動的に発信されるシステムメッセージをカスタマイズまたは変更したい場合があります。デフォルトのシステムメッセージはユーザー向けにローカライズされているため、メッセージの外観をカスタマイズしたい場合は、テキストチャットコールバック内でTextChatMessage.Metadataを参照する必要があります。たとえば、Metadataを使用して、システムメッセージ、エラーメッセージ、またはゲーム内の特定のシステムからのメッセージを識別できます。

システム

公共アドレスシステムからの「スピーチ」など、ローカルプレイヤーにシステムメッセージを届けるには、デフォルトのRBXGeneralチャンネルからDisplaySystemMessage()を呼び出し、プレイヤーの表示名の前にプレフィックスを追加します。

クライアントスクリプト

local Players = game:GetService("Players")
local TextChatService = game:GetService("TextChatService")
local player = Players.LocalPlayer
local generalChannel: TextChannel = TextChatService:WaitForChild("TextChannels").RBXGeneral
local PREFIX = "[ガイド] ようこそ "
-- プレイヤーの表示名を追加してシステムメッセージを送信
generalChannel:DisplaySystemMessage(PREFIX .. player.DisplayName)
チャットウィンドウに基本的なシステムメッセージが表示されている画像。

NPC/オブジェクト

プレイヤー以外のダイアログもスタイライズでき、チャットバブルを追加して、メッセージが3Dワールド内のNPCやオブジェクトから発信されているように見せることができます。

クライアントスクリプト

local TextChatService = game:GetService("TextChatService")
local Workspace = game:GetService("Workspace")
local generalChannel: TextChannel = TextChatService:WaitForChild("TextChannels").RBXGeneral
TextChatService.OnIncomingMessage = function(textChatMessage: TextChatMessage)
local properties = Instance.new("TextChatMessageProperties")
-- メタデータを含むシステムメッセージをチェック
if not textChatMessage.TextSource and textChatMessage.Metadata ~= "" then
-- プレイヤーが送信したようにメッセージにプレフィックスを追加
properties.PrefixText = string.format("<font color='#%s'>%s: </font>", "#50C999", textChatMessage.Metadata)
-- バブルチャットを追加
TextChatService:DisplayBubble(Workspace.Statue, textChatMessage.Text)
end
return properties
end
local message = "ようこそ!あなたのガイドになります。"
local speakerName = "古代の騎士"
generalChannel:DisplaySystemMessage(message, speakerName)
チャットウィンドウにメッセージを放送している騎士の像NPCの画像、その頭上にはチャットバブルがあります。
©2026 Roblox Corporation。Roblox(ロブロックス)、RobloxロゴおよびPowering Imaginationは、米国並びにその他の国における登録商標および非登録商標です。