创建第一个UI

创建一个2D UI

  制作UI时,首先要创建UI的"根"。在Unity顶部NGUI菜单中选择Create,然后选择2D UI。

  创建完成后,在Scene窗口中,NGUI自动生成了一个名为UI Root的物体,其中带有一个Camera作为子物体。

  这个新生成的Camera,是NGUI生成的专门用来渲染UI的相机,当生成NGUI的UI Root时,就自动将生成的UI放在默认的UI Layer上。在这个相机上,只能看见UI Layer上的物体,也就是只能看见UI。因为是2D UI,所以从图中可以看到相机是正交相机。

  点击Camera,红色的举行是相机的视窗大小比例,它会根据Game视图中的屏幕长宽比设置自动调整。

创建一个3D UI

  创建3D UI的过程和创建2D UI的过程类似,NGUI依然自动生成了一个名为UI Root的物体,并带有一个Camera子物体,这个原理和2D UI类似,其中最大的区别就是相机的模式。3D UI的相机在Scene视图中是一个正交摄像机,将会支持UI的三维透视效果。

  在创建的UI中,可以发现UI Root物体和Camera物体上面都带有NGUI特有的脚本组件,其中UI Root物体上带有U IRoot和UI Panel两个组件,而子物体Camera带有一个UI Camera组件,这几个组件都是NGUI体系中比较核心的组件。

UI Root组件

  UI Root组件总是出现在NGUI的UI"树"的最顶层,也就是那个"根"物体中。它的作用是缩放UI。

  在UI Root组件中,它提供了3中缩放的方式,也就是UI Root组件下的Type值。这3种方式分别为PixelPerfect、FixedSize、FixedSizeOnMobiles。

  PixelPerfect等同于Flexible,是指永远保持像素大小不变,这样就可以让UI的图片永远是最清晰的,但是会导致分辨率高的屏幕下UI显得特别小;分辨率低的屏幕下UI显的特别大。

  FixedSize等同于Constrained,是和上一种缩放方案完全相反的方案。在FixedSize下,NGUI将不再保护图片的原尺寸,只会关心NGUI自己所需要的缩放参数,这种模式下必须设置UI Root的ManualHeight值,然后NGUI会将所有的控件按照和这个值的高度比例进行缩放。

  FixedSizeOnMobiles等同于ConstrainedOnMobiles,是两种方案的结合体,它会让UI在PC、Mac、Linux系统下自动采用PixelPerfect,而在移动设备上自动采用FixedSize。

  如果没有选择FixedSize,那么必须设置另外两种缩放模式下的MinimumHeight和MaximumHeight两个值,代表最小高度和最大高度。

  

UI Panel组件

  UI Panel有很多属性。其中,Alpha属性顾名思义是透明度,默认为1不透明。它将控制它旗下所有Widget(所有的UI控件都将带有Widget,因此它们都集成自Widget)的透明度,也就是它会让它的子物体里的所有UI控件都一起发生透明度变化,可以用来做整个UI的淡入淡出以及隐藏等。

  Depth深度属性。在NGUI中,每一个Panel都有Depth,每一个Widget控件也有Depth,Depth将决定渲染的顺序,直接影响了UI之间的前后重叠关系。Depth越高的控件将会显示在视野的上层,Depth越高的Panel也会显示在视野的上层。但是Panel的Depth权重远远高于Widget,也就是说,在大部分情况下,属于低Depth的Panel的控件,不管这个控件本身的Depth为多少,它都将显示在高Depth的Panel的控件后面。当有多个Panel的时候,此时尽量保证这些Panel不要共用同一个Depth,因为这将导致NGUI在渲染时无法以1个DrawCall完成,会以增加DrawCall的方式来保证渲染顺序不混乱,这样就增大了性能的开销。不过NGUI在碰到Panel有共有Depth的情况时会做出提醒。

  Clipping是剪辑视窗的功能,它将可以让一个面板只显示某一块区域。

  在高级选项中,Render Q可以理解为渲染顺序,默认为自动设置。这个选项在和粒子系统结合使用时会有影响。如果该Panel下的UI需要被灯光影响到(NGUI的UI是默认不接受灯光照射效果的),需要勾选Normals。如果该Panel下面所有的UI控件都不会被移动,那么可以勾选Static来将它们设置为静态的,这样会导致该Panel下所有的控件都将忽略位置、旋转、缩放的操作,永远保持不动。虽然这样可以提高一些性能,但是慎重使用。

UI Camera组件

  UI Camera这个组件的核心作用是:让带有这个组件的摄像机渲染出的物体能够接收NGUI的事件。如果自己创建了一个物体,并且希望对这个物体使用一些NGUI中的事件,例如OnPress()、OnDrag()等,就需要为渲染这个物体的摄像机添加UI Camera组件。

  在UI Camera中,它让事件支持多点触摸、鼠标键盘触摸屏等事件的接收。但是要注意的是EventMask这个选项,这个EventMask和相机中的CullingMask非常相似,相机的CullingMask是为了选择渲染哪些层的物体,这里的EventMask是为了选择接收哪些层的物体的事件。UI Camera会默认只接收创建UI时被自动设置的那个layer,但是,如果在制作UI过程中,在创建UI后因为某些原因修改了UI的层,一定要将UI Camera的EventMask修改过来,否则将会发现,单击UI没有反应,因为它接收不到这个layer的物体的事件。

