Unity3D - UGUI的手动搭建

了解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 滚动工具

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 滚动视图

Event System 事件系统

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

时间: 2024-10-29 03:24:23

Unity3D - UGUI的手动搭建的相关文章

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

背景 曾几何时,在Winform中,使用MessageBox对话框是如此happy,后来还有人封装了可以选择各种图标和带隐藏详情的MessageBox,现在Unity3d UGui就没有了这样的好事情了,所有的UI都需要自己来搞定了,幸好还有各种插件,Inventory Pro中的对话框方案不失一种通用,可复用的方案. YY(自己的想法) 所谓通用对话框,如果是自己实现的话有以下几点需要解决,窗体显示控制,窗体UI布局,窗体文字显示,窗体事件回调,窗体显示动画控制,窗体显示声音控制,窗体与其他窗

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

简介:三层架构(3-tier application) 通常意义上的三层架构就是将整个业务应用划分为:表现层(WebUI).业务逻辑层(BusinessLogicLayer).数据访问层(DataAccessLayer),公共层(ModelLayer).区分层次的目的即为了“高内聚,低耦合”的思想. 一.应用三层架构的优点 三层结构适合群体开发,每人可以有不同的分工,协同工作使效率倍增:各做各的模块,降低开发人员能力要求:方便系统功能的扩展以及后期的维护工作:最大优点是它的安全性.用户端只能通过

Linux手动搭建LAMP环境

当你看到标题里的“手动搭建”,你是不是会想,难不成还有“自动搭建”?当然......不是,这里的“手动搭建”是指按部就班的搭建Apache.MySQL.PHP环境,是相对于集成软件包而言的.所以你是不是能够猜到,我后续还会整理一篇通过集成软件包搭建LAMP环境的文章呢? 其实关于LAMP环境,我到现在都没有用过,好多东西也都不懂为什么要这么做,当初只是心血来潮,想自己搭建一个wiki,所以才着手研究的.我不是搞PHP的,也不是搞后端的,额......是不是暴露的太多了,仅仅是为了搭建环境而搭建环

手动搭建HPC(高性能计算)

撰写日期:2017年6月13日 作者:翟江恒 一般情况下不会采用手动的方式安装HPC,而是采用集成自动化方案来部署hpc,但是这些集成方案都是集成了指定的操作系统发行版本,比如常见的HPC集成自动化方案rockets,到目前为止集成centos 6.6,如果需要把HPC安装其他linux发行版本环境里面,就不能使用集成自动化方案,必须使用手动安装方法,这篇博客就是叙述如何手动搭建HPC的.敬请往下看. 1.     HPC简介 2.     HPC架构 3.     ssh无密码访问 4.   

手动搭建struct2中碰到的一点问题

手动搭建struct2的时候,总是会碰到找不到Filter的问题,到底是怎么回事呢? 其实,关键就在于导入的五个jar包,我们最好是将它放在web-inf目录的lib下,然后再组织导入,这样web.xml才能顺利找到. PS:web.xml就放在web-inf下面就好. 至于struct.xml,目前放在src目录下就好. 自己的技术水平一向让自己无语,碰到这样个问题都得搞半天--  手动搭建struct2中碰到的一点问题

新人学PHP,认为手动搭建环境而苦恼吗?这篇文章告诉你多简单!

本教程适用于初学PHP,想了解手动搭建PHP环境的童鞋. 一键环境和高手勿喷. 本教程以下列版本软件为例: 所需软件目录 我在这里的目录结构是(个人习惯) 安装与配置 apache 双击安装Apache 这里我们选择第一个,然后点击 Next. 这里随便填一个域名,随便填一个 email 就可以了. 然后选择 默认占用 80 端口就 OK 了点击 Next. 点击 Next. 这里选择安装路径 然后点击intall 正在安装中 安装完成 右下角这里是绿色的表示成功了! 这时我们在地址栏里输入 l

php 手动搭建环境

php手动搭建环境有好多种组合,版本号不一致,会导致搭建失败. 我搭建的组合是: php5.6+MySQL5.6+Apache2.4的组合. 一.PHP语言包下载 首先从官网上下载php5.6 http://windows.php.net/download#php-5.6 选择完整版下载: 二. Apache服务器下载 首先从官网上下载Apache2.4  http://httpd.apache.org/download.cgi 进入第二个界面,选择第二个选项: 根据电脑的不同,选择相应的位数:

React 系列文章(1): npm 手动搭建React 运行实例 (新手必看)

摘 要 刚接触React 开发, 在摸索中构建react 运行环境,总会遇到各种坑:本文,将用最短时间解决webpack+react 环境搭建问题. 1.如果你还没有React基础 看这里. 2.如果不知道webpack是啥?请 看这里. 3.如果你还没有装npm 看这里. 目 录 一.webpack+react 运行实例. 二.webpack 运行环境配置分析. 三.如何手动搭建一个webpack+react 运行环境. 一.webpack+react 运行实例 1.实例代码 源代码下载地址:

Arcgis Android 手动搭建开发环境

前言 本文为大家分享arcgis android 环境的手动搭建过程,默认你懂一定的java和android 基础知识,已经有android的开发环境.如缺乏以上环境和知识,请自行补充. 版本介绍 Arcgis android从2.0版本到现在(2015-08-31)最新的10.2.6版本,中间有多个小版本,简要说下.10系列是较新的系列,2.0系列是老古董了.其中,10.2.4开始支持shapefile和一些栅格数据了,详细请参考这里.如果没记错的话,在10.2.2系列开始,graphicla