NGUI官網樣本8 – Scroll View(Camera)

例8 – Scroll View(Camera)
在上一個樣本中的ScrollView使用到了Shader的處理，而對於一些低端的機器或者行動裝置可能會出現顯示不正常的結果，所以，NGUI還為我們準備了另外一個處理方式，也就是通過攝像機的移動來達到同樣的目的。接下來，這個樣本就是告訴大家如何?這個功能。
首先先製作一個普通的GUI介面，這些介面在上面的教程中已經說過，這裡就不再贅述，其最終效果：

圖片:1.jpg

現在來製作那些可以滾動的Item結構。使用Create  a
new UI建立一個NGUI基本結構，並調整它們的層次關係，並把UIRoot下的Panel組件刪除掉，最終：

圖片:2.jpg

建立一個新的空遊戲對象，並命名為Offset，並放置在anchor成為它的子物體，並reset一下，同時給它添加一個Panel組件（Component->NGUI->Interation->
Panel）,這樣，該對象才能放置NGUI元件。:

圖片:3.jpg

同NGUI官網樣本7--
ScrollView講解(一)
（http://game.ceeger.com/forum/read.php?tid=4269）
一樣，建立1個Item元件，然後用Ctrl+D的方法複製出9個來，當然你也可以複製你需要的數量，現在這些Item都是重疊在一起的，最終效果：

圖片:4.jpg

選擇Offset，為其添加一個Table組件（Component->NGUI->Interaction
-> Table）。哈，神奇的效果在此出現，只是上一個教程使用Grid組件，這次使用的是Table，這個Table和Grid的不同，可以查下官網的說明。這裡不贅述。：

圖片:5.jpg

  
選擇第一次建立的GUI結構，選擇Window下的TiledSprite，：

圖片:6.jpg

在下面建立兩個空的遊戲對象，並分別命名為BottomRight和TopLeft，這兩個Null 物件用來標記滾動Item的邊界，並在情境編輯視窗中放置在對應的位置，最後為該TiledSprite添加一個UIDragCamera組件（Component->NGUI->Interation
-> DragCamera）:

圖片:7.jpg

選擇第二個Camera，為其添加一個ViewCamera組件（Component->NGUI->UI->
ViewCamera）,並把第一個攝像機賦值給SourceCamera，把TopLeft對象賦值給Top
Left，把BottomRight賦值給Bottom Right，然後選擇Offset，調整該對象的位置，：

圖片:8.jpg

為該攝像機添加一個DraggableCamera組件（Component->NGUI->Interaction->
DraggableCamera）,並為其設定參數，

圖片:9.jpg

再次選擇剛才添加了兩個Null 物件的擇Window下的TiledSprite，把第二個Camera賦值給該元件中的DragCamera組件中的DraggableCamera，其結果如下

圖片:10.jpg

接著同樣選擇該TiledSprite，為其添加一個Collider，這樣，才能接受輸入資訊（NGUI->
Attach a Collider）。哈哈。真好Happy，看結果，結果一個點擊播放，成這樣了？！雖然能夠接受到輸入資訊，但是，死活拖不動

圖片:11.jpg

原來，在第二個GUI結構中的Anchor對象中，原來預設組件UIAnchor中的參數UICamera是第二個攝像機，我們現在把它改成第一個攝像機，再點擊播放，Well
Done！成功了！

圖片:12.jpg

接著給每個Item添加一個DragCamera組件（Component->NGUI->
Interaction -> DragCamera）和一個Trigger（Ngui->Attach a Collider）。再為其添加一個ButtonScale組件和一個buttonSound組件（都在Component->NGUI->Interaction中）

圖片:13.jpg

最後來實現那個Press me按鈕。首先，選擇Window對象，為其添加一個TweenPosisiton組件（Component->Tween->Position），並關閉它（我們將用按鈕來開啟它），並設定它的參數，

圖片:14.jpg