Unity3d ngui基础教程

转载 2015年02月01日 23:45:11
NGUI教程:步骤1-Scene
        更多精彩请关注【狗刨学习网】
      1.创建一个新的场景(New Scene)。

      2.选择并删除场景里的MainCamera。

      3.在NGUI菜单下选择Create a New UI,会打开UI创建向导。
        

     4.在创建向导中你能更改UI的基本参数。现在我们选Default layer,点击Create Your UI 按钮。

     5.就这样,你的UI便创建好了。
        

      注意: 如果在一个已存在NGUI的项目中你要跳过第二步,并且你要选择一个不同的UI层,你还要确保非GUI相机不渲染UI层。
在做具体UI控件之前,我们看看UI向导为我们做了什么。

      1.在UI Root (2D)对象上有个UIRoot脚本。这个脚本会重新调整游戏对象符合你的屏幕高度,有自动和手动选择高度。让你制定小部件在像素中的坐标,并且和游戏世界中的剩余对象相比依旧相对来说较小。

      2.Camera对象包含Camera和UICamera脚本。UICamera脚本包含NGUI的事件系统(event system)。

      3.Anchor包含UIAnchor脚本。虽然这个脚本可以附加给控件,但在这里可以避免Windows机器上半个像素偏移的问题。

      4.Panel对象有UIPanel脚本,UIPanel是一个容器,它将包含所有UI小部件,并负责将所包含的部件组合优化,以减少绘制命令的调用。
同时,你可能还注意Panel(仪表板)GameObject现在已经被选中了。也就是说下面添加的所有部件都将在作为它的子对象。

      对应的场景在插件中的Tutorial 1 - Scene中有:

       


NGUI教程:步骤2-Spirit

      现在让我们添加一些控件,在NGUI菜单中选择NGUI menu -> Create a Widget。

       

      这个向导会指导你建立一些基本的控件。需要选择所使用的图片集Atlas和字体集Font。

      因为是新建的项目,所有按下Atlas和Font按钮没有效果,相反会自动展示最近使用的元素。

      你想要做的事情是拖拽你想用的Atlas和Font进入到按钮旁边的区域。我们这里先选择Atlas为SciFi Atlas,字体为SciFi Font-Normal。

       

      接下来就是模板的问题。你通过在一堆模板中选择来挑选你想创建什么样的部件。

      注意我说的是“模板”。这个的模板只是为了方便而帮助你开始创建,当你真正使用NGUI的时候,你会经常花很多的时间来复制粘贴整个的小部件而不仅仅是用
  
      这个向导。现在,让我们创建第一个控件。

      1.假设我们Atlas选择的是SciFi Atlas,我们给Sprite选择Dark。

      2.点击Add To按钮,(如果按钮是灰色的,那是因为你没有选择Atlas)。.如果你不知道怎么找到它:在项目窗口有一个搜索栏,输入scifi即可。

      3.你的Sprite现在已经创建并选中了。不过它非常小,当你使用NGUI的时候,你总需要通过Transform来移动部件,放缩它们,旋转他们。

        

      一个非常重要的事情是同一个atlas中的控件不会使用Z轴,不过,你可以调整Depth参数来做前后的调整,如果后面项目结束的时候你用了多个atlase(或者多个UI面板),那么你就可以去调整Z轴变换。原因很简单:这允许你创建完全平滑的窗口,你可以转向一侧,而且在绘制的时候部件的顺序也不会被搞乱。

     在前往下一章的学习之前,你可以尝试添加更多的控件,比如加入一个Sliced Sprite(一个含有9个切片的Sprite,创建固定边框的控件最佳选择),一个Tiled Sprite(一个Sprite缩放填充整个自定义区域)和Filled Sprite(每个Sprite都会有一个单独的参数来控制哪些是可见的,常被用来做进度条或者滚动条)。如果你找不到它们也没关系,后面的教程将讲解它们。

     对应的场景在插件中的Tutorial2 - Spirit中有:

       


NGUI教程:步骤3-Sliced Sprite

     1.选择中Panel对象,用控件向导从atlas中添加一个"Dark"的Sliced Sprite。

     2.调整缩放为(500,500,1)。

     3.添加另外一个Sliced Sprite并设置缩放为(500,40,1)。

     4.更改第二个sprite的位置到(0,230,0)。

     5.更改Sprite的Dark为Light。

     6.向下图一样调整两个sprite的颜色直到你喜欢它们位置。

     7.调整Depth,让彩色的sprite在 Sliced Sprite前面。

      现在看上去有点像是小窗口了。

      对应的场景在插件中的Tutorial 3 - Sliced Sprite中有:

        



NGUI教程:步骤4-Tiled Sprite

     1.选择Panel对象,添加Tiled Sprite,并选择Honeycomb sprite。

     2.设置它的位置为(0,-19,0)和缩放为(494,457,1)。

     3.需要设置深度调整前后次序,将它往后调直到刚好在背景的前面。同时不要忘了调整窗口背景的深度(往后调点)。

     玩一玩这个spirit。试试看当你重新缩放它的时候会发生什么,也可以按照自己的意愿调整它的颜色使他看起来更好。

     你可以在任何时候通过选择Panel对象中的Debug Info的Geometry项然后在场景中点击你的部件来检验生成的几何网格。

     添加了这么多东西,目前依旧仅调用了一次绘画指令。

     对应的场景在插件中的Tutorial 4 - Tiled Sprite中有:

      


