UGUI之Image使用以及技能释放CD

顾名思义：Image就是用来显示图片的

Image中Image组件中有一个重要的熟悉：Image type

 

当作UI的时候。很多时候会用到图片做背景

 

比如你把图片放大。你会看到边框就失真了。即变得模糊了，即图片变大。边框也变大了。所以就模糊了

 

来看看这几个属性的不同用法：

添加一个Image。并给Source Image赋精灵，默认是Simple属性，

图片默认大小：

当图片放大，图片会变得模糊

 

所以这是不允许的。

一般我们不希望图片的边框跟着图片一起放大缩小，那怎么办呢。

这里就可以使用九宫切图

这时候会用到Image type的第二选项：Sliced

当选择Sliced的时候。下面会提示警告：说这个图片没有边框

 

首先把图片切成九宫图

选中图片，Sprite Editor

 

拖动绿色的点开始切图

 

 

 

其实也就是改变了Border

 

 

这样就分成了9格

那么这么切分成9格有什么好处呢。当我们利用它来做背景图片的时候，

1：4个角不会被拉伸

2：左右边框只会上下拉伸，

3：上下边框只会左右拉伸

只用中间那部分才会进行拉伸填充

 

现在设置完成后 Apply一下

 

在视图中看效果

 

 

 

记住：类型一定要是九宫格类型

 

 

 

Tiled类型

选择Tiled你 会发现

 

Tiled其实就是按照当前图片的大小进行平铺总个空间

 

 

Filled类型

Filled是用来显示当前图片的某一部分的。默认呢。是全部显示（Radial 360）

 

 

 

Radial 360表示以圆的方式进行切割

Fill Amout表示切割哪一部分

 

用这个可以做技能释放，先看看效果

 

可以通过鼠标单击和使用快捷键（数字1）来释放技能。它有一个冷却时间。在冷却时间内。重复单击是无效的。

那么一起来看看是怎么实现的。

skillitem是最底部的背景图片

Image是技能图片

FillImage也技能图片。设置它颜色为黑色。透明度设置办透明，

Image type设置为Filled，设置从顶部开始切割。这样就可以通过改变Fill Amount属性来实现技能释放效果

具体见图：

 

Text是显示数字的。用来做快捷键

为了能让skillitem对象有单击事件。所以要添加Button组件

，UI部分已经完成。接下来就是代码部分

创建一个脚本。挂在到skillitem上。注册click事件

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class newItem : MonoBehaviour
{
    //冷却需要时间
    public float codeTime = 5;
    //冷却中
    bool isStart = false;
    //记录冷却的时间
    public float timer = 0; 

    //释放的图片
    Image image;

    //快捷键
    //这样的好处是不在代码中写死。可以直接在界面修改
    public KeyCode keycode;

    // Use this for initialization
    void Start()
    {
        image = GameObject.Find("FillImage").GetComponent<Image>();
    }

    // Update is called once per frame
    void Update()
    {
        if (Input.GetKeyDown(keycode))
        {
            isStart = true;
        }

        if (isStart)
        {
            timer += Time.deltaTime;

            //codeTime - timer剩下的时间中codeTime中的比例
            image.fillAmount = (codeTime - timer) / codeTime;

            //冷却时间到
            if (timer >= codeTime)
            {
                image.fillAmount = 0;
                timer = 0;
                isStart = false;
            }
        }
    }

    /// <summary>
    /// 开始单击
    /// </summary>
    public void BtnClick()
    {
        isStart = true;
    }
}