了解UGUI组件的搭建方式,有助于搭建我们自己的UI界面。

Text 文本

  text 是UGUI中的基本控件,在Hierarchyi面板创建一个空物体 - 给这个空物体添加一个Text组件即可实现与text空间相同的功能。

Image 图像

   Image 是UGUI中的基本控件,在Hierarchyi面板创建一个空物体 - 给这个空物体添加一个Image组件即可实现与Image控件相同的功能。

Raw Image 原始图片

  Raw Image 和 Image基本相同,

  功能上Raw Image比Image少了image Type功能,Raw Image可以添加所有类型的图片 而Image只能添加Spritie(精灵)类型的图片;

  性能上由于Raw Image比Image的功能少,Raw Image的性能比Image 的性能要好,Raw Image主要用于做一些不需要在游戏运行中不需要改动的图片,例如 背景图片。

Button 按钮

  Button中的组件:Image组件,Button组件,Text组件(非必需)。

  搭建方式:

    1.在Canvas下创建一个空物体(改名为Button)

    2.给这个Button添加一个Image组件和一个Button组件

    3.在创建一个空物体作为Button的子物体(改名为Text)

    4.给Text添加一个Text组件,即完成了控件Button的搭建。

Toggle 开关

  Toggle中的组件:Toggle组件,两个Image组件,Text组件

  搭建方式:

    1.在Canvas创建一个空物体(改名为Toggle)

    2.给Toggle添加一个Toggle组件

    3.添加一个Image控件作为Toggle的子物体,用于做开关的背景(将该控件改名为Background)

    4.添加一个Image控件作为Background的子物体,用于做开关的前景(将该空间改名为Checkmark)

    5.创建一个空物体作为Toggle的子物体(改名为Label)

    6.给Label添加一个Image组件或添加一个Text组件(注意:Image组件、Text组件、Raw Image组件不能同时存在于一个物体上)

    7.点击物体Toggle,找到它上面的Toggle组件,将Background拖拽到TargetGraphic属性上,在将Checkmark拖拽到Graphic属性上

    8.最后将每个物体调整到合适大小,即完成了控件Toggle的搭建

Slider 滑竿

  Slider中的组件:Slider组件,三个Image组件

  搭建方式:

    1.在Hierarchy面板创建一个空物体(改名为Slider)

    2.给Slider添加一个Slider组件

    3.添加三个Imge控件作为Slider的子物体(分别改名为Background、Fill、Handle)

    4.给每个子物体添加图片,并调整到合适的大小

    5.点击物体Slider,找到它上面的Slider组件,将Background拖拽到Target Graphic属性上 作为Handle未经过的区域,将Fill拖拽到Fill Tect属性上作为Handle经过的区域,将Handel拖拽到Handel Reck属性上作为拖动点。

    6.调整各个物体的大小即可完成Slider的创建。

注意:

  调整图片时Slider组件的Value值需为1,Handle需在滑竿右边。

  若果实现功能时图片位置异常,可能是Background和Fill的位置放反了。

Scrollbar 滚动工具

  Scrollbar中的组件:Scrollbat组件、两个Image组件

  搭建方式:

    1.在Canvas下创建一个空物体(改名为Scrollbar)

    2.给Scrollbar添加一个Scrollbar组件和一个Image组件

    3.添加一个Iamge控件作为Scrollbar的子物体(改名为Handle)

    4.点击物体Scrollbar,找到Scrollbar组件,将Handle拖拽到Target Graphic的位置和Handle Rect的位置

    5.调整各个物体到合适大小即可完成Scrollbat的搭建

注意:搭建时和Slider不同,创建滑块的位置时value值要为0,若为1则滑动条右侧会有空隙。

Dropdowm 下拉菜单

Input Field 输入框

  Input Fild中的组件:Input Fild组件、Image组件、两个Text组件

  搭建方式:

    1.在Canvas下创建一个空物体(改名为InputField)

    2.给InputField添加一个InputField组件和一个Image组件

    3.添加两个Text控件作为InputField的子物体(分别改名为Text、Placeholder)

    4.点击物体InputField,找到InputField组件,Target Graphic一般会默认添加它自身,将Text拖拽到Text Component的位置 用于显示用户输入的文本,将Placeholder拖拽到Placeholder的位置 用于显示提示信息(提示用户输入的内容)。

    5.调整各个物体到合适大小即可完成Input Dield的搭建

Canvas 画布

Panel 面板

Scroll View 滚动视图

  Scroll View 中的组件:Image组件和Scroll Rect组件、Image组件和Mask组件、

  搭建方式:

    1.在Canvas下创建一个空物体(改名为ScrollView)

    2.给ScrollView添加一个ScrollRect组件和一个Image,Image可添加图片做背景。

    3.创建一个空物体作为ScrillView的子物体(改名为viewport),该物体的大小为可见范围,若需要显示的内容超出了这个范围那么超出的部分会被隐藏。

    4.给viewport添加一个Mask组件和一个Image组件,(Mask中的Show Mask Graphic默认是勾选的 意思是显示viewport的背景图片,如取消勾选 则viewport中背景图片将不可见)

    5.创建一个空物体作为viewport的子物体(改名为Content),若Content的范围大于viewport的范围,那么覆盖部分可以在游戏运行过程中拖拽显示,也可以将要显示的内容作为Content的子物体,但是该子物体需要在Content范围内。

    6.点击ScrollView找到Scroll Rect组件,将Viewport拖拽到Viweport的位置,将Content拖拽到Content的位置。

    7.调整各个物体到合适大小即可完成ScrollView的搭建

