使用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版下载