unity3d制作进度条效果

2018-07-06 23:27:32 ChinarCSDN 阅读数 3107
  • Unity 值得看的500+ 技术内容列表

    Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

Unity跳转场景进度条制作


本文提供全流程,中文翻译。

Chinar 坚持将简单的生活方式,带给世人!

(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例)



Chinar —— 心分享、心创新!

助力快速完成跳转场景进度条的制作

为新手节省宝贵的时间,避免采坑!


Chinar 教程效果:
这里写图片描述



全文高清图片,点击即可放大观看 (很多人竟然不知道)


1

Loading Scene —— 加载场景


游戏开发中,我们经常会遇到需要做一个进度条

用来告诉玩家,进行场景切换时,等待加载的进度或者时间等等

那么在Unity开发中,我们就需要用到异步加载,来实现此类功能了
举个栗子黑白88
例如:市面常见这样的例子
这里写图片描述


2

Loading Scripts —— 加载脚本


把一下脚本挂载前场景

然后指定需要跳转到的场景的 名称 / 下标

UI 上创建一个 Slider 滑动条

然后 我在这里是用 动态获取的方式获得的 名称为“ Slider
这里写图片描述
举个栗子黑白88

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;


/// <summary>
/// 加载场景 —— 脚本挂载前场景
/// </summary>
public class ChinarLoadScene : MonoBehaviour
{
    private Slider slider;          //滑动条
    int            currentProgress; //当前进度
    int            targetProgress;  //目标进度


    private void Start()
    {
        currentProgress = 0;
        targetProgress  = 0;
        slider          = GameObject.Find("Slider").GetComponent<Slider>();
        StartCoroutine(LoadingScene()); //开启协成
    }


    /// <summary>
    /// 异步加载场景
    /// </summary>
    /// <returns>协成</returns>
    private IEnumerator LoadingScene()
    {
        AsyncOperation asyncOperation       = SceneManager.LoadSceneAsync(1); //异步加载1号场景
        asyncOperation.allowSceneActivation = false;                          //不允许场景立即激活//异步进度在 allowSceneActivation= false时,会卡在0.89999的一个值,这里乘以100转整形
        while (asyncOperation.progress < 0.9f)                                //当异步加载小于0.9f的时候
        {
            targetProgress = (int) (asyncOperation.progress * 100); //异步进度在 allowSceneActivation= false时,会卡在0.89999的一个值,这里乘以100转整形
            yield return LoadProgress();
        }
        targetProgress = 100; //循环后,当前进度已经为90了,所以需要设置目标进度到100;继续循环
        yield return LoadProgress();
        asyncOperation.allowSceneActivation = true; //加载完毕,这里激活场景 —— 跳转场景成功
    }


    /// <summary>
    /// 由于需要两次调用,在这里进行简单封装
    /// </summary>
    /// <returns>等一帧</returns>
    private IEnumerator<WaitForEndOfFrame> LoadProgress()
    {
        while (currentProgress < targetProgress) //当前进度 < 目标进度时
        {
            ++currentProgress;                            //当前进度不断累加 (Chinar温馨提示,如果场景很小,可以调整这里的值 例如:+=10 +=20,来调节加载速度)
            slider.value = (float) currentProgress / 100; //给UI进度条赋值
            yield return new WaitForEndOfFrame();         //等一帧
        }
    }
}

效果如下:
这里写图片描述


3

Warm Prompt —— 温馨提示


Chinar 温馨提示:

如果需要跳转的场景很小,资源很少

可以通过代码中的++currentProgress;//当前进度不断累加

调整++currentProgress的值 例如:+=10 +=20,来调节加载速度
举个栗子黑白88
加载速度明显提升:
这里写图片描述


4

Project —— 项目文件


项目文件为 unitypackage 文件包:

下载导入 Unity 即可使用
举个栗子黑白88
免费下载 —— 项目资源


支持

May Be —— 搞开发,总有一天要做的事!


拥有自己的服务器,无需再找攻略!

Chinar 提供一站式教程,闭眼式创建!

为新手节省宝贵时间,避免采坑!


先点击领取 —— 阿里全产品优惠券 (享受最低优惠)


1 —— 云服务器超全购买流程 (新手必备!)

2 —— 阿里ECS云服务器自定义配置 - 购买教程(新手必备!)

3—— Windows 服务器配置、运行、建站一条龙 !

4 —— Linux 服务器配置、运行、建站一条龙 !





技术交流群:806091680 ! Chinar 欢迎你的加入


END

本博客为非营利性个人原创,除部分有明确署名的作品外,所刊登的所有作品的著作权均为本人所拥有,本人保留所有法定权利。违者必究

对于需要复制、转载、链接和传播博客文章或内容的,请及时和本博主进行联系,留言,Email: ichinar@icloud.com

