unity_ UI

怼烎@ 2021-12-23 05:29 407阅读 0赞

[unity\_ UI][unity_ UI]

# 一、图片命名 #

**所有命名不能使用中文，需要使用英文取名，可以适当缩写，以下划线 \_间隔，每个单词首字母大写**

1.图片命名

图标类：Icon\_xxx，

有不同大小的，Icon\_\*\*\*\_25x25。

可加类型区分，Icon\_Skill\_\*\*\*，Icon\_Attibute\_\*\*\*

界面背景、底版元素：Panel\_BG\_xxx，或者序号Panel\_BG\_001

子项元素类：Item\_xxx, Item\_BG\_xxx

按钮类：Btn\_xxx

其他功能类：比如滑动条前景Bar\_FG，后景Bar\_BG

其他杂项图类： SP\_xxx

2.预物体窗口界面命名：Window\_英文名，每个单词首字母大写，比如Window\_HandBook，Window\_Level，Window\_WeaponChange。

次根节点：root

按钮：Btn\_

页签类：Tab\_Button，Tab\_Root等

同一类子项元素：Parts\_

##  ##

## 一 导入图片后，全选所有图片，在Inspector面板中将图片属性设置参考如下数据： ##

![1332166-20180402102416887-1077829599.png][]

注意，![1332166-20180402102448937-1820263465.png][]一定要改这个，否则无法读取图片文件。

![1332166-20180418133946682-959640443.png][] 这两个都要改

## 二 当图片![1332166-20180402102636023-1363180291.png][]需要被使用为![1332166-20180402102659197-96105863.png][]： ##

**步骤1** 选中对应图片，然后在Inspector界面中点击![1332166-20180402102825534-1894226366.png][]

**步骤2** 点开窗口如下，中间的区域是当图片被放大时，要被拉伸的区域

![1332166-20180402134402819-558678980.png][]

（注意Apply位置）上述图片能极大的节省图片大小和空间，所以各种背景、长条、短条等请尽量使用可拉伸的九宫格图片。

## 三 点击![1332166-20180402103726849-642109621.png][]，![1332166-20180402103747573-1316743199.png][]，![1332166-20180402103801083-625239015.png][]，创建图片UI ##

1.属性图：

![1332166-20180402103829356-1656001336.png][]

2.Image的模式设置：

![1332166-20180402103924935-1805509961.png][]![1332166-20180402104004635-34924216.png][]

出错点：当图片a被Sprite Editor编辑过，那么当Image被创建且选择该图片a时，ImageType会自动选择第二个Sliced。如果想要图片的初始大小，就选择第一个Simple，然后点击![1332166-20180402134958523-1771586327.png][]。

## 四 点击![1332166-20180402103726849-642109621.png][]，![1332166-20180402103747573-1316743199.png][]，![1332166-20180402104117892-216163618.png][]，创建文字UI ##

1.属性图：

## ![1332166-20180402104204856-705854327.png][] ##

## 五 同理，创建ButtonUI ##

1.属性图：

这里比较重要的只有下图一个参数：Transition。下面详解：

![1332166-20180402104549224-1452546964.png][]

Transition共4个选项：

![1332166-20180402110224187-970919798.png][]

## 六 同理，创建Scrollbar ##

![1332166-20180402113224068-806091924.png][]

## 七 规范化：UI界面应有的结构 ##

![1332166-20180402110609627-1929742137.png][]

即：

![1332166-20180402111246315-2126477130.png][]

## 八 预制体 制作与修改 ##

1.制作预制体：

在场景中创建完界面后，将对应界面拖到Project窗口中的对应目录

![1332166-20180402111639424-970122863.png][]

2.修改预制体：

a.将预制体拖入场景

b.修改其参数

c.选中场景中被修改的预制体，在其Inspector界面，点击Apply，就相当于同步保存设置了（同步保存Asset文件夹中的预制体）

![1332166-20180402112117754-1486016242.png][]

## 九 其他组件 ##

1.组件GridLayoutGroup:(使子物体行列排布)

![1332166-20180402112741946-488782132.png][]

2.组件Outline:文字描边

![1332166-20180402112916841-1695233172.png][]

## 十 UI元素位置相关 ##

1.Unity操作窗口轴向设置：![1332166-20180402135712248-9402890.png][]

比较：

2.锚点：锚点是确定父级的哪个点为坐标（0，0）点

![1332166-20180402141349416-425992959.png][]

比较：

3.Image的中心点：

![1332166-20180402142154346-512671189.png][]

比较：

![1332166-20180402142359236-1275146472.png][]：![1332166-20180402142337850-1013765860.png][]

![1332166-20180402142753475-1336453182.png][]

## 总览 ##

![1332166-20180330180218522-20922142.png][]

*   *  一、Effects:![1332166-20180330180046946-966500607.png][]
        
         *  Shadow:

