400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > unity > 【Unity基础知识】Unity开发之自动布局组件

【Unity基础知识】Unity开发之自动布局组件

  • 来源:Unity干货资料
  • 2021-03-05 11:27:41
  • 阅读()
  • 分享
  • 手机端入口

在游戏中,很多UI界面中都会使用到自动布局组件,使用其可以大大的节省开发时间,Unity中自动布局组件有三种:

1:Horizontal Layout Group,水平布局组件,元素会一个挨着一个沿着水平方向排过去,如果超过了这个该Layout Group宽度,并不会换行,而且直接继续排下去。

2:Vertical Layout Group,垂直布局组件,垂直布局组件。

3:Grid Layout Group,网格布局组件。

Horizontal Layout Group游戏中最常见的就是技能栏的展示,如下图:

Vertical Layout Group游戏中最常见的就是任务列表的展示,如下图:

Grid Layout Group游戏中最常见的就是背包或者商城栏,如下图:

我们今天主要介绍Horizontal Layout Group水平布局组件,下面详细介绍该组件:

Padding:Layout边缘的间隙(左,右,上,下)。

Spacing:Layout元素之间的间隙。

Child Alignment:子元素的排列方式,就是对齐的九种样式。

Control Child Size:是否可以控制子元素的宽高。

Control Force Expand:是否强制子元素填充满多余的空间,自适应宽高。

下图中没在场景中创建了Panel,将Panel位置设置在右下角,并为Panel添加了水平自动布局组件:

接下来为该组件添加子元素,Image,观察其变化发现Image布局并不在Panel内部

然后我们在给Panel添加Image:

添加可以得知,每次添加后,Panel内部的Image组件会自动布局,并且布局的方向是水平方向,游戏中的面板,比如技能栏,还有属性,任务,商城,背包栏,可以发现他们一般情况下位置都是差不多的,无非就是换了个展示的图片而已,所以使用上边的水平自动布局组件我们只需要简单的更改下布局位置即可。

接下来我们一起来创建技能栏,如下图所示:子元素大小为200*200,居中显示,水平方向上间距为20,距离顶部和底部距离也为20:

图所示技能条当中的技能呈现水平布局形式,所有我们可以先创建技能条的背景ItemBar,ItemBar中的技能呈现为水平布局形式所以应该给添加水平布局组件Horizontal Layout Group。Padding的Top值为20,Bottom值为20,Spacing值为20。设置子元素对齐方式为Upper Center。

接下来给选择ItemBar,创建UI控件Image,根据题意可以得知需要创建五个即可,Image大小修改为200,200即可:

这时技能框已经有了,接下来需要将需要的素材转换成为2D精灵

因为图中底层图片是技能外框,所以可以将技能外框图片拖拽到到Image控件的SourceImage处:

效果如图:

技能外框做好之后,需要添加技能了,因为技能是可以点击的所以可以给每一个Image外框下添加一个子控件Button,需要自行调节Button大小:

Button下方的Text控件不需要所以将其删除:

其余几个控件都需要重复上述添加Button,调节大小,删除Text操作:

因为点击Button控件可以看到其身上是有Image组件,所以可以找到想要的技能精灵图片,将其添加到SourceImage处,对其他控件重复操作:

如果上述操作没有问题的话,大家会发现我们的技能展示栏就大功告成了:

通过上述的操作,想必大家对Unity水平自动布局组件有了一定的认识,期待下期和大家再会,我们一起来继续畅游在Unity的海洋中!

学习疑问申请解答
您的姓名
您的电话
意向课程
 

中公优就业

IT小助手

扫描上方二维码添加好友,请备注:599,享学习福利。

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”,享学习福利
QQ交流群
在线疑问解答
(加群备注“网站”)
IT培训交流群 加入群聊 +
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
优就业官方微信
扫码回复关键词“大礼包”
享学习福利

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
 
课程资料、活动优惠 领取通道