Cocos微信小游戏资源热更方案

由于小游戏4m的限制,游戏资源大多只能放在远程服务器上,Cocos也在第一时间做了很好的支持。

1
2
require('libs/wx-downloader.js');
wxDownloader.REMOTE_SERVER_ROOT = "https://dev.zovew.com/Json/";

这里设置的REMOTE_SERVER_ROOT便是远程资源的根路径,游戏构建完成后直接把res文件夹放到此路径下即可。

Cocos资源寻找顺序为

  1. 本地
  2. 缓存
  3. 服务器

且资源可以使用MD5Cache,MD5值加入了文件名。文件修改后,MD5变化,文件名随之改变,避免了读取缓存的问题。

但是这个地方有个小尴尬,当增加某些游戏资源时(比如增加几个关卡),代码也需要更新,因为Cocos的游戏资源全部都注册在了settings.js文件中。

upload successful

动态增加游戏关卡,实现的方案也有其他,可以根据接口数据,动态绘制关卡,但是工作量庞大,策划人员后台配置新关卡也麻烦。作为一个懒人,十分不想这么办。

这个settings文件打开看了一下,发现了一个好方案:
这个settings.js里面只是一段Json而已,服务器返回这段Json可以有同样的作用。

修改后的game.js

1
2
3
4
5
6
7
8
9
10
11
12
13
require('libs/weapp-adapter-min');
var Parser = require('libs/xmldom/dom-parser');
window.DOMParser = Parser.DOMParser;
require('libs/wx-downloader.js');
wxDownloader.REMOTE_SERVER_ROOT = "https://dev.zovew.com/Json/";
wx.request({
url: 'https://dev.zovew.com/Json/setting.json',
success: (res) => {
var response = res.data;
window._CCSettings = response;
require('main');
},
});

–补充–
wx.request在手机表现有问题

1
2
3
4
5
6
7
8
9
10
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
var response = xhr.responseText;
window._CCSettings = JSON.parse(response);
require('main');
}
};
xhr.open("GET", 'https://dev.zovew.com/Json/setting.json', true);
xhr.send();

这两种方式在开发工具里是ok的,真机测试只有XMLHttpRequest可用,尚不明原因。

经测试,完全ok~~~

下面是完善后的微信项目,settings.js已删除,game.js、main.js、cocos2d-js-min.js几乎不改,project.js是游戏代码,不再使用MD5,改为版本号了。框架搭好,project也是可以不动的。因为修改了project又要提交审核了。

upload successful

坑点:微信开发工具的缓存死活清不掉,settings.json明明更新了,清缓存清cookie各种清+重启都不行,建议拼接个时间戳:

xhr.open(“GET”, wxDownloader.REMOTE_SERVER_ROOT + ‘/settings.json?’ + (new Date().getTime()), true);

—项目模板地址 Github—
(自行修改服务器地址)