FairyGUI复选框与进度条的组合使用

FairyGUI复选框与进度条的组合使用

一、准备工作

1、新建包ProgressBar

可以在上一个案例的基础上接着新建包。

FairyGUI复选框与进度条的组合使用_第1张图片

2、新建组件

FairyGUI复选框与进度条的组合使用_第2张图片
FairyGUI复选框与进度条的组合使用_第3张图片

3、导入素材

点击此处下载素材
FairyGUI复选框与进度条的组合使用_第4张图片

二、进度条

1、新建进度条

FairyGUI复选框与进度条的组合使用_第5张图片
FairyGUI复选框与进度条的组合使用_第6张图片

2、微调进度条

FairyGUI复选框与进度条的组合使用_第7张图片

3、进度条跟跑动画

为了使进度条不那么单调,可以给它添加一个动画。让进度条伸缩的时候,松鼠跟着进度条的增加往右移。也就是有那么一个跟跑的效果,看起来更生动。

设置关联
FairyGUI复选框与进度条的组合使用_第8张图片
FairyGUI复选框与进度条的组合使用_第9张图片

三、下拉框

1、新建下拉框

FairyGUI复选框与进度条的组合使用_第10张图片
FairyGUI复选框与进度条的组合使用_第11张图片
FairyGUI复选框与进度条的组合使用_第12张图片
FairyGUI复选框与进度条的组合使用_第13张图片
FairyGUI复选框与进度条的组合使用_第14张图片
FairyGUI复选框与进度条的组合使用_第15张图片

2、设置下拉框

FairyGUI复选框与进度条的组合使用_第16张图片
FairyGUI复选框与进度条的组合使用_第17张图片

3、下拉框完成效果

FairyGUI复选框与进度条的组合使用_第18张图片

四、打包发布

FairyGUI复选框与进度条的组合使用_第19张图片
FairyGUI复选框与进度条的组合使用_第20张图片
FairyGUI复选框与进度条的组合使用_第21张图片

五、Unity中显示

FairyGUI复选框与进度条的组合使用_第22张图片
FairyGUI复选框与进度条的组合使用_第23张图片

六、编码实现

FairyGUI复选框与进度条的组合使用_第24张图片

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using FairyGUI;
using System;

public class ProgressBar : MonoBehaviour
{
     
    private GComponent mainUI;
    private GProgressBar progressBar;
    private GComboBox comboBox;
    void Start()
    {
     
        mainUI = GetComponent<UIPanel>().ui;
        progressBar = mainUI.GetChild("n0").asProgress;
        progressBar.TweenValue(100, 5);  //100是要加载的进度,5是需要花费的时间
        comboBox = mainUI.GetChild("n4").asComboBox;
        comboBox.onChanged.Add(SetCompleteTime);
    }

    private void SetCompleteTime()
    {
     
        progressBar.value = 0;  //每次重新加载将它的进度设置为0
        progressBar.TweenValue(100, Convert.ToInt32(comboBox.value));
    }
}

七、最终效果

FairyGUI复选框与进度条的组合使用_第25张图片
FairyGUI复选框与进度条的组合使用_第26张图片
FairyGUI复选框与进度条的组合使用_第27张图片
FairyGUI复选框与进度条的组合使用_第28张图片

你可能感兴趣的:(FairyGUI,复选框与进度条的组合使用,FairyGUI)