image加载图片 ui unity_关于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)上来实现圆形进度条的效果，这个效果可以用于技能冷却时间显示。

usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;public classclock_bar : MonoBehaviour {

Image img;floattotal_time;floatnow_time;bool is_running = false;//Use this for initialization//要把组件的属性绑定到编辑器，我们需要在组件类里面加上public，默认是关闭的，打钩是启动的意思

public bool play_onload = false;voidStart () {this.img = this.GetComponent();if (this.play_onload) {this.show_time_action(15.0f);

}

}//15秒时间就到了

public void show_time_action(floattotal_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

voidUpdate () {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;