NGUI官网示例--讲解:http://game.ceeger.com/forum/read.php?tid=4172;fpage=2
NGUI官网示例2-interaction-讲解(一)http://game.ceeger.com/forum/read.php?tid=4179
NGUI官网示例2-interaction-讲解(二)http://game.ceeger.com/forum/read.php?tid=4180
NGUI官网示例3--Menu讲解http://game.ceeger.com/forum/read.php?tid=4187
NUI官方实例—ControlIerInput讲解http://game.ceeger.com/forum/read.php?tid=4222
NUI 官方示例–lights and Refraction讲解 http://game.ceeger.com/forum/read.php?tid=4226
NGUI官网示例6–Draggable Window讲解(一) http://game.ceeger.com/forum/read.php?tid=4243
官网示例6–Draggable Window讲解二http://game.ceeger.com/forum/read.php?tid=4244;ds=1
NGUI官网示例7-- ScrollView讲解(一) http://game.ceeger.com/forum/read.php?tid=4269
NGUI官网示例7-- ScrollView讲解(二) http://game.ceeger.com/forum/read.php?tid=4279
NGUI官网示例7-- ScrollView讲解(三)http://game.ceeger.com/forum/read.php?tid=4280;ds=1
NGUI官网示例8 – Scroll View(Camera) http://game.ceeger.com/forum/read.php?tid=4298
NGUI官网示例9 – QuestLog http://game.ceeger.com/forum/read.php?tid=4349;ds=1;page=1;toread=1#tpcNGUI官网示例8 – Scroll View(Camera)
在上一个示例中的ScrollView使用到了Shader的处理,而对于一些低端的机器或者移动设备可能会出现显示不正常的结果,所以,NGUI还为我们准备了另外一个处理方式,也就是通过摄像机的移动来达到同样的目的。接下来,这个示例就是告诉大家如何实现这个功能。
首先先制作一个普通的GUI界面,这些界面在上面的教程中已经说过,这里就不再赘述,其最终效果如图所示:
图片:1.jpg

现在来制作那些可以滚动的Item结构。使用Create a new UI创建一个NGUI基本结构,并调整它们的层次关系,并把UIRoot下的Panel组件删除掉,最终如图所示:

新建一个新的空游戏对象,并命名为Offset,并放置在anchor成为它的子物体,并reset一下,同时给它添加一个Panel组件(Component->NGUI->Interation-> Panel),这样,该对象才能放置NGUI元件。如图所示:

同NGUI官网示例7-- ScrollView讲解(一) (http://game.ceeger.com/forum/read.php?tid=4269)
一样,创建1个Item元件,然后用Ctrl+D的方法复制出9个来,当然你也可以复制你需要的数量,现在这些Item都是重叠在一起的,最终效果如图所示:

选择Offset,为其添加一个Table组件(Component->NGUI->Interaction -> Table)。哈,神奇的效果在此出现,只是上一个教程使用Grid组件,这次使用的是Table,这个Table和Grid的不同,可以查下官网的说明。这里不赘述。如图所示:

选择第一次创建的GUI结构,选择Window下的TiledSprite,如图所示:

在下面创建两个空的游戏对象,并分别命名为BottomRight和TopLeft,这两个空对象用来标记滚动Item的边界,并在场景编辑窗口中放置在对应的位置,最后为该TiledSprite添加一个UIDragCamera组件(Component->NGUI->Interation -> DragCamera)如图所示:

选择第二个Camera,为其添加一个ViewCamera组件(Component->NGUI->UI-> ViewCamera),并把第一个摄像机赋值给SourceCamera,把TopLeft对象赋值给Top Left,把BottomRight赋值给Bottom Right,然后选择Offset,调整该对象的位置,如图所示:

为该摄像机添加一个DraggableCamera组件(Component->NGUI->Interaction-> DraggableCamera),并为其设置参数,如图所示

再次选择刚才添加了两个空对象的择Window下的TiledSprite,把第二个Camera赋值给该元件中的DragCamera组件中的DraggableCamera,其结果如下

接着同样选择该TiledSprite,为其添加一个Collider,这样,才能接受输入信息(NGUI-> Attach a Collider)。哈哈。真好Happy,看结果,结果一个点击播放,成这样了?!虽然能够接受到输入信息,但是,死活拖不动

原来,在第二个GUI结构中的Anchor对象中,原来默认组件UIAnchor中的参数UICamera是第二个摄像机,我们现在把它改成第一个摄像机,再点击播放,Well Done!成功了!

接着给每个Item添加一个DragCamera组件(Component->NGUI-> Interaction -> DragCamera)和一个Trigger(Ngui->Attach a Collider)。再为其添加一个ButtonScale组件和一个buttonSound组件(都在Component->NGUI->Interaction中)

最后来实现那个Press me按钮。首先,选择Window对象,为其添加一个TweenPosisiton组件(Component->Tween->Position),并关闭它(我们将用按钮来开启它),并设置它的参数,如图所示
