TextChatService bubble configuration causing display issues on exit transition

Bug Reports Roblox Application and Website Bugs
,
#1

There seems to be an issue with the chat bubbles that doesn’t happen all of the time, potentially fixing itself after a certain amount of time in-server?

The transition for the chat fading away is causing it to turn into a bunch of circles for some reason. In this example we are using per bubble customization (TextChatService.OnBubbleAdded) ImageLabels (with Slice) and UICorner (without UICorner, the ImageLabels with text when displaying the bubble become circular as seen in the fading transition, so we can’t remove this)

Expected behavior

I would expect the bubble not to turn into circles

6 Likes
UICorner under BubbleChatConfiguration does not override the corner radius of chat bubbles
#2

Heres a video of it working normally for someone in-game, at the same time it was bugged for my client.

3 Likes
#3

Also might be worth noting the red bubble is turning white on the exit transition, is there any way to override this? I think it would look much better if it kept its original colour.

2 Likes
#4

Thanks for the report. We’ll follow up when we have an update for you!

#5

image

When one or more of the above child instances are missing under BubbleChatConfiguration, it seems that when the collapse resize triggers, the bubble chat GuiObject and UIBase objects will sometimes ignore the BubbleChatMessageProperties returned from OnBubbleAdded and revert to the default values Roblox gives for new place files BubbleChatConfiguration right as their Tweens are initiated

In absence of a UIGradient:

image
image1920×820 109 KB

In absence of an ImageLabel:

image
image1920×816 111 KB

I say sometimes because in-game the rendering issues only seem to occur intermittently - at least on my client (OSX)

Resources:

image
image1524×516 140 KB

BubbleChatSettings.luau (credit to Webmotion)

game:GetService('TextChatService').OnBubbleAdded = function(message, adornee)
  if not message.TextSource then
    return
  end
  local bubbleProperties = Instance.new('BubbleChatMessageProperties')
  local imageLabel = Instance.new('ImageLabel')
  imageLabel.Image = 'rbxassetid://103510013723480'
  imageLabel.ScaleType = Enum.ScaleType.Slice
  imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
  imageLabel.SliceScale = 1
  local bubbleCorner = Instance.new('UICorner')
  bubbleCorner.CornerRadius = UDim.new(0, 0)
  local bubblePadding = Instance.new('UIPadding')
  bubblePadding.PaddingTop = UDim.new(0, 6)
  bubblePadding.PaddingRight = UDim.new(0, 6)
  bubblePadding.PaddingBottom = UDim.new(0, 6)
  bubblePadding.PaddingLeft = UDim.new(0, 6)
  bubblePadding.Parent = bubbleProperties
  bubbleCorner.Parent = bubbleProperties
  imageLabel.Parent = bubbleProperties
  bubbleProperties.TextSize = 18
  bubbleProperties.FontFace = Font.fromEnum(Enum.Font.BuilderSansMedium)
  bubbleProperties.TextColor3 = Color3.fromHex('#ffffff')
  bubbleProperties.BackgroundColor3 = Color3.fromHex('#ff3333')
  bubbleProperties.FontFace = Font.fromEnum(Enum.Font.BuilderSansMedium)
  imageLabel.ImageColor3 = Color3.fromHex('#ff3333')
  return bubbleProperties
end
1 Like