Show textual content character by character – Cocos Creator

Hello all!

I exploit Cocos Creator model 3.8.3.

Have a look at the next instance:

There are two objects right here. One is only a sprite. The second has a Label element. The primary object has the next properties:

The second object has the next properties:

I must drive the textual content to be output at, for instance, 20 characters per second.

The best factor I can do (with out going into particulars about pace) is to simply add characters (with out the nuances of surrogate pairs):

this.label.string += character;

Sadly it will have two issues for me:

First, coming into added textual content will shift already added textual content. It was like this:

Then it grew to become like this:

Including an area and ‘T’ character moved the remainder of the textual content. I don’t want this sort of habits.

Secondly, unfinished phrases attempt to squeeze into the free area. In the event that they succeed, there can be a subsequent shift when the finished phrase doesn’t match into the identical area. Have a look at the instance:

I don’t like that the letter ‘t’ took up area on the identical line. After including the subsequent letter, every thing will fall into place:

However the displacement impact itself has already labored.

How can I remove these two results which can be undesirable for me?

I made a decision to attempt a trick with the RichText element. Listed below are the settings of the article with this element:

Including a personality is completed as follows:

let leftText = textual content.substring(0, index);
let rightText = textual content.substring(index);
this.richText.string = `${leftText}${rightText}`;

It’s gotten higher, however there are nonetheless plenty of issues:

1. Some textual content shaking might happen.
2. There isn’t any “Overflow Processing” property to have the ability to choose “SHRINK”.
3. The “colour” tag breaks into phrases.

Let’s enter the next textual content into RichText:

Hiya! That is an instance textual content.

Outcome:

Let’s add character ‘t’ to the seen ones:

Hiya! That is an instance text.

Outcome:

As you possibly can see, the “colour” tag splits the phrase into two phrases. Is that this a bug? So far as I bear in mind, an identical trick labored in Unity.

On the whole, how can I clear up this downside?

And generally, does the engine have any capabilities for working with textual content? For instance, how can I discover out the textual content dimension with out coming into it into a visible element after which studying the values ​​when every thing is utilized?