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

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

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

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

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

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

然后在这里建一个php文件(注意路径!是你网站站点下!)

php文件内容如下:

<?php
  header('Access-Control-Allow-Origin:*');
  header('Control-type:image/png');
  if(isset($_GET['url'])){
    echo file_get_contents($_GET['url']);
  }
?>
在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节点拖到脚本里哦!

来个预览!


好了,教程到这里就完结了。不足之处,欢迎指出!
--------------------- 
作者:芳辉啊 
来源:CSDN 
原文:https://blog.csdn.net/lifanghui_/article/details/80788419 
版权声明:本文为博主原创文章,转载请附上博文链接!

展开阅读全文

没有更多推荐了,返回首页