15.ScrollBar滚动条和ProgressBar进度条

UI系统 > NGUI > NGUI基础知识 UI系统 基础知识 组合控件 NGUI
发布时间 :
字数:1.5k 阅读 : 评论:
  1. 15.NGUI基础-组合控件-ScrollBar滚动条和ProgressBar进度条
    1. 15.1 知识点
      1. ScrollBar和ProgressBar用来干啥
      2. 制作ScrollBar滚动条
        1. 两个Sprite对象，一个Sprite对象充当背景，一个Sprite对象充当滚动条。
        2. 给Sprite背景父对象添加脚本ScrollBar脚本。
        3. 给Sprite背景父对象添加NGUI碰撞器。
        4. ScrollBar脚本关联对象。
      3. 制作ProgressBar进度条
        1. 两个Sprite对象，一个Sprite对象充当背景，一个Sprite对象充当进度条。
        2. 给Sprite背景父对象添加脚本ProgressBar脚本。
        3. ProgressBar脚本关联对象。
        4. 不添加碰撞器的原因是因为进度条不需要玩家手动改变。
    2. 15.2 知识点代码
    3. 15.3 练习题
      1. 在Slider滑动条的练习题基础上，请用现在所学知识，制作一个这样的功能，长按鼠标可以蓄能，会出现一个进度条表示当前的蓄能进度，按下鼠标出现进度条，松开鼠标进度条消失，鼠标长按过程中，进度条更新，5秒钟后蓄能满，进度条满，坦克的血量+10
        1. GamePanel下创建一个两个sprite充当成进度条，添加进度条脚本，关联两个sprite
        2. 在GamePanel脚本下创建进度条变量，关联进度条对象。添加给外部显示隐藏更新蓄能条的方法，开始时默认隐藏
        3. 添加蓄能计时变量和当前血量变量。在Update里处理鼠标操作相关逻辑。鼠标按下时显示蓄能条，重置蓄能条事件。长按时间累加蓄能条也一直增加。五秒后加血重置时间。抬起鼠标隐藏蓄能条
    4. 15.4 练习题代码
      1. GamePanel
      2. TankObj

15.NGUI基础-组合控件-ScrollBar滚动条和ProgressBar进度条

15.1 知识点

ScrollBar和ProgressBar用来干啥

  • ScrollBar滚动条一般不单独使用，都是配合滚动视图使用，类似VS右侧的滚动条，随着内容的增多滚动条可能变短。
  • ProgressBar进度条一般不咋使用，一般直接用Sprite的Filled填充模式即可。
  • 他们的参数和之前的知识很类似，所以这两个知识点不是重点，了解如何制作即可。

制作ScrollBar滚动条

两个Sprite对象，一个Sprite对象充当背景，一个Sprite对象充当滚动条。

给Sprite背景父对象添加脚本ScrollBar脚本。

给Sprite背景父对象添加NGUI碰撞器。

ScrollBar脚本关联对象。

制作ProgressBar进度条

两个Sprite对象，一个Sprite对象充当背景，一个Sprite对象充当进度条。

给Sprite背景父对象添加脚本ProgressBar脚本。

ProgressBar脚本关联对象。

不添加碰撞器的原因是因为进度条不需要玩家手动改变。

15.2 知识点代码

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

public class Lesson15_NGUI基础_组合控件_ScrollBar滚动条和ProgressBar进度条 : MonoBehaviour
{
    void Start()
    {
        #region 知识点一 ScrollBar和ProgressBar用来干啥

        //ScrollBar滚动条 一般不单独使用 都是配合滚动视图使用 类似VS右侧的滚动条 随着内容的增多滚动条可能变短
        //ProgressBar进度条 一般不咋使用  一般直接用Sprite的Filed填充模式即可
        //他们的参数和之前的知识很类似
        //所以这两个知识点不是重点 了解如何制作他们即可

        #endregion

        #region 知识点二 制作Scrollbar

        //1.两个Sprite对象 一个Sprite对象充当背景 一个Sprite对象充当滚动条
        //2.给Sprite背景父对象添加脚本ScrollBar脚本
        //3.给Sprite背景父对象添加NGUI碰撞器
        //4.ScrollBar脚本关联对象

        #endregion

        #region 知识点三 制作ProgressBar

        //1.两个Sprite对象 一个Sprite对象充当背景 一个Sprite对象充当进度条
        //2.给Sprite背景父对象添加脚本ProgressBar脚本
        //3.ProgressBar脚本关联对象

        #endregion
    }
}

15.3 练习题

在Slider滑动条的练习题基础上，请用现在所学知识，制作一个这样的功能，长按鼠标可以蓄能，会出现一个进度条表示当前的蓄能进度，按下鼠标出现进度条，松开鼠标进度条消失，鼠标长按过程中，进度条更新，5秒钟后蓄能满，进度条满，坦克的血量+10

GamePanel下创建一个两个sprite充当成进度条，添加进度条脚本，关联两个sprite

在GamePanel脚本下创建进度条变量，关联进度条对象。添加给外部显示隐藏更新蓄能条的方法，开始时默认隐藏

public class GamePanel : MonoBehaviour
{
    #region Lesson15_NGUI基础_组合控件_ScrollBar滚动条和ProgressBar进度条练习题
    public UIProgressBar progressBar;
    #endregion
    
    void Start()
    {
        #region Lesson15_NGUI基础_组合控件_ScrollBar滚动条和ProgressBar进度条练习题
        HideHpPro();
        #endregion
    }
    
