Using Service Workers with Creator 3.8.X

Hello,

Currently, I’m implementing service workers to execute some multithreaded tasks.
I could not find official documentation on how to implement / handle service workers inside the engine and I would have some questions on how to proceed with them:

  • How should we implement workers within the game? Are there any security or usage limitations?
  • How should we setup the worker in the preview mode?
  • How should we bundle the workers when releasing?

Hello. About worker, there are different implementations on each platform. On the native platform, system threads can be used, on the web, web workers can be used, and some mini programs use platform-specific methods. The engine does not provide a unified encapsulation of this.

1 Like

Thanks for your reply! I’m playing around with service workers for web platforms now, so thanks for clarifying the possible approaches in the different scenarios available.

Would you have any examples/open-source projects to share on this topic?

If it is related to web, you can use web worker, you can refer to this documentation: mozilla.

Thanks for the documentation.

Sorry, maybe I was not clear with my question. I do have some shallow knowledge of how to deal with web workers. My questions are more related to best practices while integrating the cocos engine references into the service workers.

In the scenario I’m working with, I want to use the service worker to generate the chunks of my Voxel World. For that to happen I need to import some script references into the worker .js file, but not entirely sure how to properly do it with Cocos.

The relevant snippet of the code would be this one for reference:

    generateWorld(): void {
        this.cleanUpWorldData();

        for (let x = 0; x < this.mapSizeInChunks; x++) {
            for (let z = 0; z < this.mapSizeInChunks; z++) {
                // this will be moved to the worker.js
                const data = new ChunkData(
                    this,
                    new Vec3(x * this.chunkSize, 0, z * this.chunkSize),
                    this.chunkSize,
                    this.chunkHeight
                );

                const terrainData = this.terrainGenerator.generateChunkData(data, this.seedOffSet);
                this.chunkDataDictionary.set(data.worldPosition, terrainData);
            }
        }

        for (const data of this.chunkDataDictionary.values()) {
             // this will be moved to the worker.js
            const meshData = Chunk.getMeshData(data);
            const chunkObject = instantiate(this.chunkPrefab);

            chunkObject.setPosition(data.worldPosition);

            const chunkRenderer = chunkObject.getComponent(ChunkRenderer)!;
            this.chunkDictionary.set(data.worldPosition, chunkRenderer);

            chunkRenderer.initChunk(data);
            chunkRenderer.updateChunkWithData(meshData);

            this.node.addChild(chunkObject);
        }
    }

So what would be the proper way to import such script references into the worker in this case?

I assume I would need to bundle the worker into the final .js file and use it from there, but I’m still confused about how the bundle process should behave in this case.

@mr.kylin @iwae sorry for the tagging and disturbance but could you guys shed some light on this topic? Currently, I’m quite confused about how to move forward with the bundling process in this case.

Perhaps the best way to learn Cocos is to go to GitHub and check out more PRs. For your question, you may want to take a look at this PR, which should inspire your thinking. For Cocos, the current worker implementation is not cross-platform. So if you need an out-of-the-box method that works on any platform, you may need to refer to this PR and implement it yourself.

Add worker for cocos native by haroel · Pull Request #16547 · cocos/cocos-engine (github.com)

1 Like

@qq544430497 Thanks so much for sharing this! Indeed, I’m trying lately to get more of the deep gist of Cocos.

Even though I’m aware that effort is being made to implement native threads into the engine, my question is more specific about using web Service Workers for web games with Cocos Creator.

More specifically how I should behave and best practices while building a worker.js file that contains Cocos Creator objects/class references.

  • How we should set up the bundling process? Should we bundle it at all?
  • How to test the worker in the dev environment? Iwae once suggested that the behaviour of service workers inside the IDE and outside the IDE should be done differently, by using a byte array buffer approach to load the code.

So is more regarding how to efficiently integrate Service Workers and best practices.

I feel this knowledge base can help and be beneficial to be shared with the community since can help to build more performative games when the complexity of the scene is too great.

I want to share this knowledge in the Cocoscraft repo as a way to show how it can help developers optimize their games.