채팅 창 사용자 정의

경험 내 텍스트 채팅 시스템, powered by , 플레이어가 라이브 경험에서 쉽게 서로 소통하고 교류할 수 있도록 합니다.기본 텍스트 채팅을 지원하는 것 외에도, 프론트엔드 사용자 인터페이스를 사용자 정의할 수 있습니다.

채팅 창 구성

전체 채팅 창은 다음으로 구성됩니다:

• 채팅 창
• 입력 바
• 채널 탭 (옵션)

채널 탭은 기본적으로 비활성화되며 각 구성 요소는 Studio 또는 스크립팅을 통해 켜고 끌 수 있습니다.

탐색기 창에서 분기를 확장하고 TextChatService 또는 ChatWindowConfiguration 또는 ChatInputBarConfiguration 또는 ChannelTabsConfiguration를 선택합니다.그런 다음 속성 창에서 구성을 활성화하거나 비활성화하십시오.

When ChannelTabsConfiguration가 활성화되면 각 기본 TextChannel는 다음 표에 설명된 대로 탭에 나타납니다.또한 각 사용자 지정 TextChannel 는 채널의 Name 속성에 해당하는 탭을 생성합니다.

창 모습

전체 채팅 창의 모양은 ChatWindowConfiguration를 통해 사용자 지정할 수 있습니다.

입력란 모습

채팅 입력 바의 모양은 ChatInputBarConfiguration를 통해 사용자 지정할 수 있습니다.

채널 탭 모습

채널 탭 의 모양은 ChannelTabsConfiguration를 통해 사용자 지정할 수 있습니다.

메시지 사용자 정의

기존 UI를 재정의하지 않고 ChatWindowMessageProperties 및 TextChatService.OnChatWindowAdded 콜백을 사용하여 채팅 메시지 본문과 접두사의 모양을 사용자 지정할 수 있습니다.사용자 지정 옵션을 사용하면 채팅 메시지의 모양을 사용자 환경의 테마와 일치시키고, 접두사를 색칠하거나 채팅 태그를 추가하여 다른 사용자 그룹의 메시지를 정렬하거나 강조할 수 있습니다.

색상 사용자 이름

사용자가 채팅 메시지를 보낼 때, 그들의 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

플레이어가 아닌 소스에서 메시지 전송

때로는 공용 주소 시스템이나 비플레이어 캐릭터의 "음성"과 같이 채팅 창에 플레이어가 아닌 대화를 표시하고 싶을 수 있습니다.

시스템

시스템 메시지를 로컬 플레이어에 전달하려면 플레이어의 표시 이름앞에 접두사를 포함하여 기본 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 = "[Guide] Welcome "

-- 표시 이름이 붙은 플레이어에게 "시스템 메시지" 보내기
generalChannel:DisplaySystemMessage(PREFIX .. player.DisplayName)

시스템 메시지의 모양을 사용자 지정하는 방법에 대한 자세한 가이드는 시스템 메시지 사용자 지정을 참조하십시오.

기본 시스템 메시지

When TextChatService.CreateDefaultTextChannels 가 true 일 때, 기본 텍스트 채널 중 하나는 RBXSystem 채널입니다.기본 채팅 스크립트는 이 채널에서 시스템 메시지를 자동으로 표시합니다.이 메시지의 모양을 TextChannel.OnIncomingMessage 콜백을 사용하여 사용자 지정할 수 있습니다.

채팅 시스템에서 자동으로 발생하는 시스템 메시지를 사용자 지정하거나 변경하고 싶을 수도 있습니다.기본 시스템 메시지는 사용자를 위해 지역화되므로, 모습사용자 지정하려면 텍스트 채팅 콜백에서 참조해야 합니다.

아래는 채팅 시스템에서 발생하는 기본 시스템 메시지의 참조입니다:

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)