简单的UI框架 | 一、UI界面的搭建
简单的UI框架
UI界面的搭建
文章目录
- 简单的UI框架
- 前言
- 一、UI资源的导入
- 二、游戏主界面设置
- 1.背景设置
- 2.游戏主玩法图标按钮
- 3.游戏主玩法界面
- 4.预制体
- 总结
前言
本文将会学习到如何搭建这样基本的UI界面。
一、UI资源的导入
直接将下载好的资源文件夹拖入Assets文件下即可
在设置图面的时候需要注意,点击图片,需要将图片的Texture Type设置为如图中的类型,因为此模式为2D游戏中的UI资源类型,再用资源之前需要先设置。
二、游戏主界面设置
1.背景设置
首先建立一个Canvas画布,此画布用来存放UI界面的所有东西,并显示在Game界面的最上方,是人机交互的主要界面。
然后再画布下建立一个Panel(Panel控件又叫面板,面板实际上就是一个容器,在其上可放置其他 UI 控件),命名为MainMemuPanel(重新命名是为了以后在代码中调用的时候可以方便的找到),并在MainMemuPanel下新建一个Panel和Image,分别用来存放游戏主玩法图标的按钮和人物面板背景图片。
点击MainMemuPanel,在右边找到Source Image,将我们的背景图片加载进去。
此时我们的背景图片已经导入完毕,可以开始接下来的操作。
拓展:点击MainMemuPanel右边的Color,打开Color面板。
下面会有四个可拉动的选项,其中的第四项为透明度的选择,让我们把透明度拉小之后可以发现背景图片变得透明,这样也可以方便我们在玩游戏的时候避免背景图片太深,造成的观感问题。
2.游戏主玩法图标按钮
在上面我们在MainMemuPanel下建立了一个Panel用来存放游戏主玩法的图标按钮的面板,我们将它命名为IconPanel。接下来我们要开始建立游戏主玩法的图标按钮。
首先在IconPanel下建立一个Button,命名为TaskButton,用来描述我们的人物图标按钮。
Button控件会自动生成一个Text控件,用来为我们的Button命名。
点击TaskButton,同样将Source Image选择为我们的任务图标资源。
在这个界面最下方有一个按钮叫做 Set Native Size,用来将我们的图片变换为原来的大小,这样我们在调整按钮图片大小时不会出现显示的问题。
接下来我们点击TaskButton下的Text控件,将Text内容设置为“任务”即可。
然后再Scene中将任务见面按钮调整到我们希望的位置和大小即可。
接下来我们分别要建立背包、战斗、技能、商店、系统图标按钮,我们可以在Hierarchy界面找到我们的TaskButton,直接复制粘贴即可,并重新命名,更换图标,设置Text内容即可,最后再Secne界面中调整他们之间的位置即可。
因为我们的工程只是刚刚开始,所以我只创建了一个Image控件来表示我的人物界面,后续不断地开发,将会对他进行更改。
此界面可参照上面的步骤进行。
3.游戏主玩法界面
有了图标按钮,就要有对应的点击按钮后产生的界面,因为只是再UI搭建阶段,所以只需要先建立界面就可以,后续再通过脚本文件实现他们之间的转换。
界面的搭建与上面的图标按钮搭建如出一辙。
我们在画布下方新建立一个Panel,命名为TaskPanel,用来表示任务界面,同样在Source Image中替换我们的界面资源。
这里我们需要界面一个Text和一个Button,分别来表示界面的名字和关闭界面的按钮。
Text控件中的内容当然就是“任务”,用来提示这个时任务界面。
Button控件,首先先将我们的资源导入,将其自带的Text控件可以删除,因为我们这里不需要告诉别人这个是关闭按钮。
最后的效果如下:
将这个界面中心与Secne中心一齐就可以。
同理其他的界面只需要复制粘贴即可,只是Text的内容不同。
至于各种界面内的效果,在我们后期的创建中会慢慢完善。
4.预制体
我们的画布上现在有很多东西,当我们的作品不断变大后,这样将很难管理,所以接下来我们要用到Unity中一个很重要的知识点——预制体
什么是预制体
unity预制体是用来创建和存储一个游戏对象的所有组件,各项属性和子对象。当需要多次重复使用同一个游戏对象时,便可以使用 预制体,将该游戏对象设置为预制体。
了解了预制体是什么那我们该怎么创建呢?
很简单只需要将Hierarchy界面中的GameObject、UI等,左键点击拖入我们要存放预制体的文件夹里面即可。这里我建立了一个UIPanel文件夹用来存放我的各种界面的预制体。
这样做的好处是,我以后要用到的时候,我可以方便的拿出来,并且重复的用,不用我每次都去重新创建。
创建好预制体之后,会发现Hierarchy界面中都变成了蓝色的文字,这样就说明创建成功了。
这样我们就可以将Hierarchy界面中的预制体全部删除,当我们要用的时候,在文件夹内直接拿出来用就可以。
总结
今天我们主要是将大概的UI界面给拼成功,这也是项目的第一步,同样学到了预制体是干什么的。
UI界面的完事将会在后续的不断更新中一点一点的去完善。
简单的UI框架 | 一、UI界面的搭建相关推荐
- 智慧北京02_初步ui框架_ 主界面_viewPager事件_xUtils_slidingMenu_网络缓存_数据传递...
智慧北京02_初步ui框架_ 主界面_viewPager事件_xUtils_slidingMenu_网络缓存_数据传递 1.使用Fragment搭建ui框架 参考分析图 1.1,Fragment生命周 ...
- 【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...
- jQuery的UI框架 Liger UI
jQuery的UI框架 Liger UI http://www.oschina.net/p/ligerui
- uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别!
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别! 文章目录 1.官网Popup 弹出层链接 2.属性不同 3.属性对照 4.弹出的方式 5.uView特有属 ...
- 关于uni-app的ui库、ui框架、ui组件
首先需要3个新认知: 传统vue的库,只是for web的,不能跨多端. 而微信小程序的库,虽然也可以用于app,但不能跨到h5和百度支付宝等其他小程序. 比如element-ui.mint-ui只能 ...
- 基于 jQuery 的前端 UI 框架 LuLu UI
LuLu UI 详细介绍 LuLu UI 是一个基于 jQuery,针对 PC 网站,兼容 IE8+ 或 IE7+ 的前端 UI 框架,包含 20+ 静态或动态 UI 组件. 上手简单 lulu整个项 ...
- 推荐一款多平台快速开发的前端UI框架 —— uView UI
本人体验了一遍,风格简约,功能齐全,正是心心念念的前端UI框架 配合uni-app 真正是一款多平台开发的神器!! 强烈推荐!! 官网直达:uView UI 体验链接:uView多平台前端开发UI - ...
- jQueryHTML5 UI框架Ignite UI 13.2新功能大揭秘(二)
Ignite UI框架新功能 兼容jQuery 2.0. 浏览器历史记录支持整合开源history.js库. 在触屏设备上为所有Ignite UI组件执行"fast click"功 ...
- python 移动ui框架_Touch UI:基于vue的移动端UI框架
Hi,我们做了一款高质量的.免费的移动端UI框架. 经过将两年多开发和项目实践,我们终于把Touch UI开放出来了.这是一套基于vue.js打造的移动端UI框架,包含近百种组件,几乎囊括了开发移动应 ...
- 新一代嵌入式UI框架 HaaS UI 使用JS在嵌入式开发炫酷前端
HaaS UI 是一款面向AIoT 领域的渐进式JS应用开发框架,以移动开发理念有效降低开发者研发AIoT带屏应用难度. 理念 移动开发模式,全面拥抱JavaScritp开源生态,且系统服务通过统一的 ...
最新文章
- Http Chunked Transfer Coding
- MySQL基本用户授权步骤
- VS2013环境生成和调用DLL动态链接库
- 考oracle ocm,Oracle数据库OCM考试系列教程与总结_OCM考试实验笔记
- cfiledialog指定位置和大小_位置度(True Position)中外解读2021(图文+视频)
- android pc模拟器哪个好,安卓模拟器电脑版哪个好用
- 自锁时间电路plc_1篇文章,4幅图,了解PLC接线和控制图就是这么简单
- arcgis批量按掩膜提取栅格
- 文件传输-对数据进行加解密的方法!
- Openstack命令
- 如何解决w3wp占用CPU和内存问题
- CSS兼容IE6,IE7,FF的技巧
- 理解最小生成树与权值最小边无关
- Cortex M3/M4 学习摘要(一)
- python与Android有关的库,这15个Android开源库,只有经常逛Github的才知道!
- Windows注册表开机自启,右键菜单,运行的位置介绍
- B - Distributing Ballot Boxes
- Win系统下将CER文件转成BKS文件
- 生命密码是几适合学计算机,数字生命密码是什么?
- Ambarella S6L55M 性能测试之内存篇