关于Unity的NGUI

NGUI是严格遵循KISS原则并用C#编写的Unity(适用于专业版和免费版)插件,提供强大的UI系统和事件通知框架

KISS原则:Keep It Simple,Stupid

 

NGUI实例

1.创建Unity工程项目和文件目录,保存场景

2.导入NGUI的package包(第73),使用3.9.4b版本的,最新版本的是收费的...而且配合Unity5.X还有一些小问题

3.导入成功后会发现多了一个菜单栏,可以点击Help查看API文档说明

关于Unity的NGUI_第1张图片

 

4.NGUI文件目录

 Editor:编辑器用到的一些资源文件,一些预设的图片

 Examples:存放一些自带的案例

 Resources:存放一些资源,着色器Shader

 Scripts:存放一些脚本

 关于Unity的NGUI_第2张图片

 

5.Examples/Scene里面的案例

一般在测试的时候点Scene视图里的2D按钮,忽略Z轴

案例零:常用UI控件

案例一:锚点

锚点的作用:拖拉拉伸屏幕的时候,始终不会变形,总是贴着屏幕走,原来是在右上角的节点,拉伸后还是在右上角,改变屏幕分辨率或者比例也不会变,这就是锚点的作用,固定某个节点的位置。

Anchors属性:

  Type:锚点类型,None没有锚点,Unified统一的锚点

  Target:锚点的目标,也就是距离哪个物体的上下左右,这里的UI Root是NGUI的根节点

  Left、Right、Bottom、Top是此节点距离UI Root节点Left和Top边(可以选择)的上下左右的距离,单位是像素(2D)

  如:此节点的Left边与UI Root节点的Left边的距离是0像素,此节点的Right边与UI Root节点的Left边的距离是180像素

  关于Unity的NGUI_第3张图片

 

  案例二:界面3D转2D,2D转3D

  案例三:打字机效果,适用于MMORPG之类的,和NPC对话的时候。

  案例四:菜单效果

  案例五:高光效果

  案例六:可拖拽窗口

  案例七、八:拖拉列表的不同实现

  案例九:玩家任务的隐藏和详情显示

  案例十:多国语言切换

  案例十一:背包道具拖拽

  案例十二:聊天窗口

  案例十三:菜单栏切换,常用于游戏商城

  案例十四:道具列表滚动条

  案例X:背包道具拖拉、装备穿戴、装备颜色变换、装备属性浮动效果

  关于Unity的NGUI_第4张图片  关于Unity的NGUI_第5张图片

 

6.制作自己的NGUI界面

要注意的是,Unity也自带了一套UI系统,用的时候不要混淆,不要用它自带的,而是要用我们菜单栏上的NGUI创建出来的UI节点

我们的关于Unity的NGUI_第6张图片  自带的关于Unity的NGUI_第7张图片

(1)新创建一个场景game_scene

 

(2)NGUI---->Create

 Sprite:精灵,和Unity的精灵不一样

 Label:标签,一段文字,描述道具的使用方法,多少金币

 Texture:纹理

 Unity 2D Sprite:Unity的2D精灵

 Widget:可以控制以上所有的节点,以上的所有节点都继承于它

 Anchor(Legacy):锚点,已经废弃,不代表不能用,将来可能会被移除

 Panle:面板

 Scroll View:滚动条

   Grid:网格

 Table:表格

 

(3)创建一个精灵:NGUI---->Create---->Sprite

帮我们创建了一个UI Root根节点和一个摄像机子节点

 UI Root节点下的UI Root组件,屏幕适配的策略,灵活的

关于Unity的NGUI_第8张图片UI Root节点下Sprite节点的UI Sprite组件,选择图集和贴图,在选择图集的时候点Show All可以把所有存在的图集都显示出来

关于Unity的NGUI_第9张图片UI Root节点下Sprite节点的UI Sprite组件,可以通过代码改变填充进度条Fill Amount的数值,就可以实现技能冷却CD或者进度条的效果

关于Unity的NGUI_第10张图片

关于Unity的NGUI_第11张图片UI Root节点下Sprite节点的UI Sprite组件的Widget属性,改变大小和缩放在这里修改,不要去动Transform组件的大小和缩放,

                                Aspect设置基于谁缩放,snap恢复原始状态,Depth设置节点的深度,深度决定节点的显示顺序,层级关系,不要设置两个节点的Depth值一样。改变Transform组件的Z轴坐标是没有用的

                                小技巧:鼠标放在Transform的坐标轴的XYZ的字上面可以左右拖拉来改变数值大小

 

(4)创建一个精灵按钮:NGUI---->Create---->Sprite,然后再NGUI---->Attach---->Button Script,NGUI---->Attach---->Collider(加碰撞体的原因是,NGUI内部是发射射线碰撞后来触发按钮的,和3D拾取原理一样)

关于Unity的NGUI_第12张图片UI Root节点下Sprite节点的UI Button组件

关于Unity的NGUI_第13张图片UI Root节点下Sprite节点的UI Button组件的Sprites属性,实现按下按钮换图,一般美术会提供三套图

UI Root节点下Sprite节点的UI Button组件的On Click属性,可以关联按钮的脚本触发函数

UI Root节点下的Camera节点的UI Camera组件的Event Sources属性,按钮事件的事件源

 

(5)NGUI---->Attach

  关于Unity的NGUI_第14张图片

  Toggle Script:开关

  Slider Script:滚动条

  Scroll Bar Script:浏览网页的小滚动条

  Progress Bar Script:进度条

  Popup List Script:弹出框

  Input Field Script:输入框

  Key Binding Script:键盘的绑定

  Key Navigation Script:键盘的导航

  Play Tween Script:缓动特效

  Play Animation Script:动画的播放

  Play Sound Script:声音的播放

  Localization Script:语言的支持

 

(6)NGUI---->Tween

  关于Unity的NGUI_第15张图片

  Alpha:透明度

  Color:颜色

  Width:宽

  Height:高

  Position:位置

  Rotation:旋转

  Scale:缩放

  Transform

  Volume:音量大小

  Field of View:视图区域,简单的用这个,复杂的用之前的DoTween插件

 

(7)NGUI---->Open

  关于Unity的NGUI_第16张图片

  Atalas Maker:图集制作,美术发来的图集,程序打包成图片合集

  Font Maker:字体工具,有系统自带的库,也可以用图形字库

  Prefab Toolbar:NGUI的预制体

  Panel Tool:面板的控制

  Draw Call Tool:调用GPU的函数的频率,和性能有关

  Camera Tool:摄像机的工具,控制所有的摄像机

  Widget Wizard:向导,和Create功能有点像,已经废弃了

 

(8)NGUI---->Options:打开一些小工具

 

(9)NGUI---->Extras:切换2D,3D的碰撞盒

 

(10)NGUI---->Extras:Normalize Depth Hierarchy:层级关系

 

(11)NGUI---->Selection:改变深度值的快捷键

 

 

 

7. 界面开发流程

UIRoot作为根节点,同一个界面通常只显示一个UI Root节点和Camera
1)美术设计界面,提供切图,效果图给到程序
2)用NGUI搭建静态界面
3)将搭建好的静态界面拖到Project视图上-----形成一个预制体prefeb
4)通过代码调用 来初始化和显示预先配置好的界面,实现界面的切换

 

你可能感兴趣的:(关于Unity的NGUI)