Cocos2.x+ WeChat mini-games use remote resources (reduce package size)

       Why does the console log output frequently disappear?
　　Why does the wxss code fail frequently? Why is
　　the wxml layout in a mess? 　　Is  it the loss 
　　of morality?

---

foreword

When we use cocos to develop WeChat games, we often need to use some resources, such as pictures, sound effects and animations. Too many resources will cause the game package to be too large, which will bring bad user experience to players. Therefore, we need to use remote resource bundle technology to reduce the package size.

---

text

1. Open cocos, enter the project and create a new resources directory under assets

 This directory is the default remote loading directory

Of course, if you have other directories, you can also create a new folder yourself. For example, I call it res here.

 Set it according to the picture because it is a remote resource that needs to be loaded on the server. It is recommended to use zip compression. If it is not compressed and packaged, it is inevitable that there will be a probability of convulsions when downloading pictures. -v-

2. Check the remote package and verify md5 in the build release

 Then fill in the resource server address with your object storage address and post it first

This folder is the remote resource package 

 We directly throw this remote on the object storage

For example, I put it in the root directory of my object storage and then go back and fill in the remote resource storage address

Just click on a file to view the details and take a remote resource address

 

Fill it out and publish another version, then re-upload the remote folder to the object storage 

3. When the game starts, we need to load the remote bundle. If you have customized a bundle directory res like me, you can write it like this:

const { ccclass, property } = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Node)
    bar: cc.Node = null;//显示进度百分比

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}
    start() {
        cc.assetManager.loadBundle('res', {//res就是我之前新建的bundle名称
            onFileProgress: function (e) {
                _this.bar.getComponent(cc.Label).string = Math.floor(e.progress) + '%'
                //将百分比赋值给页面上的文本
            }
        }, (err, bundle) => {
            if (err) {
                cc.error(err);
                cc.assetManager.cacheManager.clearCache();
                //如果报错就重新加载
                this.start()
                return;
            }
        });

    }
    
    // update (dt) {}
}

4. After the build is successfully released, we can test the game through the WeChat developer tools.

After importing the developer tools, change the four default values ​​of 5000 in game.json to a little longer. Here is the timeout period for your request or download. Sometimes the network speed is slow by 100 million points. The remote package volume is large by 100 million points, and an error will be reported. Remember to change it.

Then attach a loading picture

 

---

 

Summarize

So far, we have completed the process of using the remote resource bundle, reducing the package size and making the game smoother.