关于Unity中UI中的Image节点以及它的Image组件

 

一、图片的Inspector面板属性

Texture Type：一般是选择sprite(2D and UI)

Sprite Mode：一般是选择Single

Packing Tag：打包的标志值，最后打包的时候会把Tag相同的所有小图打包成一个大图。不像cocos打包图集需要用到第三方软件，这里Unity会帮我们把相同Tag的图片打包成大图，非常方便。

Pixels Per Unit 100：表示100像素为1个Unity单位(1米)，也可以在Scene视图中看出，640X960分辨率的图片在视图中占的网格横方向有6格多一点，竖方向9格多一点。

Pivot：表示锚点的位置，就是图片自身原点的位置(center==(0.5,0.5))　　

Sprite Editor按钮，在Pivot右下角，很容易被忽视，点开会有一个面板跳出来，这里是设置图片的九宫格缩放区域，就是指定哪些部位要缩放，自己用线拉出一个井字区域。

Filter Mode：缩放模式，用默认的就好

　　　　　　(1)Point(no filter)：没有缩放

　　　　　　(2)Bilinear：B样条线性插值，放大几倍，就是把同样的像素复制几次。

　　　　　　(3)Trilinear：

注意：图片修改后一定要记得点击Apply按钮，应用设置，不然不会有改变。

 

二、Image节点的Image组件

1.把图片设置好后拖进Image节点的Source Image属性中，点击Set Native Size按照图片的原始大小填充Canvas。

2.Color属性可以对图片进行颜色混合，白色就是什么色也不加，原色。

3.Image Type：simple缩放的类型是拉伸

　　　　　　　　Tiled缩放的类型是平铺，像铺地板瓷砖一样的。

　　　　　　　　Slice缩放的类型是九宫格缩放，就像微信聊天的气泡一样，只有部分拉伸。原理就是把图片分成九宫格那样的区域，四个边角不变，只改变中间的区域，中间的横和中间的竖。

　　　　　　　　　　 这样缩放之后，再把四个边角贴上去，整体形状就不会改变。

　　　　　　　　Filed指定区域显示，垂直，水平，圆周。比如一个圆，可以指定它只显示一个半圆，或者四分之一圆显示。经常用于游戏中的圆形进度条显示。

　　　　　　　　　　Filed Method：(1)Radial 90 (2)Radial 180 (3)Radial 360按照角度来裁剪，一般是按照360度裁剪的。 (4)Vertical垂直裁剪 (5)Horizontal水平裁剪

　　　　　　　　　　Filed Origin：开始的点，Button就是中间底部的那个点开始，不断变换圆心角来裁剪圆。　　　　　　　　　　　　

　　　　　　　　　　Filed Amount：表示裁剪的比例多少[0,1]，0到1进度条是递增的，1到0进度条是递减的。

　　　　　　　　　　Clock Wise：逆时针还是顺时针，勾选的时候是顺时针

 

三、九宫格缩放步骤

a.把要九宫格缩放的图片点击Sprite Editor按钮选择缩放区域，点击Apply

b.把设置好的图片拉到Image节点的Image组件的Sprite属性里

c.选择Image Type为Slice

d.改变Image节点的Width和Height大小，进行缩放，发现图片中间部分缩放，没有指定的边角区域不缩放

 

四、Filed缩放步骤

a.把设置好的图片拉到Image节点的Image组件的Sprite属性里

b.选择Image Type为Filed，这时候会多出几个属性进行选择

c.配置好新属性，并拖动Filed Amount来看效果

d.写一个脚本挂在Image节点(具体节点名字是clock_bar)上来实现圆形进度条的效果，这个效果可以用于技能冷却时间显示。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class clock_bar : MonoBehaviour {
    Image img;
 
    float total_time;
    float now_time;

    bool is_running = false;
    // Use this for initialization
    // 要把组件的属性绑定到编辑器，我们需要在组件类里面加上public，默认是关闭的，打钩是启动的意思
    public bool play_onload = false;
    
    void Start () {
        this.img = this.GetComponent<Image>();
        if (this.play_onload) {
            this.show_time_action(15.0f);
        }
    }
    
    // 15秒时间就到了
    public void show_time_action(float total_time) {
        this.img.fillAmount = 1.0f; // 当前的时间是满的
        this.total_time = total_time;
        this.now_time = 0;

        this.is_running = true; // 开启倒计时的动画
    }
    // Update is called once per frame
    void Update () {
        if (!this.is_running) { // 没有开启这个倒计时的动画
            return;
        }

        this.now_time += Time.deltaTime; // 走过的时间
        float per = this.now_time / this.total_time; // 过去时间的百分比
        if (per > 1.0f) {
            per = 1.0f;
        }
        // 我们计算的是剩余时间的百分比
        per = 1.0f - per;

        this.img.fillAmount = per;
        if (this.now_time >= this.total_time) {
            this.is_running = false;
        }
    }
}

 

五、小技巧：

当我们想使用Image组件类定义组件实例的时候，却发现编辑器提示没有这个方法

找到Image组件在Inspector面板中的位置，点击右上角有一个问号标志，打开就会显示API，可以知道Image原来是属于UI包的，没有导入包，所以提示类不存在

using UnityEngine.UI;