对于经本博主明确授权和许可使用文章及内容的,使用时请注明文章或内容出处并注明网址

2014-07-21 10:12:14 G__Dragon 阅读数 4722
  • Unity 值得看的500+ 技术内容列表

    Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

利用GUI可以制作进度条,但是NGUI更加方便

我是用的NGUI3.5.3,

先找到NGUI  Slider的预制体,利用自带的UISlider来制作。

主要是利用UISlider的Value来控制进度条。

脚本


 public GameObject BtnGaoLu;
    public UISlider MyUISlider;

    private bool isLoad=false;
    private AsyncOperation async;
    float progress = 0;

    void Awake()
    {
        UIEventListener.Get(BtnGaoLu).onClick = fnChangeSence;
        MyUISlider.alpha = 0;
    }

	// Use this for initialization
	void Start () {
	

	}
	
	// Update is called once per frame
	void Update () {
        //绘制进度条,但是由于时间太短,效果不好
        if (isLoad)
        {
            MyUISlider.alpha = 1;
            progress = Convert.ToSingle((async.progress.ToString("f2")));
            if (progress > 0)
            {
                MyUISlider.GetComponent<UISlider>().value = progress+0.8f;
		//此处添加0.8f是因为我只加载到85%就跳转了,为了达到进度条到达100*的效果,所以添加了0.8,是实际情况而定。
                print(progress);
            }
        }
	}

    void fnChangeSence(GameObject obj)
    {
        
        StartCoroutine(fnLoadSence("Final_Scene"));
    }

    IEnumerator fnLoadSence(string strSenceName)
    {
        isLoad = true;
        async = Application.LoadLevelAsync(strSenceName);
        yield return async;
    }

这里注意使用Convert方法需要添加引用System


将触发按钮盒UISlider拖入公有变量中,运行即可。

实际的效果要根据加载时间来确定,再编辑其中只要第一次加载后,在运行就会非常快,以至于看不到进度条效果,只要发布就好了

2016-07-05 22:28:19 gaofd 阅读数 5214
  • Unity 值得看的500+ 技术内容列表

    Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

  1.   
  2.     public void LoadGame()  
  3.     {  
  4.         StartCoroutine(StartLoading("001"));  
  5.     }  
  6.   
  7.     private IEnumerator StartLoading(string sceneName)  
  8.     {  
  9.         int displayProgress = 0;  
  10.         int toProgress = 0;  
  11.         AsyncOperation op = Application.LoadLevelAsync(sceneName);   //异步对象  
  12.         op.allowSceneActivation = false;  
  13.         while (op.progress < 0.9f)  
  14.         {  
  15.             toProgress = (int)op.progress * 100;  
  16.             while (displayProgress < toProgress)  
  17.             {  
  18.                 ++displayProgress;  
  19.                 SetLoadingPercentage(displayProgress);  
  20.                 yield return new WaitForEndOfFrame();  
  21.             }  
  22.         }  
  23.   
  24.         toProgress = 100;  
  25.         while (displayProgress < toProgress)  
  26.         {  
  27.             ++displayProgress;  
  28.             SetLoadingPercentage(displayProgress);  
  29.             yield return new WaitForEndOfFrame();  
  30.         }  
  31.         op.allowSceneActivation = false;  
  32.     }  
  33.   
  34.     private void SetLoadingPercentage(int DisplayProgress)     //设置显示进度  
  35.     {  
  36.         proLoadingBar.value = DisplayProgress * 0.01f;  
  37.         labProgress.text = DisplayProgress.ToString() + "%";  
  38.     }  
  39. }  
效果如下:(.gif图可能会有点卡,但是实际效果是完全很顺畅不会卡的。)


2018-11-12 14:41:13 Ro969668074 阅读数 2009
  • Unity 值得看的500+ 技术内容列表

    Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

在开发游戏过程中经常需要Slider来制作倒计时、积分之类的进度条。

1.由2张图构成

 命名为“baseImage”和“Image”。如图所示。

选中“baseImage”对象,在“Inspector”中添加“Slider”属性,将“Image”拖入到“Fill Rect”中。如图所示。

取消滑动条的可交互"Interactable“”,不然用户可以更改时间或经验值。

2.选中“Image”,设置其“Image”属性中的“Image Type”为“Filled”,根据自己需求,设置“Fill Method”和“Fill Origin”,滑动“Fill Amount”。

效果图如下:

创建脚本“Slider”,用代码修改“Fill  Amount”属性。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Slider : MonoBehaviour {
    Image m_Image;
	void Start () 
    {
        m_Image = GetComponent<Image>();
        m_Image.fillAmount = 1f;
	}
	void Update () 
    {
        if (m_Image.fillAmount > 0)
        {
            m_Image.fillAmount -= 1 * Time.deltaTime;
        }
	}
}

