Pas het chatvenster aan | Documentatie

Het in-game tekstchat systeem, aangedreven door TextChatService, stelt spelers in staat om gemakkelijk met elkaar te communiceren en te socialiseren in live games. Naast het ondersteunen van de standaard tekstchat, kun je de frontend gebruikersinterface aanpassen.

Configuratie van het chatvenster

Het algemene chatvenster bestaat uit:

Chatvenster
Invoerbalk
Kanaaltabs (optioneel)

Kerncomponenten van het tekstchatvenster.

De kanaaltabs zijn standaard uitgeschakeld en elk component kan in Studio of via scripting aan en uit worden gezet:

In het Explorer venster, vouw de TextChatService tak uit en selecteer ChatWindowConfiguration, ChatInputBarConfiguration of ChannelTabsConfiguration. Schakel vervolgens het component in of uit in het Properties venster.

Wanneer ChannelTabsConfiguration is ingeschakeld, verschijnt elke standaard TextChannel in een tab zoals uiteengezet in de volgende tabel. Bovendien creëert elke aangepaste TextChannel een tab die overeenkomt met de Name eigenschap van het kanaal.

Standaard kanaal	Tabnaam
RBXGeneral	Algemeen
RBXSystem	Algemeen (samengevoegd in een enkele tab met RBXGeneral)
RBXTeam	Team
RBXWhisper	Gebruikersnaam van de andere speler

Uiterlijk van het venster

Het uiterlijk van het algemene chatvenster is aanpasbaar via ChatWindowConfiguration.

ChatWindowConfiguration instantie in de Explorer hiërarchie.

Eigenschap	Beschrijving	Standaard
BackgroundColor3	Color3 achtergrondkleur van het chatvenster.	[25, 27, 29]
BackgroundTransparency	Transparantie van de achtergrond van het chatvenster.	0.3
Enabled	Of het standaard chatvenster moet worden weergegeven. Zet op false om te verbergen.	true
FontFace	Font van de tekst in het chatvenster.	BuilderSansMedium
TextColor3	Color3 van de tekst in het chatvenster.	[255, 255, 255]
TextSize	Grootte van de tekst in het chatvenster.	14
TextStrokeColor3	Color3 van de omtrek voor de tekst in het chatvenster.	[0, 0, 0]
TextStrokeTransparency	Transparantie van de omtrek voor de tekst in het chatvenster.	0.5
HorizontalAlignment	Horizontale uitlijning van het chatvenster.	Left
VerticalAlignment	Verticale uitlijning van het chatvenster.	Top
HeightScale	Hoogteschaal van het chatvenster ten opzichte van de schermgrootte.	1
WidthScale	Breedteschaal van het chatvenster ten opzichte van de schermgrootte.	1

Uiterlijk van de invoerbalk

Het uiterlijk van de chatinvoerbalk is aanpasbaar via ChatInputBarConfiguration.

ChatInputBarConfiguration instantie in de Explorer hiërarchie.

Eigenschap	Beschrijving	Standaard
BackgroundColor3	Color3 achtergrondkleur van de chatinvoerbalk.	[25, 27, 29]
BackgroundTransparency	Transparantie van de achtergrond van de chatinvoerbalk.	0.2
FontFace	Font van de chatinvoertekst.	BuilderSansMedium
PlaceholderColor3	Color3 van de placeholder chatinvoertekst.	[178, 178, 178]
TextColor3	Color3 van de door de speler ingevoerde chatinvoertekst.	[255, 255, 255]
TextSize	Grootte van de chatinvoertekst.	14
TextStrokeColor3	Color3 omtrekkleur van de chatinvoertekst.	[0, 0, 0]
TextStrokeTransparency	Transparantie van de omtrek voor de chatinvoertekst.	0.5
AutocompleteEnabled	Of het tekstchatsysteem autocomplete-opties voor emoji's en commando's toont. Emoji's worden automatisch aangevuld door : gevolgd door niet-witte karakters te typen, terwijl commando's worden automatisch aangevuld door / te typen.	true
KeyboardKeyCode	Extra toets die spelers kunnen indrukken om de focus op de standaard chatinvoerbalk te krijgen.	Slash

Uiterlijk van de kanaaltabs

Het uiterlijk van de kanaaltabs is aanpasbaar via ChannelTabsConfiguration.

ChannelTabsConfiguration instantie in de Explorer hiërarchie.

Eigenschap	Beschrijving	Standaard
BackgroundColor3	Color3 achtergrondkleur van de kanaaltabs.	[25, 27, 29]
BackgroundTransparency	Transparantie van de achtergrond van de kanaaltabs.	0
HoverBackgroundColor3	Color3 achtergrondkleur van tabs wanneer je eroverheen zweeft.	[125, 125, 125]
FontFace	Font voor de tekst in kanaaltabs.	BuilderSansBold
TextColor3	Color3 van de tekst in een niet-geselecteerde tab.	[175, 175, 175]
SelectedTabTextColor3	Color3 van de tekst in een geselecteerde tab.	[255, 255, 255]
TextSize	Grootte van de tekst in kanaaltabs.	18
TextStrokeColor3	Color3 omtrekkleur van de tekst in kanaaltabs.	[0, 0, 0]
TextStrokeTransparency	Transparantie van de omtrek voor tekst in kanaaltabs.	1

