Unity UGUI Slider滑动器中文详解-Chinar

Chinar blog www.chinar.xin

Unity UGUI 完整系列教程 (Chinar中文图解)

Unity UGUI-Slider 组件


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

Chinar 的初衷是将一种简单的生活方式带给世人

使有限时间 具备无限可能

Chinar —— 心分享、心创新!

助力快速掌握 Unity UGUI Slider 组件的使用

为初学者节省宝贵的时间,避免采坑!

Chinar 教程效果:
Unity UGUI Slider滑动器中文详解-Chinar_第1张图片


文章目录

  • 1
    • Presentation —— 介绍
  • 2
    • Attribute —— 属性
  • 3
    • Direction —— 拖拽方向
  • 4
    • Use —— 使用
  • 支持
    • May Be —— 开发者,总有一天要做的事!


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


1

Presentation —— 介绍


Slider 组件是一个滑动条组件,它一般用来制作血条或者进度条。

我们创建一个Slider组件看一下它的属性:

在Unity的 Hierarchy 面板上右键–>UI–>Slider
举个例子
Unity UGUI Slider滑动器中文详解-Chinar_第2张图片
选中我们创建的Slider对象

首先看一下其子物体对应的UI
Unity UGUI Slider滑动器中文详解-Chinar_第3张图片


2

Attribute —— 属性


然后再看Inspector面板上的属性

Unity UGUI Slider滑动器中文详解-Chinar_第4张图片
下面看一下每个属性的详细功能

属性 功能
Fill Rect Slider 组件中填充区域的图形
Handle Rect 滑动条手柄部分的组件
Direction 拖动手柄时滑块的拖动方向。选项包括从左到右,从右到左,从下到上和从上到下。
Min Value 最大值
Max Value 最小值
Whole Numbers 是否将值约束为整数
Value 填充区域的值,范围0~1

3

Direction —— 拖拽方向


我们介绍一下 Direction 属性四种类型的效果

我们一般习惯将滑动条的 Handle 对象进行隐藏,原因是看着有点丑,这并不影响我们拖动滑动条

首先默认拖拽方向为 Left To Rigth 从左到右
举个例子
Unity UGUI Slider滑动器中文详解-Chinar_第5张图片
Right To Left 是从右往左拖拽,这里不做演示

看一下 Bottom To Top 从底部往顶部:
Unity UGUI Slider滑动器中文详解-Chinar_第6张图片
Top To Bottom 是从上往下拖拽,这里也不做演示了


4

Use —— 使用


我们来做一个滑动条自增的效果,类似于进度条

首先制作UI界面
举个例子
Unity UGUI Slider滑动器中文详解-Chinar_第7张图片
这里将Slider的MaxValue设置为100

下面我们来写代码:

using UnityEngine;
using UnityEngine.UI;

public class ChinarSlider : MonoBehaviour
{
    private Slider slider;//Slider 对象
    private Text text;//Text 对象

    /// 
    /// 初始化组件
    /// 
    void Start()
    {
        slider = GameObject.Find("Slider").GetComponent<Slider>();
        text = slider.transform.Find("Text").GetComponent<Text>();
        slider.value = 0;
        text.text = " ";
    }

    void Update()
    {
        if (slider.value < 100)
        {
            slider.value += Time.deltaTime;
            text.text = (slider.value/1).ToString("F")+"%";
        }
    }
}

运行Unity看下效果:
在这里插入图片描述

至此:您已完美征服了 UGUI - Slider


Unity UGUI 完整系列教程 (Chinar中文图解)


支持

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


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

Chinar 提供一站式《零》基础教程

使有限时间 具备无限可能!

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


Chinar 免费服务器、建站教程全攻略!( Chinar Blog )


Chinar

END

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

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

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

你可能感兴趣的:(Unity,3D,UGUI)