Editor API
Return to top
ChatBubble
Edit

Service / ChatBubble

ChatBubble Class ​

Chatting with bubbles above the head

  1. What is an overhead bubble?

  • The bubbles that appear above an object or character's head are usually referred to as "dialogue bubbles" or "comic bubbles". This visual effect is used to represent an object or character speaking, thinking, or conveying information.

  • Conversation bubbles usually contain words, icon or emoticons to convey the language, mood or intention of objects or character.

  • They can be presented as cloud like bubbles, rectangular bubbles, or other shapes, depending on the artistic style and design decisions of the game. (Currently, it is possible to modify bubble or text size, color, etc., but the bubble skin style function is not yet supported. In the future, the interface will be exposed for DIY bubble style.)

By using dialogue bubbles in the game, developers can more vividly show the interaction and dialogue between objects or character, and better understand the story, task prompt or character 'personality characteristics.

Table of contents ​

Accessors ​

bubbleBackgroundColor(): LinearColor
Obtain the background color of bubbles
bubbleDisplayDistance(): number
Obtain the distance between bubbles
bubbleDuration(): number
Obtain the duration of bubbles
bubbleEnabled(): boolean
Get the Boolean value of whether the bubble function is enabled or not.
bubblePositionOffset(): Vector
Get Bubble position offset
bubbleTextColor(): LinearColor
Get bubble text color
bubbleTextFont(): UIFontGlyph
Get Bubble Text Font
bubbleTextSize(): number
Get bubble text size
maxParallelBubbles(): number
Obtain the number of coexisting bubbles on the head when speaking.
onChatBubbleDisplay(): MulticastDelegate<(message: string, parent: GameObject) => void>
Delegate triggered when a text is sent
onMessageReceive(): MulticastDelegate<(mesage: string) => void>
Commission triggered when receiving a certain paragraph of text

Methods ​

displayChatBubbble(parent: GameObject, message: string): void other
Display bubbles

Accessors ​

bubbleBackgroundColor ​

• Static get bubbleBackgroundColor(): LinearColor

• Static set bubbleBackgroundColor(color): void

Obtain the background color of bubbles

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, and bubbles will appear on the top of the cube.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleBackgroundColor = LinearColor.green;
        });
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleBackgroundColor = LinearColor.green;
        });
    }
}

Returns ​

LinearColor

Set bubble background color

Parameters ​

colorLinearColor

bubbleDisplayDistance ​

• Static get bubbleDisplayDistance(): number

• Static set bubbleDisplayDistance(num): void

Obtain the distance between bubbles

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, and bubbles will appear on the top of the cube.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleDisplayDistance = 100;
        });
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleDisplayDistance = 100;
        });
    }
}

Returns ​

number

Set bubble spacing distance

Parameters ​

numnumber

bubbleDuration ​

• Static get bubbleDuration(): number

• Static set bubbleDuration(time): void

Obtain the duration of bubbles

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, and bubbles will appear on the top of the cube.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleDuration = 1;
        });
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleDuration = 1;
        });
    }
}

Returns ​

number

Set bubble duration duration

Parameters ​

timenumber

bubbleEnabled ​

• Static get bubbleEnabled(): boolean

• Static set bubbleEnabled(enable): void

Get the Boolean value of whether the bubble function is enabled or not.

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, and bubbles will appear on the top of the cube.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleEnabled = true;
        });
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleEnabled = true;
        });
    }
}

Returns ​

boolean

Set whether to enable the bubble function.

This is a master switch that produces a bubble effect when an object or character speaks when turned on.

Parameters ​

enable booleanUsage: Whether to enable the bubble function< The default state is false and closed. To use the character chat bubble function, it needs to be set to true.

bubblePositionOffset ​

• Static get bubblePositionOffset(): Vector

• Static set bubblePositionOffset(num): void

Get Bubble position offset

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, and bubbles will appear on the top of the cube.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubblePositionOffset = new Vector(0,0,50);
        });
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubblePositionOffset = new Vector(0,0,50);
        });
    }
}

Returns ​

Vector

Set bubble position offset

Parameters ​

numVector

bubbleTextColor ​

• Static get bubbleTextColor(): LinearColor

• Static set bubbleTextColor(color): void

Get bubble text color

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, and bubbles will appear on the top of the cube.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleTextColor = LinearColor.red;
        });
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleTextColor = LinearColor.red;
        });
    }
}

Returns ​

LinearColor

Set bubble text color

Parameters ​

colorLinearColor

bubbleTextFont ​

• Static get bubbleTextFont(): UIFontGlyph

• Static set bubbleTextFont(textFont): void

Get Bubble Text Font

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, and bubbles will appear on the top of the cube.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleTextFont = UIFontGlyph.BoldItalics;
        });
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleTextFont = UIFontGlyph.BoldItalics;
        });
    }
}

Returns ​

UIFontGlyph

Set Bubble Text Font

Parameters ​

textFontUIFontGlyph

bubbleTextSize ​

• Static get bubbleTextSize(): number

• Static set bubbleTextSize(size): void

Get bubble text size

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, and bubbles will appear on the top of the cube.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleTextSize = 30;
        });
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.bubbleTextSize = 30;
        });
    }
}

Returns ​

number

Set bubble text size

Parameters ​

sizenumber

maxParallelBubbles ​

• Static get maxParallelBubbles(): number

• Static set maxParallelBubbles(num): void

Obtain the number of coexisting bubbles on the head when speaking.

If number=5, it means that five bubbles can exist simultaneously.

By default, three bubbles coexist.

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, and bubbles will appear on the top of the cube.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.maxParallelBubbles = 1;
        });
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            ChatBubble.maxParallelBubbles = 1;
        });
    }
}

Returns ​

number

Set the number of coexisting bubbles on the head when speaking.

You can set the number of coexisting bubbles according to your preferences.

Parameters ​

numnumber

onChatBubbleDisplay ​

• Static get onChatBubbleDisplay(): MulticastDelegate<(message: string, parent: GameObject) => void>

Delegate triggered when a text is sent

Returns ​

MulticastDelegate<(message: string, parent: GameObject) => void>

onMessageReceive ​

• Static get onMessageReceive(): MulticastDelegate<(mesage: string) => void>

Commission triggered when receiving a certain paragraph of text

Returns ​

MulticastDelegate<(mesage: string) => void>

Methods ​

displayChatBubbble ​

• Static displayChatBubbble(parent, message): void other

Display bubbles

Parameters ​

parent GameObjectGameobject objects mounted on bubbles
message stringBubble display text
range: unlimited

Example usage: Create a script called NewScript, place it in the object bar, open the script, modify the original content to the following, save and run the game, and bubbles will appear on the top of the cube.

ts
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            let cube = GameObject.asyncFindGameObjectById("0AB6A7D9");
            ChatBubble.displayChatBubbble(await cube, "hello");
        });
    }
}
@Component
export default class NewScript extends Script {
    protected onStart(): void {
        if(SystemUtil.isClient()){
            UIService.show(newUI);
        }
    }
}

class newUI extends UIScript{
    button:StaleButton;
    protected onStart() {

        this.canUpdate = false;
        this.layer = UILayerScene;

        this.button = StaleButton.newObject(this.rootCanvas);
        this.button.text = "button";
        this.button.visibility = SlateVisibility.Visible;
        this.button.onClicked.add(async ()=>{
            let cube = GameObject.asyncFindGameObjectById("0AB6A7D9");
            ChatBubble.displayChatBubbble(await cube, "hello");
        });
    }
}