Pas berichten aan

Je kunt het uiterlijk van chatberichtlichamen en -prefixen aanpassen met behulp van ChatWindowMessageProperties en TextChatService.OnChatWindowAdded callbacks zonder de bestaande gebruikersinterface te overschrijven. De aanpassingsopties stellen je in staat om het uiterlijk van chatberichten aan te passen aan het thema van je game, en je kunt ook berichten van verschillende gebruikersgroepen sorteren of markeren door prefixen te kleuren of chat-tags toe te voegen.

ChatWindowMessageProperties en OnChatWindowAdded beïnvloeden alleen het uiterlijk van berichten in het chatvenster. Om chatbellen aan te passen, zie Bubble Chat.

Kleur gebruikersnamen

Wanneer een gebruiker een chatbericht verzendt, wordt hun DisplayName weergegeven als het prefixgedeelte van het bericht. Standaard wordt de naam van elke gebruiker gekleurd op basis van hun Player.TeamColor, maar je kunt de kleuren van chatnamen wijzigen met behulp van ChatWindowMessageProperties en OnChatWindowAdded. De volgende LocalScript in StarterPlayerScripts wijst een vooraf bepaalde kleur toe aan elke gebruiker, waarbij willekeurig wordt gekozen uit een tabel van RGB-kleuren.

Gekleurde gebruikersnaam in het chatvenster.

LocalScript - Willekeurige gebruikersnaam kleuren

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

Je kunt ook kleur- en transparantiegradiënten toepassen op de kleur van berichtprefixen met behulp van UIGradient.

Gradiënt gebruikersnaam in het chatvenster.

Gradiënt gebruikersnaam kleuren

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

Aanpassing van rijke tekst

Rijke tekst letterkleur tags kunnen worden gebruikt om chatberichten te formatteren, wat handig is als je specifieke delen van het bericht wilt opmaken. Houd er rekening mee dat rijke tekst geen gradiënten ondersteunt, maar het volgende codevoorbeeld laat zien hoe je de gebruikersnaam (opgeslagen in TextChatMessage.PrefixText) in het berichtlichaam kunt verplaatsen en vervolgens rijke tekst tagging kunt toepassen op alleen het naamgedeelte.

Aanpassing van rijke tekst

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

Berichten van niet-spelerbronnen

Wanneer TextChatService.CreateDefaultTextChannels true is, is een van de standaard tekstkanalen het RBXSystem kanaal. De standaard chatscripts tonen automatisch systeemberichten in deze kanaal. Je kunt het uiterlijk van deze berichten aanpassen met behulp van de TextChannel.OnIncomingMessage callback.

Je wilt misschien de systeemberichten die automatisch door het chatsysteem worden uitgezonden aanpassen of wijzigen. Aangezien de standaard systeemberichten zijn gelokaliseerd voor gebruikers, moet je ze refereren via TextChatMessage.Metadata in je tekstchat callbacks als je hun uiterlijk wilt aanpassen. Bijvoorbeeld, je zou Metadata kunnen gebruiken om systeemberichten, foutberichten of berichten van specifieke systemen in je game te identificeren.

Systeem

Om een systeembericht aan de lokale speler te leveren, zoals "spraak" van een openbare omroep, roep je DisplaySystemMessage() aan vanuit het standaard RBXGeneral kanaal met een prefix voor de gebruikersnaam van de speler.

Client Script

local Players = game:GetService("Players")
local TextChatService = game:GetService("TextChatService")

local player = Players.LocalPlayer
local generalChannel: TextChannel = TextChatService:WaitForChild("TextChannels").RBXGeneral

local PREFIX = "[Gids] Welkom "

-- Stuur "systeembericht" naar speler met hun gebruikersnaam toegevoegd
generalChannel:DisplaySystemMessage(PREFIX .. player.DisplayName)

Afbeelding die een basis systeembericht in het chatvenster toont.

NPC/object

Je kunt ook niet-speler dialoogstijl en chatbellen toevoegen om het te laten lijken alsof berichten afkomstig zijn van een NPC of object binnen de 3D-wereld.

Client Script

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")

	-- Controleer op systeemberichten die metadata bevatten
	if not textChatMessage.TextSource and textChatMessage.Metadata ~= "" then

		-- Voeg prefix toe om het bericht eruit te laten zien alsof het door een speler is verzonden
		properties.PrefixText = string.format("<font color='#%s'>%s: </font>", "#50C999", textChatMessage.Metadata)

		-- Voeg bubble chat toe
		TextChatService:DisplayBubble(Workspace.Statue, textChatMessage.Text)
	end

	return properties
end

local message = "Welkom! Ik zal je gids zijn."
local speakerName = "Oude Ridder"
generalChannel:DisplaySystemMessage(message, speakerName)

Afbeelding die een ridderstandbeeld NPC toont die een chatbericht naar het chatvenster uitzendt, samen met een chatbel boven zijn hoofd.