Facebook Instant Games 远程资源加载方案

Facebook Instant Games 压缩包限制到200M,但是我们游戏过大,只能选择远程加载方案

在网上又没有搜到现成的解决方案,所以在这里记录一下我解决问题的过程

1.首先要改下资源解析那块儿,我这边是把简单粗暴的每个分包native下的文件都放到远程资源服务器了
其中 EzConfig.URL_REMOTE_RESOURCE时我们的资源服务器地址

        cc.assetManager.transformPipeline.insert(function (task) {
            task.output = task.input;
            for (let inputOne of task.input) {
                if (inputOne.isNative && inputOne.url.indexOf('native') > 0) {
                    inputOne.url = EzConfig.URL_REMOTE_RESOURCE + inputOne.url
                }
                // console.log('taskInfo', inputOne, inputOne.url, inputOne.ext);
            }
        }, 2)

2.跨域问题 加载远程资源时提示 access-control-allow-origin
这个需要服务器配置,本身是为了防止资源被盗用,需要再资源服务器上配置跨域标志
我们这边也是简单粗暴 Access-Control-Allow-Origin: * 这个东西很多人提到过就不多说了

3.解决了上面两步之后,可以在web端跑起游戏了,但是在手机上会加载图片资源失败,报error 4930,
刚开始还以为是少了域名配置,后来在facebook后台没找到配置域名的地方,搜索了资料后发现可以使用blob加载Facebook 小游戏加载远程图片,里面提到可以用blob加载,但是作者没有测试
于是查看源码,发现creator已经写了blob加载相关代码,但是因为手机上环境里没有createImageBitmap这个方法,并没有调用blob相关加载,所以只需要补充下加载解析就行了
所以定义一个downLoadImgWithBlob方法并使用之,完美解决

加载相关代码在engine/cocos2d/core/asset-manager/downloader.js

var downloadImage = function (url, options, onComplete) {
    // if createImageBitmap is valid, we can transform blob to ImageBitmap. Otherwise, just use HTMLImageElement to load
    var func = capabilities.imageBitmap && cc.macro.ALLOW_IMAGE_BITMAP ? downloadBlob : downloadDomImage;
    if (window.FBInstant && !capabilities.imageBitmap) { //补充判断facebook只能使用blob加载
        func = downLoadImgWithBlob
    }
    // func = downLoadImgWithBlob
    func.apply(this, arguments);
};

var downLoadImgWithBlob = function (url, options, onComplete) {
    downloadBlob(url, options, (err, blobObj) => {
        // let img = new Image();
        if (!err) {
            let img = new Image();
            img.src = URL.createObjectURL(blobObj);
            img.onload = function () {
                onComplete(err, img)
            }
        } else {
            onComplete(err, blobObj)
        }
    })
};
3赞

之前的方法在ios上面判断正确,在安卓上判断不对,所以又改了下

    if (window.FBInstant && func != downloadBlob) {
        func = downLoadImgWithBlob
    }

这下安卓和ios就都可以正常加载了