引擎版本
CocosCreator v2.0.9
实现效果
预加载进度条
先讲讲进度条组件
- 先来个粉嫩的背景
- 添加个进度条和文本组件
- 提示下长度问题,应该匹配父节点的宽度,我先把父节点宽改400,之后我应该把长度也改为400,然后调整位置为-200
- 接下来就是可以代码访问属性,动态更改进度。
cc.Class({
extends: cc.Component,
properties: {
// 声明进度条
progress: cc.ProgressBar,
// 进度显示文本
text: cc.Label
},
start () {
// 假设是80%进度
let j = 0.8;
this.progress.progress = j;
this.text.string = j * 100 + '%';
},
});
预加载
- 新建游戏场景,由test场景进入。
- 让我们从test场景中先预加载game场景,然后等加载完毕跳过去。用到了预加载API
cc.Class({
extends: cc.Component,
properties: {
// 声明进度条
progress: cc.ProgressBar,
// 进度显示文本
text: cc.Label
},
start () {
// 先设置0%
this.text.string = '0' + '%';
this.progress.progress = 0;
// 预加载,第一个是场景名,第二个callback中3个参数,第三个callback是完成回调
cc.director.preloadScene('game',(completedCount, totalCount, item) => {
let p = completedCount/totalCount;
this.progress.progress = p;
this.text.string = parseInt(p * 100) + '%';
// 打印观察
console.log(this.text.string);
},() => {
cc.director.loadScene('game');
});
},
});
- 为了方便观察,我给game场景扔了50张图片,,,但还是太快了,一闪而过。所以我给大家打印了下。
好了,分享结束,有没有收获呢!
O(∩_∩)O~~
顺手点个赞吧!
加我QQ群:(博客里面的项目,群文件里都有哦)
706176551
我们一起学习!
O(∩_∩)O~~