Event System 事件系统

在自己搭建UI界面时最好先创建一个UGUI提供的控件,然后把控件删除保留Canvas和EventSystem

转载于:https://www.cnblogs.com/kao-la-bao-bei/p/7794909.html

Unity3D - UGUI的手动搭建相关推荐

  1. Unity3d UGUI 通用Confirm确认对话框实现(Inventory Pro学习总结)

    背景 曾几何时,在Winform中,使用MessageBox对话框是如此happy,后来还有人封装了可以选择各种图标和带隐藏详情的MessageBox,现在Unity3d UGui就没有了这样的好事情 ...

  2. Unity3d UGUI 实现底部UI自适应的功能(含工程)

    Unity3d UGUI 实现底部UI自适应的功能(含工程) 前言 UI的自适应常常在项目中使用到,特别手游中,不同比例屏幕的手机,如果能考一套UI自适应显示,能省去不少的开发工作量.这里只是浅浅的讨 ...

  3. .NET完全手动搭建三层B/S架构

    简介:三层架构(3-tier application) 通常意义上的三层架构就是将整个业务应用划分为:表现层(WebUI).业务逻辑层(BusinessLogicLayer).数据访问层(DataAc ...

  4. Windows7下手动搭建Apache+PHP+MySQL方法记录

    转载地址:http://zww.me/archives/25371 前言:本地调试 WordPress 主题一直是使用 XAMPP 搭建本地环境,但不知道什么原因,在比较多调用的主题(如CMS类)计算 ...

  5. WindowsServer2012 R2 64位中文标准版(IIS8.5)下手动搭建PHP环境详细图文教程(二)安装IIS8.5...

    //来源:http://www.imaoye.com/Technology/WindowsServer2012R264IIS85.html 阿里云服务器ECS Windows Server 2012 ...

  6. 手动搭建一个Spring Boot项目

    Spring Boot如果在电脑联网的情况下可以使用在线插件进行自动搭建,没有插件的情况可以手动搭建. 以下是eclispe手动搭建的流程: Eclipse→File→New→Maven Projec ...

  7. 最适合新手的手动搭建wamp环境教程

    最适合新手的手动搭建wamp环境教程 本来还想在博客上再发一篇教程,  但是实在是不想再写一次了,   所以就给大家下载链接吧 希望能够帮助到大家!!! 教程下载地址: http://download ...

  8. Linux下如何手动搭建论坛?

    一.手动搭建论坛 实验环境搭建: 设置虚拟机server的ip为172.25.254.212 虚拟机server的名字为server.westos.com 搭建yum源 然后在虚拟机里作解析vim / ...

  9. php 手动搭建环境

    php手动搭建环境有好多种组合,版本号不一致,会导致搭建失败. 我搭建的组合是: php5.6+MySQL5.6+Apache2.4的组合. 一.PHP语言包下载 首先从官网上下载php5.6 htt ...

最新文章

  1. win7能用的matlab,win7环境下使用matlab7.0(R14)方法
  2. dom4j 使用总结
  3. 关于不同的MySQL复制解决方案概述
  4. Pixhawk的传感器数据(陀螺、加计等)流程
  5. jQuery源码分析
  6. java幂等性原理_Java接口幂等性设计原理解析
  7. 有关DataVisualization类组件的研究——Silverlight学习笔记[43]
  8. 关于单元测试的思考--Asp.Net Core单元测试最佳实践
  9. 2.2 决策树原理与算法——python实战
  10. Luogu2024[NOI2001] 食物链
  11. U盘数据丢失后怎样恢复
  12. 再谈Radmin——对“自己丰衣足食”一文的补充
  13. 计算机应用基础网课试题及答案2020,2019-2020年度公共课计算机应用基础考试试题附答案(5页)-原创力文档...
  14. 如何获取easyclick手机安装包
  15. win10安装Sql Server2019教程
  16. 有关获取android唯一识别号IMEI的问题
  17. 服务器omv系统,开源NAS系统OpenMediaVault安装与体验
  18. API Promise化
  19. S60v5 GBA模拟器gpSP4Symbian v0.5安装使用图文教程
  20. 前端学习笔记2——错误解决,接口,echart

热门文章

  1. GDCM:gdcm::Dumper的测试程序
  2. ITK:计算边缘电势
  3. VTK:PolyData之ExtractSelectionCells
  4. VTK:IO之ReadLegacyUnstructuredGrid
  5. OpenCV gapi模块基本API的实例(附完整代码)
  6. OpenCV主成分分析(PCA)简介
  7. OpenCV使用Orbbec Astra 3D相机
  8. Qt Creator使用帮助模式
  9. OpenGL实现flocking (聚集)实例
  10. C语言二级指针内存模型建立