    /// <summary>
    /// 显示蓄能条
    /// </summary>
    public void ShowHpPro()
    {
        progressBar.gameObject.SetActive(true);
    }
    
    /// <summary>
    /// 隐藏蓄能条
    /// </summary>
    public void HideHpPro()
    {
        progressBar.gameObject.SetActive(false);
    }
    
    /// <summary>
    /// 更新蓄能条
    /// </summary>
    /// <param name="nowValue"></param>
    /// <param name="maxValue"></param>
    public void UpdatePro(float nowValue, float maxValue)
    {
        progressBar.value = nowValue / maxValue;
    }
}

添加蓄能计时变量和当前血量变量。在Update里处理鼠标操作相关逻辑。鼠标按下时显示蓄能条，重置蓄能条事件。长按时间累加蓄能条也一直增加。五秒后加血重置时间。抬起鼠标隐藏蓄能条

public class TankObj : MonoBehaviour
{
    // 用于蓄能计时
    private float nowTime;
    // 当前血量
    public int nowHp = 100;
    
    private void Update()
    {
        // 处理按下鼠标蓄能相关
        if (Input.GetMouseButtonDown(0))
        {
            GamePanel.Instance.ShowHpPro();
            nowTime = 0;
            // 更新蓄能条
            GamePanel.Instance.UpdatePro(nowTime, 5);
        }
        else if (Input.GetMouseButtonUp(0))
        {
            GamePanel.Instance.HideHpPro();
        }
        else if (Input.GetMouseButton(0))
        {
            // 按下状态时间一直加
            nowTime += Time.deltaTime;
            // 更新蓄能条
            GamePanel.Instance.UpdatePro(nowTime, 5);
            
            // 判断最大时间
            if (nowTime >= 5)
            {
                // 重置时间
                nowTime = 0;
                nowHp += 10;
                print("当前血量：" + nowHp);
            }
        }
    }
}

15.4 练习题代码

GamePanel

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

public class GamePanel : MonoBehaviour
{
    private static GamePanel instance;  

    public static GamePanel Instance => instance; 

    public UIButton btn;  

    public TankObj player;  

    public UIToggle togSound;  

    public UILabel labName;  

    public UIButton btnChangeName;  

    #region Lesson13_NGUI基础_组合控件_PopupList下拉列表练习题
    public UIPopupList list;  
    public Light lightObj;  
    #endregion

    #region Lesson14_NGUI基础_组合控件_Slider滑动条练习题
    public UISlider sliderSound;  
    #endregion

    #region Lesson15_NGUI基础_组合控件_ScrollBar滚动条和ProgressBar进度条练习题
    public UIProgressBar progressBar;  
    #endregion

    private void Awake()
    {
        instance = this;  
    }

    void Start()
    {
        btn.onClick.Add(new EventDelegate(() => {
            player.Fire();
        }));

        togSound.onChange.Add(new EventDelegate(() =>
        {
            MusicData.isOpenSound = togSound.value;
        }));

        btnChangeName.onClick.Add(new EventDelegate(() =>
        {
            ChangeNamePanel.Instance.gameObject.SetActive(true);
        }));

        #region Lesson13_NGUI基础_组合控件_PopupList下拉列表练习题
        list.onChange.Add(new EventDelegate(() => {
            switch (list.value)
            {
                case "白天":
                    lightObj.intensity = 1;
                    break;
                case "黑夜":
                    lightObj.intensity = 0.2f;
                    break;
            }
        }));
        #endregion

        #region Lesson14_NGUI基础_组合控件_Slider滑动条练习题
        sliderSound.onChange.Add(new EventDelegate(() =>
        {
            MusicData.soundValue = sliderSound.value;
        }));
        #endregion

        #region Lesson15_NGUI基础_组合控件_ScrollBar滚动条和ProgressBar进度条练习题
        HideHpPro();  
        #endregion
    }

    public void ShowHpPro()
    {
        progressBar.gameObject.SetActive(true);  
    }

    public void HideHpPro()
    {
        progressBar.gameObject.SetActive(false);  
    }

    public void UpdatePro(float nowValue, float maxValue)
    {
        progressBar.value = nowValue / maxValue; 
    }
}

TankObj

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

public class TankObj : MonoBehaviour
{
    public Transform shootPos;  

    private AudioClip clip;    
    private float nowTime;     
    public int nowHp = 100;    

    public void Fire() 
    {
        AudioSource source = this.gameObject.AddComponent<AudioSource>();
        if (clip == null)
            clip = Resources.Load<AudioClip>("Sound/CannonShoot");
        source.clip = clip;

        source.volume = MusicData.soundValue;
        source.Play();
        source.mute = !MusicData.isOpenSound;

        Destroy(source, 2);

        Instantiate(Resources.Load<GameObject>("Obj/Bullet"), shootPos.position, shootPos.rotation);
    }

    private void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            GamePanel.Instance.ShowHpPro();  
            nowTime = 0;                     
            GamePanel.Instance.UpdatePro(nowTime, 5);
        }
        else if (Input.GetMouseButtonUp(0))  
        {
            GamePanel.Instance.HideHpPro();   
        }
        else if (Input.GetMouseButton(0))   
        {
            nowTime += Time.deltaTime;        
            GamePanel.Instance.UpdatePro(nowTime, 5);   
        
            if (nowTime >= 5)    
            {
                nowTime = 0;
                nowHp += 5;
                print("当前血量" + nowHp);  
            }
        }
    }
}
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 785293209@qq.com

赏

©2016-2024 Tao

Built with Hexo and 3-hexo theme

×

喜欢就点赞,疼爱就打赏