相信很多开发微信小游戏的小伙伴都清楚,微信为了用户对小游戏更好的体验,对上传的包体整体大小设置了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节点拖到脚本里哦!
来个预览!
好了,教程到这里就完结了。不足之处,欢迎指出!