posted on 2018-03-30 18:33 [喜欢我就给我买栗子][Link 1] 阅读( ...) 评论( ...) [编辑][Link 2] 收藏

转载于:https://www.cnblogs.com/lizitang/p/8677955.html

[unity_ UI]: https://www.cnblogs.com/lizitang/p/8677955.html
[1332166-20180402102416887-1077829599.png]: /images/20211223/ee3c36680c5f4bd1a367ea9c00b2fe79.png
[1332166-20180402102448937-1820263465.png]: /images/20211223/9dcc1070cd2a44a8b493e916398d2f6c.png
[1332166-20180418133946682-959640443.png]: /images/20211223/5316d3bb49b149de99e49cc4d2f1052e.png
[1332166-20180402102636023-1363180291.png]: https://images2018.cnblogs.com/blog/1332166/201804/1332166-20180402102636023-1363180291.png
[1332166-20180402102659197-96105863.png]: /images/20211223/00ae6919b30b4b18939ac4f92f463bfa.png
[1332166-20180402102825534-1894226366.png]: /images/20211223/59b623d4e28b496b9707d444851cae7b.png
[1332166-20180402134402819-558678980.png]: /images/20211223/8484fa36312a4fa9ba11736f9156a27f.png
[1332166-20180402103726849-642109621.png]: https://images2018.cnblogs.com/blog/1332166/201804/1332166-20180402103726849-642109621.png
[1332166-20180402103747573-1316743199.png]: https://images2018.cnblogs.com/blog/1332166/201804/1332166-20180402103747573-1316743199.png
[1332166-20180402103801083-625239015.png]: /images/20211223/8a92da74d5014f908ef4f418d0880720.png
[1332166-20180402103829356-1656001336.png]: /images/20211223/3612999a88da4645894c579c94d11958.png
[1332166-20180402103924935-1805509961.png]: https://images2018.cnblogs.com/blog/1332166/201804/1332166-20180402103924935-1805509961.png
[1332166-20180402104004635-34924216.png]: /images/20211223/8f1586788bbc4dd6ae4b5e88312d9a9c.png
[1332166-20180402134958523-1771586327.png]: /images/20211223/94f26942e0c945469626ba4d6588f675.png
[1332166-20180402104117892-216163618.png]: /images/20211223/09a77a88fa084868845ea9192a21d220.png
[1332166-20180402104204856-705854327.png]: /images/20211223/29c52ed5fbf1499db832dad152a00138.png
[1332166-20180402104549224-1452546964.png]: /images/20211223/85f65015b8fe475388369c053d5eb0e3.png
[1332166-20180402110224187-970919798.png]: /images/20211223/eca2ecbd96ce47bbb2b1acc30eeb29e3.png
[1332166-20180402113224068-806091924.png]: /images/20211223/90a84fde2048457db564cb040ae336a0.png
[1332166-20180402110609627-1929742137.png]: /images/20211223/20475163f79b44369e570e21dc912782.png
[1332166-20180402111246315-2126477130.png]: /images/20211223/8d1650de04884d418990d9b11645a246.png
[1332166-20180402111639424-970122863.png]: /images/20211223/853efeb50ea44bfcad6ecbea0ea7a64c.png
[1332166-20180402112117754-1486016242.png]: /images/20211223/3abfec48c15f47b5bb53da0981f33367.png
[1332166-20180402112741946-488782132.png]: /images/20211223/ec3baef1706f48e090124a4ec2131761.png
[1332166-20180402112916841-1695233172.png]: /images/20211223/e3c7cc9d6d79414288d9c75d0cc74bf5.png
[1332166-20180402135712248-9402890.png]: /images/20211223/0f1dbdd2c7894f848525c9ec3aedba74.png
[1332166-20180402141349416-425992959.png]: /images/20211223/5c8e3492d2f843049aa6c72ad35567fd.png
[1332166-20180402142154346-512671189.png]: /images/20211223/8e65eb616d8e4285a0fb557ad0b2fc22.png
[1332166-20180402142359236-1275146472.png]: https://images2018.cnblogs.com/blog/1332166/201804/1332166-20180402142359236-1275146472.png
[1332166-20180402142337850-1013765860.png]: /images/20211223/47b9337fff9e47ee8d23ea68121ec337.png
[1332166-20180402142753475-1336453182.png]: /images/20211223/783e88ee47be4be19b223e2d66ea7516.png
[1332166-20180330180218522-20922142.png]: /images/20211223/5c88e3afd39d4be884b2eae54d6378ca.png
[1332166-20180330180046946-966500607.png]: /images/20211223/4eb2a1d507664f16b96ab24277842e96.png
[Link 1]: https://www.cnblogs.com/lizitang/
[Link 2]: https://i.cnblogs.com/EditPosts.aspx?postid=8677955