NGUI教程:步骤5-Label

    1.像前面讲的一样方法,选择Panel对象并在部件导航模板中添加一个Label控件。

    2.在点击Add To 按钮之后你的标签应该已经添加到了场景中并且已经被选中了,如果Add To按钮为灰色不可用,是因为你没有指定字体Font,可以从Project面板中给Font栏指定"SciFi Font-Normal"。

    3.在Inpector面板给刚添加的UILabel的Text项添加一些文本。比如Hello World!

    4.移动标签位置到(0,234,0),让它出现在标题栏上。

    你也可以创建一个不同的Label并且使用不同的字体。花点时间研究植入颜色的功能,可以使用16进制的值描述不同颜色(直接从PS中粘贴)。
以[FF0000]代表红色,插入[-]来还原到原来的颜色,在这之间的文本都会变为红色。。

    因为使用了相同的字体相同的材质,所有整个场景依旧是一个DrawCall。

    对应的场景在插件中的Tutorial 5 - Label中有:

       


NGUI教程:步骤6-Button

    现在,你应该可以很容易的创建一个看上去像是按钮的东西了,但还不知道如何让它接受点击事件。

    不过这很简单,任何带有碰撞的事件都会收到它应有的事件。

    所以,一个最简单的按钮你只需要在NGUI下选择Attach a Collider给控件:NGUI menu -> Attach a Collider。

   但是幸运的是,NGUI中已经嵌入了按钮模板,让我们看看。

   和前面一样,我们选择Panel,用使用向导创建一个Button。

    

    你能看到按钮不再像是一个简单的GameObject了,实际上有多个部分。
    因为按钮事实上是有几个部分组成的:一个是背景,一个是标签,还有一些脚本来处理按钮的事件。

    这就是NGUI的特性,多个小组件像积木一样组合成强大的控件。

    1.UIButtonColor当鼠标悬停在按钮或者按下的颜色。

    2.UIButtonScale当鼠标悬停在按钮上时按钮放大。

    3.UIButtonOffset当按下按钮时按钮像右下的位移。

    4.UIButtonSound当按钮按下时播放声音。

    当然还有其他组件,比如UIButtonPlayAnimation 和 UIButtonMessage,就需要你自己摸索了。

   你也可以添加自定义事件(MonoBehaviour),让它处理更多的事件。

  • void OnHover (bool isOver) – Sent out when the mouse hovers over the collider or moves away from it. Not sent on touch-based devices.
  • void OnPress (bool isDown) – Sent when a mouse button (or touch event) gets pressed over the collider (with ‘true’) and when it gets released (with ‘false’, sent to the same collider even if it’s released elsewhere).
  • void OnClick() — Sent to a mouse button or touch event gets released on the same collider as OnPress.UICamera.currentTouchID tells you which button was clicked.
  • void OnDoubleClick () — Sent when the click happens twice within a fourth of a second.UICamera.currentTouchID tells you which button was clicked.
  • void OnSelect (bool selected) – Same as OnClick, but once a collider is selected it will not receive any further OnSelect events until you select some other collider.
  • void OnDrag (Vector2 delta) – Sent when the mouse or touch is moving in between of OnPress(true) and OnPress(false).
  • void OnDrop (GameObject drag) – Sent out to the collider under the mouse or touch when OnPress(false) is called over a different collider than triggered the OnPress(true) event. The passed parameter is the game object of the collider that received the OnPress(true) event.
  • void OnInput (string text) – Sent to the same collider that received OnSelect(true) message after typing something. You likely won’t need this, but it’s used by UIInput
  • void OnTooltip (bool show) – Sent after the mouse hovers over a collider without moving for longer thantooltipDelay, and when the tooltip should be hidden. Not sent on touch-based devices.
  • void OnScroll (float delta) is sent out when the mouse scroll wheel is moved.
  • void OnKey (KeyCode key) is sent when keyboard or controller input is used.


对应的场景在插件中的Tutorial 6 - Button中有:

       


NGUI教程:步骤7-Slider

     下面让我们添加一个滑块。

     1.用Widget Tool,选择Slider模板。

     2.给Foreground用Button sprite,给Background用Dark sprite。Thumb可以也用Button。

     3.选择Panel后点击Add To按钮。

       
     这样,一个滑块滚动条就做好了。


     你可以选择滑块的游戏对象进行颜色和尺寸的调整,但是经验建议你不要去调整控件对象下面的子对象。

     这样当你旋转它们的时候可以保持它们的尺寸,并且内部的部件可以在坐标下继续工作。当然你也可以尝试再做一个垂直滑块。

     对应的场景在插件中的Tutorial 7 - Slider中有:

       


