egret连连看项目实战之四(异步加载进度条)

简介: egret连连看项目实战之四(异步加载进度条)
推荐阅读:

      在玩游戏过程中,从一个场景加载到另一个场景,我们会发现,往往不是直接切换过去的,而是停留在当前界面,加载下一场景资源,等下一场景加载完毕就切换至加载完成得场景。在轻度一点的游戏上我们往往感受不到它的存在,但是在重度游戏上,往往表现很明显。因为在场景切换中,需要加载的资源可能很大,需要一定的时间,为了照顾玩家的体验,往往在场景中制作一个进度条显示加载进度。
      在unity中新建一个场景,并添加如下组件(loadBg和loadProcess是两张一模一样的图片,包括位置信息都一样):
在这里插入图片描述
      接下来,我们需要对loadProcess组件进行修改,首先更改它的颜Color属性,Image Type:Filled,Fill Method : Horizontal,如下:
在这里插入图片描述
界面完成了,下面是代码部分:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;
 
public class MyMenuUI : MonoBehaviour {
    //新游戏按钮
    public Button newGameButton;
    //加载界面
    public GameObject loadPanel;
    //滑动进度条
    public Image progressImg;
    //不断更新的进度值
    private int curProgressValue = 0;
    //进度显示百分比
    public Text proText;
 
    //异步加载进程
    private AsyncOperation async;
 
    void Start()
    {
        loadPanel.SetActive(false);//一开始禁用加载层。
    }
 
   //点击按钮跳场景
    public void NewGamePressed()
    {
        StartCoroutine(LoadScene());//调用加载场景的协程
        loadPanel.SetActive(true);//启用加载界面
    }
 
  //协程加载场景
    IEnumerator LoadScene()
    {
        async = SceneManager.LoadSceneAsync("TankGameScene");
        async.allowSceneActivation = false;//此处将允许自动场景加载禁用,防止到90%时自动跳转到新场景。
        yield return async;
    }
 
    void Update()
    {
        if (async == null)
        {
            return;//进程为空,跳出该函数
        }
        //总的进度值
        int progressValue = 100;
        if (curProgressValue < progressValue)
        {
            curProgressValue++;
        }
        proText.text = "Loading "+curProgressValue + "%";//实时更新进度百分比的文本显示
        progressImg.fillAmount = curProgressValue / 100f;//实时更新滑动进度图片的fillAmount值
        if (curProgressValue == 100)
        {
            async.allowSceneActivation = true;//启用自动加载场景
            proText.text = "OK";//文本显示完成OK
        }
    }
}

      上面代码注释很详细,这里我就不一一解说了,有不懂的可以公众号后台留言,专业人士为你解答~

相关文章
|
7月前
|
存储
CocosCreator3.8研究笔记(二十二)CocosCreator 动画系统-动画剪辑和动画组件介绍
CocosCreator3.8研究笔记(二十二)CocosCreator 动画系统-动画剪辑和动画组件介绍
123 0
|
5月前
|
XML 前端开发 Java
Android App开发动画特效中遮罩动画的讲解及实战演示(附源码 简单易懂 可直接使用)
Android App开发动画特效中遮罩动画的讲解及实战演示(附源码 简单易懂 可直接使用)
63 0
|
5月前
|
XML Java Android开发
Android App开发动画特效中帧动画和电影淡入淡出动画的讲解及实战(附源码和演示视频 简单易懂)
Android App开发动画特效中帧动画和电影淡入淡出动画的讲解及实战(附源码和演示视频 简单易懂)
48 0
|
5月前
|
XML Java Android开发
Android App开发动画特效之实现百叶窗动画和马赛克动画效果实战演示(附源码和演示视频 可直接使用)
Android App开发动画特效之实现百叶窗动画和马赛克动画效果实战演示(附源码和演示视频 可直接使用)
78 0
|
7月前
|
缓存 自然语言处理 BI
CocosCreator3.8研究笔记(二十)CocosCreator UI组件(四)
CocosCreator3.8研究笔记(二十)CocosCreator UI组件(四)
121 0
|
10月前
|
Dart
Flutter EasyRefreshList使用方法 下拉加载 上拉刷新
Flutter EasyRefreshList使用方法 下拉加载 上拉刷新
|
移动开发 前端开发 JavaScript
鸿蒙-webview的使用和JS交互(附源码)
日常我们在开发项目时,为了项目快速的开发和迭代,难免会用到H5页面。使用鸿蒙进行项目开发时,也一样免不了要加载H5页面,在移动开发中打开H5页面需要使用WebView组件。同时,为了和H5页面进行数据交换,有时候还需要借助JSBridge来实现客户端与H5之间的通讯。 那么鸿蒙之中用到的技术是什么呢?WebView 在此之前,先看一个报错 ​ App Launch: The Huawei Lite Simulator supports only Lite projects.
344 0
鸿蒙-webview的使用和JS交互(附源码)
|
图形学
egret连连看项目实战之二(礼盒动画)
egret连连看项目实战之二(礼盒动画)
egret连连看项目实战之二(礼盒动画)
|
编解码 前端开发 C#
egret连连看项目实战之一(搭建场景)
egret连连看项目实战之一(搭建场景)
egret连连看项目实战之一(搭建场景)
|
C# 图形学
egret连连看项目实战之三(解析配置表)
egret连连看项目实战之三(解析配置表)
egret连连看项目实战之三(解析配置表)