使用NGUI實現拖拽功能（拼圖小遊戲）

上一次用UGUI實現了拼圖小遊戲，此次，咱們來用NGUI來實現

實現原理

NGUI中提供了拖拽的基類UIDragDropItem，因此咱們要作的就是在要拖拽的圖片上加一個繼承於該類的腳本，並實現其中的方法便可

 1 public class DragOnPic : UIDragDropItem {
 2 
 3     protected override void OnDragDropStart ()
 4     {
 5         base.OnDragDropStart ();
 6     }
 7 
 8     protected override void OnDragDropRelease (GameObject surface)
 9     {
10         base.OnDragDropRelease (surface);
11     }
12 }

拼圖遊戲實例

一、準備拼圖素材，因爲NGUI使用的Atlas爲Texture，因此不能用UGUI中裁剪圖片的方法，因此偷了一下懶，從網上找了一個小工具把圖片裁剪了一下。。

二、給圖片命名，爲了最後檢測簡單一點，因此我這裏統一命名爲f-0~f-15，並製做Atlas

下面的基本操做步驟跟UGUI大同小異，因此咱們這裏搞一個不同的方式，Unity中不作任何操做，只在攝像機上掛一個腳本ImageCreater來調用咱們的代碼

1     void Start () {
2         //調用UIManager中生產圖片的方法.
3         UIManager.Instance.CreatPics();
4     }

 新建一個UIManager類，下面是該類的內容：

 1 public class UIManager {  2  3 //單例.  4 private static UIManager instance;  5 public static UIManager Instance{  6 get{  7 if(instance == null)  8  {  9 instance = new UIManager(); 10  } 11 return instance; 12  } 13  } 14 private UIManager(){} 15 16 //根節點. 17  UIPanel panel; 18 19 public void CreatPics() 20  { 21 panel = NGUITools.CreateUI(false); 22 23 //添加Grid組件用於自動排列圖片. 24 UIGrid grid = NGUITools.AddChild<UIGrid>(panel.gameObject); 25 26 //設置grid各個屬性. 27 grid.arrangement = UIGrid.Arrangement.Horizontal; 28 grid.maxPerLine = 4; 29 grid.cellWidth = 100; 30 grid.cellHeight = 100; 31 grid.pivot = UIWidget.Pivot.TopLeft; 32 grid.transform.localPosition = new Vector3(-150, 150, 0); 33 34 //從Resources文件夾中動態加載Atlas 35 UIAtlas myAtlas = Resources.Load<UIAtlas>("Atlas/MyAtlas"); 36 37 //經過GameManager獲得一個隨機數數組. 38 int[] randomIndex = GamaManager.RandomArray(); 39 40 //生成圖片. 41 for (int i = 0; i < 16; i++) { 42 UISprite cell = NGUITools.AddChild<UISprite>(grid.gameObject); 43 44 //設置圖片容器的Atlas及圖片名稱. 45 cell.atlas = myAtlas; 46 cell.spriteName = "box"; 47 cell.name = "f-" + i.ToString(); 48 49 //添加UIDragDropContainer組件用於接收圖片. 50 UIDragDropContainer container = NGUITools.AddMissingComponent<UIDragDropContainer>(cell.gameObject); 51 container.reparentTarget = cell.transform; 52 53 //添加顯示圖片的sprite. 54 UISprite sprite = NGUITools.AddChild<UISprite>(cell.gameObject); 55 sprite.atlas = myAtlas; 56 sprite.spriteName = "f-" + randomIndex[i]; 57 58 sprite.tag = "Cell"; 59 60 //設置sprite的depth使其能顯示在上方. 61 sprite.depth = cell.depth + 1; 62 63 //爲圖片添加BoxCollider組件用於鼠標交互，並從新設置它的大小與圖片大小一致. 64 NGUITools.AddMissingComponent<BoxCollider>(sprite.gameObject); 65 sprite.autoResizeBoxCollider = true; 66  sprite.ResizeCollider(); 67 68 //添加咱們本身寫的DragOnPic腳本用於實現拖拽功能. 69 NGUITools.AddMissingComponent<DragOnPic>(sprite.gameObject); 70  } 71  } 72 73 }

拖拽腳本：

 1 public class DragOnPic : UIDragDropItem {
 2 
 3     UISprite _sprite;
 4 
 5     Transform myParent;
 6 
 7     void OnEnable()
 8     {
 9         _sprite = this.GetComponent<UISprite>();
10     }
11 
12 
13     protected override void OnDragDropStart ()
14     {
15         //開始拖拽時增長depth，是其能顯示在別的圖片上方.
16         _sprite.depth += 50;
17 
18         //開始拖拽時記下本身的父物體.
19         myParent = this.transform.parent;
20 
21         //父類的方法.
22         base.OnDragDropStart ();
23     }
24 
25     protected override void OnDragDropRelease (GameObject surface)
26     {
27         //父類的方法.
28         base.OnDragDropRelease (surface);
29 
30         //鬆開鼠標時若是是另外一張圖片，則交換兩張圖片的位置，不然重置本身的位置.
31         if(surface.tag == "Cell")
32         {
33             this.transform.SetParent(surface.transform.parent);
34             surface.transform.SetParent(myParent);
35             this.transform.localPosition = Vector3.zero;
36             surface.transform.localPosition = Vector3.zero;
37         }
38         else {
39             this.transform.localPosition = Vector3.zero;
40         }
41 
42         //拖拽結束時判斷是否完成拼圖.
43         if(GamaManager.CheckWin())
44         {
45             NGUIDebug.Log("Win!!!!");
46         }
47 
48         //結束拖拽時重置depth.
49         _sprite.depth -= 50;
50     }
51     
52 }

GameManager中判斷是否完成拼圖分方法跟UGUI中的相似，這裏就很少寫了~~~

好了，大功告成！

 

網頁版預覽

PC版下載