Unity UGUI -- Image

最新推荐文章于 2024-09-12 23:24:37 发布

z2014z

最新推荐文章于 2024-09-12 23:24:37 发布

阅读量1.8k

点赞数

分类专栏： Unity 学习文章标签： unity

本文链接：https://blog.csdn.net/z2014z/article/details/119672346

版权

学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

Unity

14 篇文章 0 订阅

订阅专栏

Unity UGUI – Image

Image控件

Image控件向用户显示非交互式图像。这可以用于装饰、图标等，图像也可以从脚本更改来反映其他控件的变化。该控件类似于Raw Image 控件，但提供了更多的选项来动画图像和精确归档控件矩形。然而，Image控件要求它的纹理是精灵，而原始图像可以接受任何纹理。

Properties 属性

Property:	Function:
Source Image 图像源	The texture that represents the image to display (which must be imported as a Sprite).
Color 颜色	The color to apply to the image. 图片的颜色
Material 材质	The Material to use for rendering the image. 图片的材质
Image Type	The method used to display the image. The options are Simple, Sliced, Tiled and Filled (see below).
Preserve Aspect (Simple and Filled Image Types only)	Should the image’s original proportions of height and width be kept rather than rescaled?
Fill Center (Sliced and Tiled Image Types only)	Should the center slice of the image be filled as well as the borders?
Fill Method (Filled Image Type only)	Specifies the way the image should “grow” to fill the space during an animation. The options are Horizontal, Vertical, Radial90, Radial180 and Radial360 (see below).
Fill Origin (Filled Image Type only)	The point in the image from which the fill should proceed. The options are various combinations of Bottom, Top, Left and Right, depending on which Fill Method is selected (see below).
Fill Amount (Filled Image Type only)	The fraction of the image (range 0.0 to 1.0) that is currently filled.
Clockwise (Filled Image Type only)	Should the fill proceed in a clockwise direction? (Radial fills only.)
Set Native Size	Button to set the dimensions of the image box to the original pixel size of the texture.

Raycast Target 选项：

控件是否需要响应，勾选后事件会在EventSystem在Update的Process触发。

Packing Tag：

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

Pixels Per Unit 100：

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

Pivot：

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

Image Type

1: Simple: 图片缩放到目标大小;

2: Slice（切片）: 图片按照九宫格缩放;

3: Tiled（平铺）: 图片平铺填充到目标大小;

4: Filled:指定区域显示，垂直，水平, 圆周;

Simple

图片整张全显示，不裁切，不叠加，根据边框大小会有拉伸。

Preserve Aspect（锁定比例）：针对Simple模式，勾选之后，无论图片的外形放大还是缩小，都会一直保持初始的长宽比例。

使用场景：游戏背景、图示、对话框背景、一般图像

Sliced

图片9宫格拉伸，如下图，图片的四个角会保持原状，中间的区域会随着方向进行拉伸。1和4部分会随着图片的横向拉伸而拉伸，2和3部分会随着图片的纵向拉伸而拉伸，图片的中间部分会拉伸5进行填充。

Fill Center（填充中心）：勾选后，5显示，反之，5不可见。

使用场景：对话框、按钮、血条

注意事项：

使用Slice時，会比Simple/Tile用更多Vertices (4 vs 36)；
需要在Sprite Editor中，设定相关图片的Border；
注意图像中的展开部分，在拉伸后是否美观；

Tiled

若图片已经过裁切，则使用Tiled模式后，根据图片边框拉伸，图片的四个角会保持原状，而1和4部分会随着图片的横向拉伸而拉伸，2和3部分会随着图片的纵向拉伸而拉伸，图片的中间部分会用5进行平铺填充。若图片未裁切，则使用Tiled模式后，根据图片边框拉伸，图片保持原大小不做变化，只是用自身平铺填充。

Fill Center（填充中心）：（已裁切的图像源才有此选项）勾选后，5显示，反之，5不可见。

使用场景：背景

注意事情：

需要在Sprite Editor中，把图片的Wrap Mode设定为Repeat,否则会产生许多不必要的Vertices；
要确保Tile无缝地拼到其他Tile；

Filled

Filled（填充的）：指定区域显示，根据填充方式、填充起点、填充比例决定图片显示哪一部分。

Fill Method（填充方式）：分为Horizontal水平、Vertical垂直、Radial90度圆、Radial180度圆、Radial360度圆。

Fill Origin（填充起点）：Bottom、Right、Top、Left，随着填充方式不同有所变化。

Fill Amount（填充比例）：0是完全不显示，1是完全显示。

使用场景：血条、经验、魔法量、下载进度、完成度

图片资源的Inspector面板属性

导入的图片资源，在Inspector面板可以看到如下属性

Texture Type 选项：贴图类型

Default：默认

Normal map：法线贴图

Editor GUI and Legacy GUI：UI贴图

Sprite(2D and UI)：精灵

Cursor：鼠标指针

Cookie：遮罩贴图

Lightmap：烘焙贴图

Single Channel：单通道

UI切图一般使用Sprite(2D and UI)