チャットウィンドウをカスタマイズする

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

経験中のテキストチャットシステム、 powered by 、プレイヤーがライブエクスペリエンスで簡単にコミュニケーションし、お互いに交流できるようにします。デフォルトのテキストチャットをサポートするとともに、フロントエンドユーザーインターフェイスをカスタマイズできます。

チャットウィンドウの構成

全体のチャットウィンドウは次のようになっています:

  • チャットウィンドウ
  • 入力バー
  • チャンネルタブ (オプション)
Core components of the text chat window.

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

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

When ChannelTabsConfiguration が有効になっていると、デフォルトの TextChannel が次の表に示すようにタブに表示されます。また、それぞれのカスタム TextChannel は、チャネルの Name プロパティに対応するタブを作成します。

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

ウィンドウの表示

全体のチャットウィンドウの外観は、ChatWindowConfiguration を通じてカスタマイズ可能です。

ChatWindowConfiguration instance in Explorer hierarchy.
性質説明デフォルト
BackgroundColor3Color3 チャットウィンドウの背景色。[25, 27, 29]
BackgroundTransparencyチャットウィンドウの背景の透明度。0.3
FontFaceFont チャットウィンドウテキスト。BuilderSansMedium
TextColor3Color3 チャットウィンドウテキスト。[255, 255, 255]
TextSizeチャットウィンドウテキストのサイズ。14
TextStrokeColor3Color3 チャットウィンドウテキストのストローク。[0, 0, 0]
TextStrokeTransparencyチャットウィンドウテキストのストロークの透明度。0.5
HorizontalAlignmentチャットウィンドウの横向き配置。Left
VerticalAlignmentチャットウィンドウの垂直配置。Top
HeightScaleチャットウィンドウの高さスケールは、画面サイズに対して。1
WidthScaleチャットウィンドウの幅スケールは、画面サイズに対して。1

入力バーの表示

チャット入力バーの外観は ChatInputBarConfiguration でカスタマイズ可能です。

ChatInputBarConfiguration instance in Explorer hierarchy.
性質説明デフォルト
BackgroundColor3Color3 チャット入力バーの背景色。[25, 27, 29]
BackgroundTransparencyチャット入力バーの背景の透明度。0.2
FontFaceFont チャット入力テキスト。BuilderSansMedium
PlaceholderColor3Color3 プレースホルダーチャット入力テキスト。[178, 178, 178]
TextColor3Color3 プレイヤーが入力したチャットテキスト。[255, 255, 255]
TextSizeチャット入力テキストのサイズ。14
TextStrokeColor3Color3 チャット入力テキストのストローク色。[0, 0, 0]
TextStrokeTransparencyチャット入力テキストのストロークの透明性。0.5
AutocompleteEnabledテキストチャットシステムが、絵文字と コマンド の自動完了オプションを表示するかどうか。絵文字は、: を打って非白スペース文字を続け、コマンドは / を打って完了します。true
KeyboardKeyCode追加のキープレイヤーが押すと、デフォルトのチャット入力バーに焦点が合うようになります。Slash

チャンネルタブの表示

チャンネルタブ の外観は、ChannelTabsConfigurationを通じてカスタマイズ可能です。

ChannelTabsConfiguration instance in Explorer hierarchy.
性質説明デフォルト
BackgroundColor3Color3 チャンネルタブの背景色。[25, 27, 29]
BackgroundTransparencyチャンネルタブの背景の透明度。0
HoverBackgroundColor3Color3 タブをホバーするときの背景色。[125, 125, 125]
FontFaceFont チャンネルタブのテキスト用。BuilderSansBold
TextColor3Color3 選択されていないタブのテキスト。[175, 175, 175]
SelectedTabTextColor3Color3 選択したタブのテキスト。[255, 255, 255]
TextSizeチャンネルタブのテキストのサイズ。18
TextStrokeColor3Color3 チャンネルタブのテキストのストローク色。[0, 0, 0]
TextStrokeTransparencyチャンネルタブのテキスト用のストロークの透明度。1

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

既存の UI をオーバーライドせずに ChatWindowMessageProperties および TextChatService.OnChatWindowAdded コールバックを使用して、チャットメッセージ体とプレフィックスの外観をカスタマイズできます。カスタマイズオプションでは、チャットメッセージの外観をカスタマイズして、エクスペリエンスのテーマに合わせることができ、プレフィックスの色付けや チャットタグの追加 で、異なるユーザーグループからメッセージを並べ替えたり強調したりすることもできます。

ユーザー名の色

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

Colored user name in the chat window.
ローカルスクリプト - ランダムユーザー名の色

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 を使用して、色と透明度のグラデーションを色メッセージのプレフィックスに適用できます。

Gradient user name in the chat window.
グラデーションユーザー名カラー

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 ) をメッセージ体に移動し、その後リッチテキストタグを名前のみに適用する方法を示しています。

Rich text customization of user name in the chat window.
リッチテキストのカスタマイズ

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

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

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

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

システム

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

クライアントスクリプト

local Players = game:GetService("Players")
local TextChatService = game:GetService("TextChatService")
local player = Players.LocalPlayer
local generalChannel: TextChannel = TextChatService:WaitForChild("TextChannels").RBXGeneral
local PREFIX = "[Guide] Welcome "
-- 表示名を付けたプレイヤーに「システムメッセージ」を送信
generalChannel:DisplaySystemMessage(PREFIX .. player.DisplayName)
Image showing a basic system message in the chat window.

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 = "Welcome! I will be your guide."
local speakerName = "Ancient Knight"
generalChannel:DisplaySystemMessage(message, speakerName)
Image showing a knight statue NPC broadcasting a chat message to the chat window, along with a chat bubble above its head.