cocos creator实现加载场景进度条

简介: cocos creator实现加载场景进度条

游戏加载场景一直很慢,为了用户体验,增加一个加载进度条显示加载进度,

我们需要用到2个方法:

preloadScene 和 loadScene

2种节点:

遮罩和进度条

遮罩:

通过单色精灵直接制作一个黑色节点(需要完全覆盖界面,透明度改为100,纯黑色):

image.png

进度条:

直接使用cocos官方节点的进度条,额外增加个label组件显示文字,也可自行使用图片,然后使用填充类型实现进度条

需要注意使用widget进行定位组件位置


image.png


image.png

image.png

编写代码:

首先给进度条组件编写脚本:

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();
        });
    });
}

启动游戏即可看到效果:

image.png


目录
相关文章
|
前端开发
CocosCreator 面试题(九)什么是异步加载资源
CocosCreator 面试题(九)什么是异步加载资源
351 0
|
JSON Ubuntu Shell
WSL 2 的安装过程(以及介绍)(下)
WSL 2 的安装过程(以及介绍)
WSL 2 的安装过程(以及介绍)(下)
|
算法 Java 开发者
《黑神话:悟空》Xbox版的技术挑战与解决方案
【8月更文第26天】《黑神话:悟空》是一款备受期待的动作角色扮演游戏,以其精美的画面和丰富的中国神话故事背景而闻名。本篇文章将重点介绍游戏在Xbox平台上的技术挑战及其解决方案,特别是针对内存管理的问题。通过深入分析,我们将了解开发团队是如何克服这些挑战,确保游戏在Xbox上能够流畅运行的。
397 4
|
存储 人工智能 弹性计算
探索艺术的无限可能 —— AI绘画,让创意触手可及
现在就来体验AI绘画方案,让我们一起唤醒沉睡的艺术灵魂,释放你的创意小宇宙,让你的涂鸦和人像照,从此不再平凡!
|
Java 应用服务中间件 Linux
RedHat8静默安装was
RedHat8静默安装was
148 6
|
移动开发 前端开发
vue3 Element-Plus封装的el-tree-select的使用
vue3 Element-Plus封装的el-tree-select的使用
1755 0
vue3 Element-Plus封装的el-tree-select的使用
|
机器学习/深度学习 计算机视觉
【YOLOv8改进】 ODConv(Omni-Dimensional Dynamic Convolution):全维度动态卷积
ODConv是一种增强型动态卷积方法,通过多维注意力机制在卷积的四个维度上学习互补注意力,提升轻量级CNN准确性和效率。与现有动态卷积不同,ODConv覆盖了空间、输入/输出通道和核数维度。在ImageNet和MS-COCO上,对MobileNetV2|ResNet等模型有显著性能提升,减少参数的同时超越传统方法。代码和论文链接可用。在YOLO系列中,ODConv改进了特征学习,优化了目标检测性能。
|
Kubernetes Cloud Native Devops
【阿里云云原生专栏】DevOps与云原生的融合:阿里云CI/CD流水线最佳实践
【5月更文挑战第23天】阿里云融合DevOps与云原生技术,提供高效CI/CD解决方案,助力企业提升研发效能。通过云效平台,集成代码管理、构建服务、容器服务、持续部署及监控日志组件,实现自动化研发流程。案例中,应用从GitHub构建到Kubernetes部署,全程无缝衔接。借助阿里云,企业能快速构建适应云原生的DevOps体系,以应对复杂需求和提升市场竞争力。
371 1
|
Java 关系型数据库 MySQL
文件在线压缩与解压|基于Springboot实现文件在线压缩与解压
文件在线压缩与解压|基于Springboot实现文件在线压缩与解压
137 0