[UI] Structure, efficiency, and superior controls – Cocos Creator

Hello all!

I’m utilizing Cocos Creator model 3.8.8.

Given my expertise creating with the Unity recreation engine, I’d wish to ask: is it a good suggestion to make use of Structure (together with Widget) elements at runtime in Cocos Creator? Or ought to it’s prevented in any respect prices? This is applicable primarily to cell platforms: net, cell, and Android.

Let’s assume there’s a button:

I want to position 3 parts on it: textual content, an icon and one other textual content:

First, after all, the weather would should be aligned. Second, I’d like to contemplate two doable use instances. Each texts could be arbitrary and altered at runtime.

Case 1. If the sum of the widths of the primary textual content, icon, and second textual content is bigger than the width of the button itself, then the scale of all three of those parts must be lowered. Generally, from this:

It turned out one thing like this:

Is it doable to implement this utilizing solely built-in elements, with none strains of code? It appears not.

Case 2. Solely the primary textual content ought to change dimension. One thing like this:

Once more, is it doable to implement this utilizing solely built-in elements, with out writing any code? It appears not.

Now in regards to the code. The documentation says:

Observe : if the Structure ‘s configuration is ready in runtime, the outcomes should be up to date till the following body, except you manually name updateLayout API.

I wrote some code that tries to get the brand new dimension of a Label when new textual content is entered into it. After all, if I modify the textual content and instantly take the scale, then I’ll have the outdated dimension. I attempt to look forward to the following body. The scale is outdated. So I wait for one more body. After which I handle to get the brand new dimension. I did one thing comparable, however enclosed the Label in a Structure that adjusts its dimension to its kids. I used to be solely capable of get the brand new dimension after three frames. Outcome:

• Label: +2 frames
• Structure: +3 frames

How dependable can I depend on this knowledge? That’s, the Label dimension will all the time replace each 2 frames, and the Structure dimension each 3 frames. Or is there another dependable solution to wait?

As a substitute: Label.updateRenderData() and Structure.updateLayout(). However I’m concerned with what’s extra ideologically appropriate.

I’m additionally questioning if there’s a solution to discover out the textual content dimension with out utilizing a visible (with out truly inserting the Label)? One thing like a perform:

perform calcTextSize(textual content: string, font: Font, fontSize: quantity): Dimension {
    // ...
}