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)
}
})
};