AI Built the Game, WeChat Rejected It: Cocos Subpackage Setup for the 4 MB Limit

I Built a WeChat Mini Game with AI, Then Found It Wouldn't Upload

Cover image

Introduction

Hello everyone, I'm Yi Yuan Programmer, a lead programmer with 8 years of experience in the game industry.

A friend sent me a private message:

Teacher, I recently used AI to make a WeChat mini game. When I was about to put it online, I found I couldn't upload it. Why?

Then sent a screenshot:

Still the 4MB problem

It turned out that the package size exceeded the limit. This usually means you need to optimize the package or split it into subpackages.

Back to the point, this post walks through the actual steps for configuring subpackages in a Cocos WeChat mini game.

1. Why Can't It Be Uploaded?

Let's look at the official documentation:

This is much the same as “a streamer cannot weigh more than 140 jin”

To put it simply, 4 MB is WeChat's restriction on how “small” a mini game must be. But as mini game gameplay gets richer, the package size is clearly not enough, so WeChat introduced subpackage loading.

Then look at the friend's project:

Total code size 4.02MB

The main package alone had already exceeded 4 MB, by just 0.2 MB.

So what should be done?

2. Configuring Subpackages for WeChat Mini Games

Since the official solution is subpackage loading, let's see how to configure it. (Of course, before subpackaging, you should optimize package and asset sizes; this post does not cover that.)

Let's first look at the Cocos official documentation:

Shortened to AB

In the Assets panel, you can see that resources is an Asset Bundle (a green folder with a small b on it).

What an Asset Bundle looks like

Click it and you can see the related properties in the Inspector. There is an option to configure it as an Asset Bundle, but because resources is built-in, you cannot uncheck it. (Other folders can be; once set, you can dynamically use assets through code.)

Grayed out

Directories configured as Asset Bundles can be set as subpackages of the mini game in the following way.

The core 4 steps

After modifying and exporting again, you can see that the main package has become main package + subpackage, and the total size has not changed:

The simplest setup

Uploading again succeeds:

What if the package size exceeds 30 MB?

3. Loading Through a Server

Actually, a solution like this existed before WeChat mini games:

To optimize the wait time on the first launch, we can put what is necessary for running the game into the first package and load other things later (from a server).

Select the folder to put on the server and check Configure as Bundle:

Check it

Build the Bundle:

That's all

Finally, load it through code:

assetManager.loadBundle(
    'https://cdn.example.com/game/game1',
    (err, bundle) => {
        if (err) {
            console.error(err);
            return;
        }

        bundle.loadScene('Game', (err, scene) => {
            if (!err) {
                director.runScene(scene);
            }
        });
    }
);

That's all for how to configure subpackages in a Cocos WeChat mini game. If anything is wrong, please point it out.

Conclusion

Actually, this friend already knows how to use AI to develop games. By the same logic, the subpackage problem could also be handled by AI~

At the end of the post there are many wonderful recommended articles. If you haven't read them, take a look. Thanks for the support!

If you are also interested in AI game development, feel free to message me privately to exchange ideas, collaborate, and discuss!

I am “Yi Yuan Programmer”, a lead programmer with 8 years of experience in the game industry. In game development, I hope to be of help to you, and through you, to help everyone.

PS: My online mini games “Coloring Journey”, “Ants Carry Good Luck”, “Snake Handheld Classic”, “Gravity Maze Ball”, “Screw Driving Challenge” are available for you to search and experience.

To be honest, I want a like and a heart! Please share this post with other friends who might need it. Thanks!