一、图片命名

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

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面板中将图片属性设置参考如下数据:

unity 获取路径下的文件名称 unity获取ui_Image

注意,

unity 获取路径下的文件名称 unity获取ui_Image_02

一定要改这个,否则无法读取图片文件。

unity 获取路径下的文件名称 unity获取ui_UI_03

 这两个都要改

 

二 当图片

unity 获取路径下的文件名称 unity获取ui_Image_04

需要被使用为

unity 获取路径下的文件名称 unity获取ui_锚点_05

步骤1 选中对应图片,然后在Inspector界面中点击

unity 获取路径下的文件名称 unity获取ui_锚点_06

 

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

unity 获取路径下的文件名称 unity获取ui_UI_07

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

三 点击

unity 获取路径下的文件名称 unity获取ui_锚点_08

unity 获取路径下的文件名称 unity获取ui_锚点_09

unity 获取路径下的文件名称 unity获取ui_锚点_10

,创建图片UI

 1.属性图:

unity 获取路径下的文件名称 unity获取ui_Image_11

2.Image的模式设置:

unity 获取路径下的文件名称 unity获取ui_锚点_12

unity 获取路径下的文件名称 unity获取ui_Image_13

出错点:当图片a被Sprite Editor编辑过,那么当Image被创建且选择该图片a时,ImageType会自动选择第二个Sliced。如果想要图片的初始大小,就选择第一个Simple,然后点击

unity 获取路径下的文件名称 unity获取ui_UI_14


四 点击

unity 获取路径下的文件名称 unity获取ui_锚点_08

unity 获取路径下的文件名称 unity获取ui_锚点_09

unity 获取路径下的文件名称 unity获取ui_Image_17

,创建文字UI

1.属性图:

五 同理,创建ButtonUI

1.属性图:

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

unity 获取路径下的文件名称 unity获取ui_Image_18

Transition共4个选项:

unity 获取路径下的文件名称 unity获取ui_Image_19

 六 同理,创建Scrollbar

unity 获取路径下的文件名称 unity获取ui_unity 获取路径下的文件名称_20

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

 

unity 获取路径下的文件名称 unity获取ui_锚点_21

即:

 

unity 获取路径下的文件名称 unity获取ui_锚点_22

八 预制体 制作与修改

 1.制作预制体:

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

unity 获取路径下的文件名称 unity获取ui_锚点_23

2.修改预制体:

a.将预制体拖入场景

b.修改其参数

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

 

unity 获取路径下的文件名称 unity获取ui_UI_24

九 其他组件

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

 

unity 获取路径下的文件名称 unity获取ui_Image_25

2.组件Outline:文字描边

unity 获取路径下的文件名称 unity获取ui_Image_26

 

十 UI元素位置相关

1.Unity操作窗口轴向设置:

unity 获取路径下的文件名称 unity获取ui_锚点_27

比较:

unity 获取路径下的文件名称 unity获取ui_Image_28

unity 获取路径下的文件名称 unity获取ui_UI_29

 

unity 获取路径下的文件名称 unity获取ui_锚点_30

 

unity 获取路径下的文件名称 unity获取ui_锚点_31

父级的哪个点为坐标(0,0)点

unity 获取路径下的文件名称 unity获取ui_unity 获取路径下的文件名称_32

比较:

unity 获取路径下的文件名称 unity获取ui_Image_33

 

unity 获取路径下的文件名称 unity获取ui_Image_34

unity 获取路径下的文件名称 unity获取ui_锚点_35

 

unity 获取路径下的文件名称 unity获取ui_Image_36

 

unity 获取路径下的文件名称 unity获取ui_UI_37

 

unity 获取路径下的文件名称 unity获取ui_锚点_38

 3.Image的中心点:

unity 获取路径下的文件名称 unity获取ui_Image_39

比较:

unity 获取路径下的文件名称 unity获取ui_锚点_40


unity 获取路径下的文件名称 unity获取ui_UI_41

 

unity 获取路径下的文件名称 unity获取ui_UI_42

 

 

 

 

 

 

 

 

 

 

 

 

 

总览

unity 获取路径下的文件名称 unity获取ui_UI_43

 

  • 一、Effects:
  • Shadow: