cocos creator加载和预加载（进度条）远程服务器资源教程

相信很多开发微信小游戏的小伙伴都清楚，微信为了用户对小游戏更好的体验，对上传的包体整体大小设置了4mb以下（4mb!  emmm~~~），那么只好把游戏的一些资源放在服务器上了。

废话不多说，我以cocos creator引擎加载几张放在apache服务器上的图片为例

ps：我使用的服务器是自己的，另外服务器使用的是centos的操作系统

在服务器上搭建apache服务器请看centos6.7下搭配apache+php+mysql环境 - CSDN博客

首先使用xftp软件在服务器上放两张图片资源image1.png、image2.png（注意路径！是你网站站点下！）

然后在这里建一个php文件（注意路径！是你网站站点下！）

php文件内容如下：

在cocos creator加载资源代码如下：

现在，很多小伙伴会不解：在服务器上的那个php文件有什么用处呢？

其实这个php起到了中转的作用，如果你用cocos creator直接加载服务器上的资源的话，会受到浏览器的 CORS 跨域策略限制，所以我们就需要这个php文件了，这个时候我们直接访问这个php文件，并把我们需要的资源路径参数传给它，让这个php帮我们加载资源，然后在它返回的数据添加头信息
header('Access-Control-Allow-Origin:*');
header('Control-type:image/png');
有了这个头信息，浏览器才会允许你加载资源！

现在我们再说说预加载并设置进度条！

首先新建节点、挂progressBar组件和新建一个javascript文件！

最后javaScript示例代码：

cc.Class({
    extends: cc.Component,

    properties: {
        progressBar:{
            default:null,
            type:cc.ProgressBar
        },

    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this._urls = [
            {url:'http://127.0.0.1（这里填你的服务器ip)/test.php?url=http://127.0.0.1（这里填你的服务器ip)/image1.png', type:'png'},
            {url:'http://127.0.0.1（这里填你的服务器ip)/test.php?url=http://127.0.0.1（这里填你的服务器ip)/image2.png', type:'png'},
            
        ];

        this.resource = null;
        this.progressBar.progress = 0;

        this._clearAll();

        cc.loader.load(this._urls, this._progressCallback.bind(this), this._completeCallback.bind(this));
    },

    start () {

    },

    _clearAll: function() {
        for(var i = 0; i < this._urls.length; ++i) {
            var url = this._urls[i];
            cc.loader.release(url);
        }
    },

    _progressCallback: function(completeCount, totalCount, res) {
        //加载进度回调
        console.log('第 ' + completeCount + '加载完成！');
        this.progress = completeCount / totalCount;
        this.resource = res;
        this.completeCount = completeCount;
        this.totalCount = totalCount;
    },

    _completeCallback: function(err, texture) {
        //加载完成回调
    },

    update (dt) {
        if(!this.resource){
            return ;
        }
        var progress = this.progressBar.progress;
        if(progress >= 1){
            console.log('加载完成')
            //加载完成
            this.progressBar.node.active = false;
            this.enabled = false;
            return ;
        }

        if(progress < this.progress){
            progress += dt;
        }

        this.progressBar.progress = progress;

    },
});

不要忘了把New ProgressBar节点拖到脚本里哦！

来个预览！

好了，教程到这里就完结了。不足之处，欢迎指出！