unity ugui基础(一)

尽可能的让UI元素合批

首先创建一个新的场景,摄像camera为Solod Color

然后创建两个Button 去掉对应的Text,运行unity发现产生的Batches变为2

在进行UI设计额时候尽量少使用来自不同Atlas的材质,也尽量避免这种倾轧的情况(Scene视图调节为Writeframe模式可以更容易查看),尽可能把所有的文字放到图片之上,使用同种字体,更容易进行合批

在拼UI的过程中会添加很多图片文字,但是很容易会忽略其中一点就是把无用的RaycastTarget去掉,因为开启此选项,虽然此组建虽然不需要接受射线,但是它而然工作且消耗性能

特性是一个直接/间接继承自Attribute的类,约定俗成用attribute结尾,然后声明的时候可以省略

UGUI基础

  • 画布Canvas
  • 设置自适应
  • UI控件的绘制顺序

UI元素绘制顺序和在Hierarchy(层级视图)中的顺序。后面的将在更早的上面绘制。改变元素的层级关系(绘制顺序,上下关系),可以通过拖拽,进行简单的排序。也可以通过脚本:使用使用Transform组件上的方法:SetAsFirstSibing,SetAsLastSibing和SetSiblingIndex。

  • 绘制模式

1.在screen空间中渲染
2.在world空间中渲染

Screen Space-Overlay
Screen Space-Camera
World Space

  • UI控件的布局

RectTransform,让 UI 控件有了“自适应”的本事!

  • Rect Tool小工具

Rect Transform 组件除了拥有 Transform 组件的位置(Position)、朝向(Rotation)和缩放(Scale)属性外,还纳入了更多的属性: Width、 Height、 Anchors、 Pivot 和 Anchor Presets。
Width 和 Height 用于表示 UI 控件的长和宽
Pivot 用于表示 UI 控件的轴心点,在 Scene 视图中用蓝色的空心小圆圈表示;当开发者对 UI 控件做旋转处理的时候, UI 控件旋转时所围绕的点就是轴心点。

  • RectTransform组件 (重点

Rect Transform 组件除了拥有 Transform 组件的位置(Position)、朝向(Rotation)和缩放(Scale)属性外,还纳入了更多的属性: Width、 Height、 Anchors、 Pivot 和 Anchor Presets。

Width 和 Height 用于表示 UI 控件的长和宽 ;

Pivot 用于表示 UI 控件的轴心点,在 Scene 视图中用蓝色的空心小圆圈表示;当开发者对 UI 控件做旋转处理的时候, UI 控件旋转时所围绕的点就是轴心点。

  • Anchors属性

用于指定自身相对父级的布局。锚点一共有四个,分别对应自身矩形的四个顶点。在父级元素形状发生变化时,四个锚点到四个顶点的偏移offset不变。

从锚点的位置所导致 UI 控件自适应的效果上来看,应该发现一个不变的真理,就是表示锚点的 4 个三角形,始终与 UI 控件边框 4 个角的距离是固定的。

Min 记录的是 Anchors 左下角小三角的位置, Max 记录的是 Anchors右上角小三角的位置。

使用 Anchor Presets 属性也可以一并设置 UI 控件的 Pivot 和 Position 属性,只需要按下 Shift 和 Alt 键盘即可

可视功能的UI组件

  • Text控件

Material:用于设置文字的材质。注意:游戏场景中的文字控件本身就是一个游戏对象,当前就可以设置它的材质属性了。
Character 表示接下来的属性负责设置字符的格式:
Line Spacing:用于设置文字的行间距
Rich Text:决定文本中的标记元素是否可用
Paragraph 表示接下来的属性负责设置字符构成的段落的格式:
Alignment:用于设置段落的对齐方式
Horizontal Overflow:当段落内容的宽度大于 Text(Script)组件本身的宽度时,处理段落内容有两种可选的方式,分别为 Wrap(换行)和 Overflow(溢出)。
Best Fit:是否应该忽略对文字大小的设置,让字体的大小自动改变到能让段落的内容全部显示出来的状态

  • Image控件

用于向玩家显示不可交互的图片信息,常作为游戏场景的装饰。

Source Image:指定 Image(Script)组件要显示的图片;

Image(Script)组件显示的图片必须是 Sprite 类型的。这就要求开发者在将这个图片导入到 Unity 中的时候,设置此图片的 Texture Type 属性为 Sprite(2D and UI)。

Image Type 用于设置图片的显示类型,可选的属性值有 Simple、 Sliced、 Tiled 和 Filled。不同的图片显示类型,导致了 Sprite“填充”图片控件的不同方式。

Simple: Sprite 将直接显示在图片控件中。默认情况下,如果图片控件的大小与 Sprite不一致时,后者将经过拉伸处理来符合前者的大小;但如果此时复选了Preserve Aspect属性,那么图片在经过缩放处理时,长宽的比例将保持恒定。

Sliced:Sprite 将被看作是由 9 个切片组成的;若此时选中了 Fill Center 属性,那么将显示完整的中间切片.

Tiled:此种类型的 Sprite 一般尺寸较小;为使此 Sprite 填满整个图片控件,就会在保持 Sprite 尺寸不变的前提下不断重复,就像是在铺地板砖一样.

Filled:此种类型的 Sprite 与 Simple 相似,但是它可以表现出一种“从无到有”的呈现过程;“呈现方式”也叫“填充方式”,由 Fill Method 属性决定,可选项有 Horizontal、Vertical、Radial 90、Radial 180 和 Radial 360, Fill Origin 决定了填充操作的起点,Fill Amount 决定了填充的进度。

Set Native Size:单击此按钮,将使得图片控件的大小主动调节到与 Sprite 原始大小 一致

  • RawImage控件
  • Mask组件

拥有Mask(Script)组件的 UI 控件,可以限制其子对象的显示范围,即当子对象的显示范围明显大于父对象的显示范围时,游戏视图就只显示父对象范围内的子对象,其它部分自动隐藏。父对象是 Panel,子对象是 Image,为前者添加 Mask(Script)组件

image

Show Mask Graphic:此属性决定是否显示父对象上的图片

参考文献:

https://www.jianshu.com/p/2b5e8c11c4ea

https://blog.csdn.net/bobo553443/article/details/79484144

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,009评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,808评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,891评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,283评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,285评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,409评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,809评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,487评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,680评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,499评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,548评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,268评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,815评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,872评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,102评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,683评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,253评论 2 341

推荐阅读更多精彩内容