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

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

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

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

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

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

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

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

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

php文件内容如下:

<?php   header('Access-Control-Allow-Origin:*');   header('Control-type:image/png');   if(isset($_GET['url'])){     echo file_get_contents($_GET['url']);   } ?>

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

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

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

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


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

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

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

最后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节点拖到脚本里哦!

来个预览!

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

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

原文始发于:cocos creator加载和预加载(进度条)远程服务器资源教程

未经允许不得转载:cocos集中营 » cocos creator加载和预加载(进度条)远程服务器资源教程
微信公众号:zs40086
免vip看全网视频,抢先福利电影啥都有!
10000人已关注
分享到:
赞(0) 打赏