NGUI 3.0.X官网示例 Tutorial 1~~Tutorial 5

夜行的猫仔

这个主题包含了NGUI 3.0.X官网示例Tutorial 1----Tutorial 5 一共5个例题


NGUI 3.0.X官网示例 Tutorial 1--Scene

NGUI的第一个教程是教如何创建一个NGUi的可用场景，这个内容非常的简单。
首先按需要下载NGUI，我们用的是NGUI3.0.5版本，可以在这里下载：NGUI v.3.0.5 NGUI最新版本
下载完成后，导入NGUI进工程即可使用，如果是第一次接触NGUI建议先一个空工程以便于学习使用。

载入NGUi以后，可以在NGUI的目录中找到Scenes，在这个文件夹中全部都是NGUI自带的例题：

这个章节要讲的就是第一个例子 Tutorial 1 - Scene
1)在Unity菜单栏中找到NGUI菜单，这个菜单导入NGUI以后就会自动出现，如果没看到就在菜单栏上用鼠标点任意一个菜单，这个时候菜单栏会自己刷新，NGUI菜单就会显示出来了。

2)在Open菜单中执行 UI Wizard，打开UI生成向导

3）因为是空项目，所以这里什么都不用修改直接点Create Your UI按钮生成UI Root (2D)。这个时候Hierarchy面板中还有一个默认的摄像机，在创建好UI以后就可以删掉了，NGUI中自带了摄像机。
     得到如下的形式UI层次分布。运行游戏，就可以看到一个灰色的窗口。那么到这里第一个创建NGUI环境就算完成了。

Before moving on, let’s examine what the wizard has created for us.

• 在2D Root 上有个 UIRoot 脚本(NGUI控件说明(中文) UIRoot ). This script rescales the object it’s on to be 2/ScreenHeight in size, letting you specify widget coordinates in pixels and still have them be relatively small when compared to the rest of your game world.
• Camera object contains the Camera and the UICamera script. The NGUI控件说明(中文) UICamera script contains NGUI’s event system.
• Anchor contains the NGUI控件说明(中文) UIAnchor script. Although this script can be used to “attach” widgets to sides of the screen, in this case it’s used to apply a half-pixel offset on Windows machines, for pixel-perfect results.
• Panel object has a UIPanel（NGUI控件说明(中文) UIPanel ） on it. The UIPanel is a container that will collect all UI widgets under it and will combine them into as few draw calls as possible.
  

You may also notice that the Panel game object is currently selected. This is a hint — all widgets you will be adding in the next step will be automatically parented to the panel.

总结：本节学习如何创建UI环境，是学习NGUI的基础。
这个例题包含的相关资料可以查询：
NGUI控件说明(中文) UIWidget

NGUI控件说明(中文) UIRoot

NGUI控件说明(中文) UIPanel

NGUI控件说明(中文) UICamera

NGUI控件说明(中文) UIAnchor

夜行的猫仔

NGUI 3.0.X官网示例 Tutorial 4-- Tiled Sprite

Tiled Sprite主要是在填充的区域内平铺。1) 根据上节课的例子，在创建一个 Sprite，选择的图形是Honeycomb
2) 创建好一个 Sprite后，在Inspector面板中，选择Sprite type为Tiled Sprite 。
3) 修改 Tiled Sprite 的背景色为黑色，并修改半透明值为190
4) 修改图片的尺寸494*457   这个尺寸基本上覆盖了上个帖子里讲的窗体部分。

5) 这样就得到了一个平铺了窗体的一个背景。


总结：Tiled Sprite会自动平铺到整个精灵的大小内，适合使用无缝贴图制作背景。

夜行的猫仔

NGUI 3.0.X官网示例 Tutorial 2--Sprite

1)在上一节的基础上，增加Sprite。Sprite是NGUI中最常用的控件之一。
   在NGUI菜单中 Open ->widget Wizard工具选择创建一个Sprite，Template选择Sprite。

这个时候Add To按钮是灰色的不可用状态，主要是按钮必须的素材Atlas没有提供，从Assets\NGUI\Examples\Atlases\SciFi目录下找到SciFi Atlas这个资源，将他拖入到widget Tool这个面板中的Atlas变量中。
2)创建Sprite： Template选择Sprite，这时候多出来个Sprite变量和Pivot变量。

Sprite变量选择要创建Sprite的所使用的图片，点击Sprite变量后面空白处。
3) 弹出的对话框中选择Dark这个精灵。
4) 点击 Add To将这个精灵添加到Panel上，这个时候屏幕上就可以看到这个精灵了，不过这个时候的精灵非常小，需要修改一下尺寸：
5) 选中这个Sprite， 在Inspector面板中最下面有个Dimensions变量，默认的值是16*16   将这里修改为180*180，就可以在屏幕上看到这个精灵的全貌了。

6) 旋转这个精灵，并将这个精灵的颜色改为红色，参数如下：


7)分别在创建2个精灵，分别改变颜色是绿色和蓝色，修改旋转角度和位置，则可以看到如下的效果，完成了这个例题的效果。


总结：Sprite精灵是Sprite中最常用也是最简单的一种精灵，标准Sprite控件，自适应图片大小。下节将讲解稍微复杂一点的Sliced Sprite精灵的使用。

NGUI控件说明(中文) UIPanel

NGUI控件说明(中文) UICamera

NGUI控件说明(中文) UIAnchor

NGUI控件说明(中文) UIButton

夜行的猫仔

NGUI 3.0.X官网示例 Tutorial 3--Sliced Sprite

NGUI为我们提供了4种不同的Sprite：Sprite，Sliced Sprite，Tiled Sprite和Filled Sprite。
这节将讲解Tutorial 3 - Sliced Sprite
1)在上课的基础上，新增加一个Sprite，步骤和上面的完全一样。
2)创建好一个 Sprite后，在Inspector面板中，选择Sprite type为Sliced。

3）修改颜色为土黄色。
4）修改尺寸为500*40，这样就做成了一个条状的Sliced Sprite。Sliced Sprite的特点是灰用颜色填充完整个Sliced Sprite区域，用这个做窗体的标题栏。
5) 再创建一个Sliced Sprite，颜色不变保持半透明的白色，修改尺寸为500*500，用这个Sliced Sprite作为一个窗体主体部分。

通过2个Sliced Sprite 创建了一个UI窗体，再加上开始的三个Sprite 颜色块就组成了上面的这样子...

总结：Sliced Sprite填充完整个的Sprite区域，固定大小，不会随图片大小而改变。(有人说这个适合用来作角色的头像显示)

夜行的猫仔

[tr][td]NGUI 3.0.X官网示例 Tutorial 5-- Label[/td][/tr]

在上一节的基础上，添加文本：NGUI->Create->Lable

dealsuang、

后续怎么没有了啊！亲

夜行的猫仔

dealsuang、 发表于 2014-3-24 15:30
后续怎么没有了啊！亲

更新的太快来不及写了

承諾只為實現

呵呵，新版本的有点蒙圈啊

walwyn

呵呵，新版本的有点蒙圈啊

yzw_xyz

{:soso__10169062262133571330_1:}感谢分享。

sleepman

NGUI 3.0.X官网示例 Tutorial 1--Scene