1.Sprite精灵是UI以及unity 2D的基本元素。在UI系统中, 所有图片的显示都必须通过精灵。
2.图片设置为精灵, 在Inspector窗口中将其Texture Type设置为Sprite(2D and UI), 并点击窗口右下角的Apply按钮。
![](https://i-blog.csdnimg.cn/blog_migrate/3fda7ca911d64079644382064bef6812.png)
(1).Sprite Mode:精灵模式, 常用的有Single单图、Multiple多图模式。
(2).Packing Tag:打包标签。具有相同标签的, 如果精灵打包模式是开着的, 打包时会被打成一张图集, 注意这些图片不能放在Resources目录下。
(3).Edit->Project Settings->Editor可以设置精灵的打包模式
![](https://i-blog.csdnimg.cn/blog_migrate/62c12b564379169241de585f2ebb9d70.png)
(5).Sprite Editor:编辑精灵
![](https://i-blog.csdnimg.cn/blog_migrate/eb2cfea48b405d8e2ecef1152f6de71c.png)
(6).Border边界在之后如切片类型Image的UI元素中会用到。L代表左边界, R代表右边界, T代表上边界, B代表下边界。我们可以直接在输入栏中填写正整数进行设置, 也可以拖拽图素上的绿色小正方形设置对应的边界, 最后点击Apply按钮, 完成设置。当设置了边界后, 俗称九宫格。
![](https://i-blog.csdnimg.cn/blog_migrate/e2079577dbac26df45ec2b877582e11d.png)
(7).Pivot:中心点。
(8).Pixels To Units:像素至单位, 多少像素对应世界坐标系中的一个单位。
3.Canvas画布, 它是所有UI元素的承载体。
4.创建画布
(1).在Hierarchy视图中, 鼠标右键, 然后选择UI, 然后选择Canvas
![](https://i-blog.csdnimg.cn/blog_migrate/82b8917973c5c0ec3cfc29cc6019fe01.png)
(2).创建完成, 在Scene视图中白色的矩形表示画布
![](https://i-blog.csdnimg.cn/blog_migrate/73bc3640e4855a5ac12ee7647f41fc89.png)
4.画布的第一个参数RenderMode的渲染模式有3种:Screen Space-Overlay、Screen Space-Camera以及World Space。
![](https://i-blog.csdnimg.cn/blog_migrate/155bc43ffcbdfc53ee5b7ab18c03f63b.png)
5.Screen Space-Overlay(屏幕空间-覆盖模式)的画布会填满整个屏幕空间, 并将画布下的所有UI元素置于屏幕的最上层, 或者所画布的画面永远"覆盖"其它普通3D画面。
(1).Pixel Perfect:只有RenderMode为Screen类型时才有的选项。使UI元素像素对应, 效果就是边缘清晰不模糊。
(2).Sort Layer:是UGUI专用的设置, 用于指明画布的深度。
6.Screen Space-Camera(屏幕空间-摄像机模式)和Screen Space-Overlay相似, 画布也是填满整个屏幕空间, 如果屏幕尺寸被改变, 画布将自动改变尺寸来匹配屏幕。不同的是, 在该模式下, 画布会被放置在指定摄像机的前方。在这种渲染模式下, 画布会看起来绘制在一个与摄像机固定距离的平面上。所有UI元素都由该摄像机渲染, 因此摄像机的设置会影响UI画面。
(1).Render Camera:摄像机
(2).Plane Distance:画布平面距离摄像机的距离
(3).Sorting Layer:是UGUI专用的设置, 用于指明画布的深度。
点击Sorting Layer, 然后点击Add Sorting Layer...
![](https://i-blog.csdnimg.cn/blog_migrate/10fdf81958f85433eb667bb741fbdbd4.png)
可以按”+”按钮添加Layer, 也可以按”-”按钮删除Layer。画布所使用的Sorting Layer越排在下面, 显示的优先级也就越高。
2.图片设置为精灵, 在Inspector窗口中将其Texture Type设置为Sprite(2D and UI), 并点击窗口右下角的Apply按钮。
![](https://i-blog.csdnimg.cn/blog_migrate/3fda7ca911d64079644382064bef6812.png)
(1).Sprite Mode:精灵模式, 常用的有Single单图、Multiple多图模式。
(2).Packing Tag:打包标签。具有相同标签的, 如果精灵打包模式是开着的, 打包时会被打成一张图集, 注意这些图片不能放在Resources目录下。
(3).Edit->Project Settings->Editor可以设置精灵的打包模式
![](https://i-blog.csdnimg.cn/blog_migrate/62c12b564379169241de585f2ebb9d70.png)
(5).Sprite Editor:编辑精灵
![](https://i-blog.csdnimg.cn/blog_migrate/eb2cfea48b405d8e2ecef1152f6de71c.png)
(6).Border边界在之后如切片类型Image的UI元素中会用到。L代表左边界, R代表右边界, T代表上边界, B代表下边界。我们可以直接在输入栏中填写正整数进行设置, 也可以拖拽图素上的绿色小正方形设置对应的边界, 最后点击Apply按钮, 完成设置。当设置了边界后, 俗称九宫格。
![](https://i-blog.csdnimg.cn/blog_migrate/e2079577dbac26df45ec2b877582e11d.png)
(7).Pivot:中心点。
(8).Pixels To Units:像素至单位, 多少像素对应世界坐标系中的一个单位。
3.Canvas画布, 它是所有UI元素的承载体。
4.创建画布
(1).在Hierarchy视图中, 鼠标右键, 然后选择UI, 然后选择Canvas
![](https://i-blog.csdnimg.cn/blog_migrate/82b8917973c5c0ec3cfc29cc6019fe01.png)
(2).创建完成, 在Scene视图中白色的矩形表示画布
![](https://i-blog.csdnimg.cn/blog_migrate/73bc3640e4855a5ac12ee7647f41fc89.png)
4.画布的第一个参数RenderMode的渲染模式有3种:Screen Space-Overlay、Screen Space-Camera以及World Space。
![](https://i-blog.csdnimg.cn/blog_migrate/155bc43ffcbdfc53ee5b7ab18c03f63b.png)
5.Screen Space-Overlay(屏幕空间-覆盖模式)的画布会填满整个屏幕空间, 并将画布下的所有UI元素置于屏幕的最上层, 或者所画布的画面永远"覆盖"其它普通3D画面。
(1).Pixel Perfect:只有RenderMode为Screen类型时才有的选项。使UI元素像素对应, 效果就是边缘清晰不模糊。
(2).Sort Layer:是UGUI专用的设置, 用于指明画布的深度。
6.Screen Space-Camera(屏幕空间-摄像机模式)和Screen Space-Overlay相似, 画布也是填满整个屏幕空间, 如果屏幕尺寸被改变, 画布将自动改变尺寸来匹配屏幕。不同的是, 在该模式下, 画布会被放置在指定摄像机的前方。在这种渲染模式下, 画布会看起来绘制在一个与摄像机固定距离的平面上。所有UI元素都由该摄像机渲染, 因此摄像机的设置会影响UI画面。
(1).Render Camera:摄像机
(2).Plane Distance:画布平面距离摄像机的距离
(3).Sorting Layer:是UGUI专用的设置, 用于指明画布的深度。
点击Sorting Layer, 然后点击Add Sorting Layer...
![](https://i-blog.csdnimg.cn/blog_migrate/10fdf81958f85433eb667bb741fbdbd4.png)
可以按”+”按钮添加Layer, 也可以按”-”按钮删除Layer。画布所使用的Sorting Layer越排在下面, 显示的优先级也就越高。
(4).Order in Layer:在相同Sorting Layer下的画布显示先后顺序。数字越高, 显示的优先级也就越高。
7.World Space即世界空间模式。在此渲染模式下, 画布被视作与场景中其他普通游戏对象性质相同的类似一张画片(Plane)的对象。画布的尺寸可以通过Rect Transform设置, 所有UI元素可能位于普通3D物体的前面或者后面显示。当UI为场景的一部分时, 可使用这个模式。它有一个独有的参数Event Camera, 用来指定接收事件的摄像机, 可以通过画布上的GraphicRaycaster组件发射射线产生事件。8.画布的3种渲染模式
渲染模式 | 画布对应屏幕 | 摄像机 | 像素对应 | 适合类型 |
Screen Space-Overlay | 是 | 不需要 | 可选 | 2D UI |
Screen Space-Camera | 是 | 需要 | 可选 | 2D UI |
World Space | 否 | 需要 | 不可选 | 3D UI |
9.UI元素的关系