CocosCreator ScrollView optimization series: frame loading

1. Introduction

JS is single-threaded, which means that all tasks need to be queued, and the next task will only be executed when the current task is completed. If the previous task takes a long time, the next task will have to wait.

Cocos Creator is developed using Java Script/Type Script, which is essentially JS and also has the above features. In particular, if used improperly, it is very likely to cause interface lag.

For example, when creating 500 nodes for the Content of a ScrollView, the following interface may become stuck:

PS: There was a loading dialog box during the loading process, but it seemed to never appear because it got stuck.

By reading this article, you will learn how to use the "frame loading" technology to solve the above problems. The final effect comparison is as follows:

2. Analysis of stuck problem

Under normal circumstances, when we create a certain number of child nodes for ScrollView, the code may be like this

public directLoad(length: number) {
    for (let i = 0; i < length; i++) {
        this._initItem(i);
    }
}
 
private _initItem(itemIndex: number) {
    let itemNode = cc.instantiate(this.itemPrefab);
    itemNode.width = this.scrollView.content.width / 10;
    itemNode.height = itemNode.width;
    itemNode.parent = this.scrollView.content;
    itemNode.setPosition(0, 0);
}

Generally speaking, when the value of length is very small, such as 10, the program may seem to be fine when it runs, but if you observe it more carefully, you will find that it will be stuck for a while, but it will end quickly.

In particular, if the value of length reaches a certain level, such as 50+, then this code will appear as shown in the screenshot above - stuck

In the final analysis, the problem is that the time required to create a node through cc.instantiate and setParent for this node is not as small as imagined, of course, not as long as imagined. However, when a certain number of nodes are created continuously, the problem will be magnified, that is, it may take some time to create the node.

If we want to understand this problem more visually, it might look like the following picture.

Direct Load

Obviously, according to the above figure, frames 1 to 4 are completely occupied, causing all other logic during this period to fail to execute (the Loading dialog box cannot appear, the rotation animation is stuck, etc.).

So how to solve it?

3. Solution (theoretical)

Some students may think of using Promise to solve the problem asynchronously. However, in this case, Promise only puts the red code that continuously creates nodes to be executed a little later. But when the red code is executed, it will still be stuck during that period of time, so Promise cannot cope with this situation.

So how should we solve it?

Among them, one solution is what we are going to talk about today, "frame loading" . How do we understand "frame loading"?

As usual, here’s the picture:

Framing Load

With the above picture, it is easier to understand "frame loading". The specific execution process is as follows

1. First, split the time-consuming and stuck code into many small sections
2. Then each frame, allocate a little time to execute these small segments
3. In this way, we leave time for other logic to run in each frame (so the Loading dialog box can appear and the rotation animation can continue)

OK, the theory is clear, but how do we do it in practice?

for example:

1. How to split the code into many small sections?
2. How to allocate some time in each frame to execute these small segments?

At this time, we need to use the ES6 (ES2015) coroutine - Generator , to help us achieve it.

4. Solution (Code)

Taking the code we used in the second section (creating a certain number of child nodes for ScrollView) as an example, we will implement the code into multiple small segments and allocate some time in each frame to execute these small segments.

4.1 Use Generator to split the code into multiple small sections

Before split:

public directLoad(length: number) {
    for (let i = 0; i < length; i++) {
        this._initItem(i);
    }
}
 
private _initItem(itemIndex: number) {
    let itemNode = cc.instantiate(this.itemPrefab);
    itemNode.width = this.scrollView.content.width / 10;
    itemNode.height = itemNode.width;
    itemNode.parent = this.scrollView.content;
    itemNode.setPosition(0, 0);
}

After splitting:

/**
 * (New code) Get the Generator that generates the child node
 */
private *_getItemGenerator(length: number) {
    for (let i = 0; i < length; i++) {
        yield this._initItem(i);
    }
}
 
/**
 * (same as the code before splitting)
 */
private _initItem(itemIndex: number) {
    let itemNode = cc.instantiate(this.itemPrefab);
    itemNode.width = this.scrollView.content.width / 10;
    itemNode.height = itemNode.width;
    itemNode.parent = this.scrollView.content;
    itemNode.setPosition(0, 0);
}

The principle here is to use Generator to create all nodes in one for loop, and split each step of the for loop into a small segment.

Of course, this "split" code cannot run, because it only implements the splitting step. To make it run, we need the second code below

4.2 Allocate some time per frame to execute

Let’s look at the picture we just took.

Framing Load

With the diagram, the resulting code

/**
 * Implement frame loading*/
async framingLoad(length: number) {
    await this.executePreFrame(this._getItemGenerator(length), 1);
}
 
/**
 * Execute Generator logic in frames*
 * @param generator generator * @param duration duration (ms)
 * Each time the Generator operation is executed, the maximum duration of execution.
 * Assuming the value is 8ms, it means that in 1 frame (a total of 16ms), 8ms is allocated for this logic execution*/
private executePreFrame(generator: Generator, duration: number) {
    return new Promise((resolve, reject) => {
        let gen = generator;
        // Create execution function let execute = () => {
 
            // Before execution, record the start timestamp let startTime = new Date().getTime();
 
            // Then keep getting the split code segments from the Generator and executing for (let iter = gen.next(); ; iter = gen.next()) {
 
                // Check if all Generators have been executed // If so, the task is complete if (iter == null || iter.done) {
                    resolve();
                    return;
                }
 
                // After each small code segment is executed, check whether // it has exceeded the maximum execution time we allocated to this frame for these small code segments if (new Date().getTime() - startTime > duration) {
                    
                    // If it exceeds the limit, the current frame will not be executed. Start the timer and execute the next frame this.scheduleOnce(() => {
                        execute();
                    });
                    return;
                }
            }
        };
 
        // Run the execution function execute();
    });
}
 

The code is heavily commented, but there are a few points worth mentioning:

1. In order to know whether these small tasks have been completed, I use Promise. When they are completed, resolve
2. The execution time of each small code segment may not be fixed and may exceed our expected time. For example, we expect to allocate 1ms per frame to execute these small code segments. Assuming that the execution time of each of the first three small code segments is 0.2ms, 0.5ms, and 0.4ms, then in the code I gave, these three small code segments will be executed, and then the current frame will be terminated to continue executing these small code segments, because the time consumption here is already 1.1ms, which is 0.1ms more than the 1ms I set. Of course, you can modify the code yourself to make these executions strictly follow the maximum 1ms to achieve no timeout execution (that is, no longer execute the third small segment)

So far, we have achieved "frame loading" to a certain extent~

All the diagrams and codes in this project are in the Github repository. If you need to run verification, you can directly pull down the project without having to verify the code yourself.

👉👉https://github.com/zhitaocai/CocosCreator-ScrollVIewPlus👈👈

V. Conclusion

1. Although our title is "ScrollView Optimization Series", I am more inclined to "Use frame loading to optimize ScrollView". In this article, the example we give is creating nodes, but I deliberately don’t say "split-frame creation" because I think 「分幀加載」 is a performance optimization solution , which can be "split-frame creation", "split-frame operation", "split-frame calculation", "split-frame rendering", etc.
2. In implementing the framing, we used the this.scheduleOnce function, but you can actually try to execute it on update(dt:number) . Let's try to modify my "test project" to verify it~
3. To use Generator in TypeScript, you also need to modify tsconfig.json in the Cocos project: add es2015 to compilerOptions.lib array

The above is the details of the frame loading of the CocosCreator ScrollView optimization series. For more information about CocosCreator ScrollView optimization frame loading, please pay attention to other related articles on 123WORDPRESS.COM!