NGUI教程:步骤8-Checkbox

    接下来我们来做复选框:

    

    1.点击蒙版用"X",背景用"Dark"。

    2.创建一个复选框后再选择Panel对象创建一个新GameObject。

    3.添加更多的复选框到这个GameObject。

    4.在这些复选框上选择Option项。

    5.运行一下程序,点击复选框。看看效果。

    如果你每一步都操作正确了,你不可能同时选中两项:因为选中了“Radio Button Root”参数之后你的复选框就会变成了单选按钮,并且他们通过同一个根目录放在了一组:就是那个你指定的Transform对象。

    还可以附件一些其他事件处理功能,如UICheckboxControlledComponent 和 UICheckboxControlledObject。

    可以用来由复选框状态来启用禁用指定的组件或者游戏对象。

    你可以尝试着做3个复选框来控制红,绿,蓝三个控件的显示和隐藏。

    对应的场景在插件中的Tutorial 8 - Checkbox中有:

       


NGUI教程:步骤9-Input

     现在我们来创建一个输入框。任何文本标签通过添加碰撞盒UIInput脚本都可以变成输入框,当然如果有背景的话会更好看一些。

     不过幸运的是,Input模板已经为我们做好了这一切:

     1.用Widget Tool创建输入框。

     2.你可以用“Dark”sprite或“Highlight” sprite作为背景。

     3.不断调整直到将它调试正确。

     如果你点击Play运行游戏,点击输入框就可以直接输入文字,在iOS和Android设备上则会自动显示屏幕键盘。这个输入框同样也支持Unity3.4.1新增的输入方法(IME=Input Method),让你能输入中文(译者注:测试的时候直接输入不显示中文,并拖拽到Label的Font栏)。

     目前唯一不支持Flash平台,因为Unity Flash还没增加IME输入支持。

     对应的场景在插件中的Tutorial 9 - Input中有:

       

     译者注:NGUI的中文输入需要下载单独的中文字体(或者自己做一个),下载后拖拽到对应的Inpextor面板即可:

       

     这样就可以输入中文了:

      


NGUI教程:步骤10-3D

     上面的我们一直在做2D的界面,但我们也可以很容易的让它变成3D界面。让我们继续吧!

     1.将Panel从Anchor的中解除掉,也就是说不再是Anchor的子物体,由UI Root作为它的父对象。

     2.删除Anchor(本教程我们只做静止的UI)。

     3.将摄影机改成透视投影Perspective Projection。

     4.将相机的Near改为0.1和Far改为4.0。

     5.将相机往后移动一点,大概在(0,0,-550)的位置。

     6.给Panel一点角度,我们这里设置旋转为(0,345,0)。

     7.为了看上去的效果更炫目一点,添加PanWithMouse到Camera。

      点击运行游戏,并且四处移动鼠标,如果一切正确,你会看到一个效果很好的窗口。

     注意这七步仅仅在一开始创建了2D UI的基础上才需要。

     如果在第一步创建了3D UI,那么这些都不再需要了。
     最后,你需要什么样的UI取决于你的想象力。:)


     对应的场景在插件中的Tutorial 10 - 3D中有:

      

1359528139_1421.jpg (54.92 KB, 下载次数: 0)

下载附件  保存到相册

7 小时前 上传

相关文章推荐

< Unity 3D专栏 >NGUI插件基础教程(一)

最近接触到2D,偶尔发现NGUI,非常强大,非常好用,学习,总结先。 NGUI是Unity的顶级插件,做出的菜单很牛,性能会比较好一些; 可以把它当成2D的sprite直接做成一个游戏。 网上查...

Unity3D游戏引擎最详尽基础教程

  • 2015年03月14日 19:25
  • 1.29MB
  • 下载

Unity3D游戏引擎最详尽基础教程.docx

  • 2014年12月04日 14:31
  • 3.45MB
  • 下载

Unity3D游戏引擎最详尽基础教程

转自:http://blog.sina.com.cn/s/blog_7c336a8301013son.html 我一直向所有想做游戏的朋友推荐Unity3D,为什么呢?首先是因为专业,Unity3D非...
  • kenkao
  • kenkao
  • 2014年02月07日 19:25
  • 59993

unity3d基础教程 从安装到入门

  • 2014年05月18日 22:57
  • 2.52MB
  • 下载

Unity3D 官方基础教程 Asset Workflow

Asset Workflow(资源工作流程) Here we'll explain the steps to use a single asset with Unity. These steps...

2017有哪些推荐的Unity3D开发的基础教程

2017有哪些推荐的Unity3D开发的基础教程

Unity3D 4.0新功能:Mecanim动画系统基础教程

作为Unity4.0的主要更新功能,Mecanim动画被寄予了很多的期望。系统有先进的地方,也有不足的地方。这些我们留到最后再来总结。          阿赵粗略的学习了一下,写下以下的教程。这篇...

Unity3D 官方基础教程 Creating Scenes

Creating Scenes(创建场景) Scenes contain the objects of your game. They can be used to create a main ...

Unity3D 官方基础教程 Creating Scenes

Creating Scenes(创建场景) Scenes contain the objects of your game. They can be used to create a main ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Unity3d ngui基础教程
举报原因:
原因补充:

(最多只允许输入30个字)