时间: 2024-10-14 14:18:17

创建第一个UI的相关文章

Quick-cocos2d-x3.3 Study (一) --------- 创建一个UI标签

创建一个UI标签: 1 cc.ui.UILabel.new({ 2 UILabelType = 2, text = "Hello ,World", size = 64 3 }) 4 :align(display.CENTER, display.cx, display.cy) 5 :addTo(self) 6 7 UILabelType : 创建文本对象所使用的格式 8 1 表示使用位图字体创建文本显示对象,返回的是LabelBMFont 9 2 表示使用TTF字体创建文本显示对象,返回

制作第一个UI字体

为什么要制作UI字体 一般来说,会有系统默认字体共我们使用,但是出于以下两个原因我们经常会需要制作独特的字体. 1.系统字体的风格和美观程度等无法满足需求. 一般来说,系统字体都比较死板.生硬,风格单一,经常无法满足项目需求.当需要在某些地方显示一些造型独特的字体,更需要制作自己独特的字体文件才能满足这种需求. 2.应对系统字体丢失的情况. 某些玩家(特别是安卓玩家)如果经常从网上下载一些个性化的字体管理软件,会很容易导致系统字体丢失,这种情况一旦发生,会导致游戏内所有的文字都不能正常显示.为了

制作第一个UI图集

按钮分有两种形式,一种是普通按钮,也就是一张没有文字的按钮图片,在需要用时,就在上面写上不同的.当前所需要的文字.量一种按钮则是图片按钮,这种按钮的特点是整个按钮就是一张图片,它既是按钮也是图片. 在剖析UI资源结构时一定要秉承一下几个原则: 1.尽量保证还原设计图的效果,不损失质量,这是前提. 2.尽量发现重复的元件,而且重复的元件只需要一份就足够. 3.尽量分割得零碎一点,避免多个元件合并一起出图,这样对项目不利. 4.尽量使用九宫格来制作比较大的底板.底框等. 5.UI切图全部让美术人员以

【浅墨Unity3D Shader编程】之一 游戏场景的创建 & 第一个Shader的书写

本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨)    微博:http://weibo.com/u/1723155442 邮箱: [email protected] 作为一个系统介绍Unity3D中Shader编写的系列文章的开篇,本文的第一部分系列文章的前言,然后第二部分介绍了这个系列文章中我们会使用的游戏场景创建方式,最后一部分讲解了如何在Un

【浅墨Unity3D Shader编程】之一 夏威夷篇:游戏场景的创建 & 第一个Shader的书写

本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨)    微博:http://weibo.com/u/1723155442 邮箱: [email protected] 作为一个系统介绍Unity3D中Shader编写的系列文章的开篇,本文的第一部分为系列文章的前言,然后第二部分介绍了这个系列文章中我们会使用的游戏场景创建方式,最后一部分讲解了如何在U

使用Cordova创建第一个App和Cordova构建环境的配置

引言 通过上一篇文章我们已经对 Hybrid App 有了一定的了解,并且根据实际业务情况选择了 Cordova 来开发我们的APP, 如果对这些还不了解的话请查看上一篇文章,那么接下来我们就开始Cordova 之旅把! 安装Cordova CLI 由于Cordova命令行工具作为npm包发布,这对于我们前端开发的同学来说实在是太方便了! #全局安装Cordova $ npm install -g cordova 注 :对于在OS X和Linux上, npm命令前加sudo 是因为 cordov

创建第一个ArcGIS API for Silverlight应用

原文:创建第一个ArcGIS API for Silverlight应用 在完成前面的开发环境搭建以后,接下来实现我们的第一个ArcGIS API forSilverlight应用程序. 接下来我们一步一步来操作: 1.  打开Visual Studio2010,创建一个Silverlight应用项目及一个宿主的Web网站,如下图: 2.创建好的应用程序结构如下,包括一个Silverlight应用和一个宿主的Web项目. 3.接着右键点击Silverlight项目中的引用,选择添加引用,如下图:

Three-js 创建第一个3D场景

1.一个场景至少需要的三种类型组件 相机/决定哪些东西将在屏幕上渲染    光源/他们会对材质如何显示,以及生成阴影时材质如何使用产生影响    物体/他们是在相机透视图里主要的渲染队形:方块.球体等 2.浏览器兼容 Moziller Firefox:4.0版本以后开始支持:    Google Chrome:第9版以后开始支持    Safari:5.1版本开始支持:    Opera:12.00版本以后开始支持.要让Opera支持WebGL,你还需要打开opera:config文件,设置We

[Android Studio 权威教程]离线配置SDK,创建第一个AS项目

前三篇bolg我给大家分享了怎么安装Android Studio,但是我们还没有使用AS创建一个Android 的项目,那么这篇blog我们开始离线配置SDK,并且创建一个Android项目 没有看如何安装Android Studio的童鞋,请先看这里,然后回来我们继续: [Android Studio 权威教程]Mac下安装Android Studio [Android Studio 权威教程]Linux下安装Android Studio [Android Studio 权威教程]Window