将该脚本挂到“Image”对象上并设置其“custom”属性。

积分、经验值进度条一样的。

只需修改“Fill Method”和“Fill Origin”即可。

效果图如下:

还可以控制Slider的value来改变进度条

Slider baseImage = transform.Find("Canvas/baseImage").GetComponent<Slider>();
baseImage.value = 0.77f;

 

2016-06-28 14:24:01 tab_space 阅读数 13525
  • Unity 值得看的500+ 技术内容列表

    Unity3D是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

0. 背景

最近有个在Unity中制作圆环进度条的需求,并在圆中显示进度数值,类似于图1:

这里写图片描述
图1. 圆环进度条

平时制作直线的进度条比较多,突然要求做个圆环的有些不适应。不过,这个需求google一下其实大量的解答就出来,关键字"unity circle progress bar",于是我采用了 Unity5 Radial Progress Bar Tutorial HD - YouTube 这个方法,有兴趣的同学可以去看看,接下来我简要叙述一下制作的方法。

1. 制作步骤

a). Unity版本

需求制作使用Unity5的UGUI的新GUI组建(UGUI自Unity4.6版本出现的)。

b). 新建Canvas

a). 在菜单栏GameObject/UI/Canvas,新建Canvas,如图2。

这里写图片描述
图2

c). 新建circleProcessBar

b). 同理,在Canvas中新建一个Create/UI/Image中新建一个image,作为Canvas子物体,并命名为circleProcessBar,如图3。

这里写图片描述
图3

d). 新建circleProcessBar/process

c). 在circleProcessBar中创建一个image,作为circleProcessBar第一个子物体,并命名为process。这个Image主要的功能是以类似雷达扇形扫描形式,作为圆环进度条最核心的基础GameObject。

I) 在此物体process的Image组件中,设置Source Image为Unity自带的Knob

II) 在Color中随便选择一种颜色,本文中选择

{ "R" : 37, "G" : 237, "B" : 230, "Alpha" : 255}

III) 选择后会出现ImageType属性,分别选

{
    "ImageType" : "Filled",
    "FillMethod" : "Radial 360",
    "FillOrigin" : "Top",
    "Clockwise" : False
}

如图4所示。

这里写图片描述
图4

这时候,修改FillAmout属性,就可以做成类似雷达扇形扫描的进度,如图5。但是我们希望是圆环,并不是扇形。

这里写图片描述
图5

e). 新建circleProcessBar/innerCircle

d). 在circleProcessBar中再创建一个image,作为circleProcessBar第二个子物体,并命名为innerCircle。该物体的作用是:覆盖前面的process,将扇形进度变成圆环进度。将图3中的Assets中innerCircle.png拖入Image组件的SourceImage中,并将size设置为:

{"width" : 112, "height" : 112}

f). 新建circleProcessBar/indicator

e). 在circleProcessBar中创建一个Text,作为circleProcessBar第三个子物体,并命名为indicator
该物体的用作是:显示圆环进度值。为能够清楚显示,调整indicator的属性。

{
    RectTransform.Size  : {"width": 160, "height" : 160}
    RectTransform.Scale : {"x" : 0.5, "y" : 0.5}, 
    Character.FontStyle : 55,
    Paragraph.Alignment : ("center", "middle"),
    Color               : {"R" : 79, "G" : 227, "B" : 139}
}

设置好后,整个hierarchy如图6所示。

这里写图片描述
图6

g). 新建circleProcess.cs

f). 新建C#脚本-circleProcess.cs,并拖至物体circleProcessBar,作为其的一个脚本组件。

I) 声明在Unity设置的属性:

[SerializeField]
float speed;

[SerializeField]
Transform processTrans;

[SerializeField]
Transform indicatorTrans;

II) 设置speed为0.1,processTransproces物体的transform,indicatorTransprocess物体的transform。

III) 编写Update函数,是的环形进度在设置目标进度后SetTargetProcess之后,能够有一段时间的动画。

// Update is called once per frame
    void Update () {

        if (currentAmout < targetProcess) {
            Debug.Log("currentAmount:" + currentAmout.ToString());

            currentAmout += speed;
            if(currentAmout > targetProcess)
                currentAmout = targetProcess;
            indicatorTrans.GetComponent<Text>().text = ((int)currentAmout).ToString() + "%";
            processTrans.GetComponent<Image>().fillAmount = currentAmout/100.0f;
        }

    }

h). Unity Play

最终的效果如图7所示。

这里写图片描述
图7

2. 总结

这样就达到了我们需求了,O(∩_∩)O哈哈~,.unity, cs, 资源文件,请移步csdz的gitbub下载