Text is not visible when re-enabling entity


In my scene I want to use text bubbles. I made it work but now I want to make it disappear after a certain amount of seconds. Easy, I thought. I’ll just use a setTimeOut function and disable the entity.

That works. The problem is; when re-enabling the entity, the text is not visible anymore.
The entity has a text element component and a sprite component. The sprite component is visible when re-enabling the entity.

The typeWriter function is called when clicking on a character.

Here is my code:

DialogueManager.prototype.typeWriter = function (characterName, textBubbleEntity, newText) {
    textBubbleEntity.enabled = true;

    // Assign the new text to the textbubble text
    textBubbleEntity.element.text = newText;

    // This makes the sprite responsive to the amount of text
    textBubbleEntity.sprite.width = (textBubbleEntity.element.width + 20);
    textBubbleEntity.sprite.height = (textBubbleEntity.element.height + 20);

    // Start with no text printed
    textBubbleEntity.element.rangeStart = 0;
    textBubbleEntity.element.rangeEnd = 0;

    // Render a new character every 40ms
    var interval = setInterval(function () {
        textBubbleEntity.element.rangeEnd += 1;

        textBubbleEntity.sprite.height = (textBubbleEntity.element.height + 20);

        // Check if all text is shown
        if (textBubbleEntity.element.rangeEnd >= newText.length) {
            console.log("end reached");
                textBubbleEntity.enabled = false;
                console.log("1 second delay");
            }, 1000);
    }.bind(this), 40);

Here is a quick video to show what is going on.

Here is the project link:

(You have to start in the master scene)

Does anybody have a clue why the text is not showing?

Hi @Ramon,

That’s strange, not sure why it happens. Thinking it may be something with the rangeStart/rangeEnd values of the typewriter? If that’s the case, can you try disabling the typewriter temporary to see if it resolves the issue?

@yaustar any idea why that code hides the text after the first run?

Hey @Leonidas,

Thanks for the quick reply.

Yes, I thought that was the issue as well but I tried it without rangeStart/rangeEnd but sadly the issue persists.

1 Like

I’ve tracked down the issue and will be posting an office hours video in the next 30 mins


Office hours video posted. Jump to 10:20 for the answer

Fixed project: https://playcanvas.com/project/893513/overview/f-textbubble-issue

The dialogue box entity used a sprite component for the blue box and a text element component on the same Entity. It looks like when it is enabled/disabled/enabled, the render order is changed somehow and the text mesh is rendering behind the sprite mesh.

The solution here is to use elements only as it’s under a UI screen entity and ensure that the text entity is in front of the blue box image entity

Link to my personal devtools used in the video: https://github.com/yaustar/yaustar.github.io/tree/master/playcanvas-devtools


Hey @yaustar,

Thanks for finding the solution!

As always the Office Hours video is a huge help in understanding the issue.

My only question is why is it not recommended to use sprites on a world layer?
As it is working in my experience, apart from having an element on the same entity. :wink:

Just wondering.

Anyway, thanks again!

Sprites is fine on the world layer.

However, in your project under a UI screen entity, it’s a bit odd as it’s has no UI functionality such as positioning, margins, etc. It also is unlikely to render in the correct order with UI elements

1 Like