cocos creator实现加载场景进度条
【摘要】 游戏加载场景一直很慢,为了用户体验,增加一个加载进度条显示加载进度,我们需要用到2个方法:preloadScene 和 loadScene2种节点:遮罩和进度条遮罩:通过单色精灵直接制作一个黑色节点(需要完全覆盖界面,透明度改为100,纯黑色):进度条:直接使用cocos官方节点的进度条,额外增加个label组件显示文字,也可自行使用图片,然后使用填充类型实现进度条 需要注意使用widget...
游戏加载场景一直很慢,为了用户体验,增加一个加载进度条显示加载进度,
我们需要用到2个方法:
preloadScene 和 loadScene
2种节点:
遮罩和进度条
遮罩:
通过单色精灵直接制作一个黑色节点(需要完全覆盖界面,透明度改为100,纯黑色):
进度条:
直接使用cocos官方节点的进度条,额外增加个label组件显示文字,也可自行使用图片,然后使用填充类型实现进度条 需要注意使用widget进行定位组件位置
编写代码:
首先给进度条组件编写脚本:
import log = cc.log;
const {ccclass, property} = cc._decorator;
@ccclass
export default class ProgressBar extends cc.Component {
num = 0;//进度数据
isShow = false;//是否显示
show() {
//显示
this.isShow = true;
this.node.active = true;
cc.find("MainMenu/Mask").active = true;
}
hide() {
//隐藏
this.isShow = false;
this.node.active = false;
cc.find("MainMenu/Mask").active = false;
}
update() {
let progressBar = this.node.getComponent(cc.ProgressBar);
progressBar.progress = this.num;//更新进度条ui的图
cc.find('MainMenu/ProgressBar/num').getComponent(cc.Label).string= Math.trunc(this.num*100)+'%';//更新进度条文字
}
}在需要加载场景的地方调用:
playGame() {
let progressBarNode = cc.find('MainMenu/ProgressBar');
let progressBar = progressBarNode.getComponent('ProgressBar');
//预加载场景并获得加载进度
cc.director.preloadScene('Game', function (completedCount, totalCount, item) {
//可以把进度数据打出来
progressBar.num = completedCount / totalCount;
progressBar.show();
}, function () {
progressBar.hide();
//加载场景
cc.director.loadScene("Game", function (a, b, c) {
СameraСontrol.newGame();
});
});
}启动游戏即可看到效果:
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）