使用NGUI实现拖拽功能（拼图小游戏）

上一次用UGUI实现了拼图小游戏，这次，我们来用NGUI来实现

实现原理

NGUI中提供了拖拽的基类UIDragDropItem，所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本，并实现其中的方法即可

public class DragOnPic : UIDragDropItem {

    protected override void OnDragDropStart ()
    {
        base.OnDragDropStart ();
    }

    protected override void OnDragDropRelease (GameObject surface)
    {
        base.OnDragDropRelease (surface);
    }
}

拼图游戏实例

1、准备拼图素材，由于NGUI使用的Atlas为Texture，所以不能用UGUI中裁剪图片的方法，所以偷了一下懒，从网上找了一个小工具把图片裁剪了一下。。

2、给图片命名，为了最后检测简单一点，所以我这里统一命名为f-0~f-15，并制作Atlas

下面的基本操作步骤跟UGUI大同小异，所以我们这里搞一个不一样的方式，Unity中不做任何操作，只在摄像机上挂一个脚本ImageCreater来调用我们的代码

    void Start () {
        //调用UIManager中生产图片的方法.
        UIManager.Instance.CreatPics();
    }

 新建一个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 }

拖拽脚本：

public class DragOnPic : UIDragDropItem {

    UISprite _sprite;

    Transform myParent;

    void OnEnable()
    {
        _sprite = this.GetComponent<UISprite>();
    }


    protected override void OnDragDropStart ()
    {
        //开始拖拽时增加depth，是其能显示在别的图片上方.
        _sprite.depth += 50;

        //开始拖拽时记下自己的父物体.
        myParent = this.transform.parent;

        //父类的方法.
        base.OnDragDropStart ();
    }

    protected override void OnDragDropRelease (GameObject surface)
    {
        //父类的方法.
        base.OnDragDropRelease (surface);

        //松开鼠标时如果是另一张图片，则交换两张图片的位置，否则重置自己的位置.
        if(surface.tag == "Cell")
        {
            this.transform.SetParent(surface.transform.parent);
            surface.transform.SetParent(myParent);
            this.transform.localPosition = Vector3.zero;
            surface.transform.localPosition = Vector3.zero;
        }
        else {
            this.transform.localPosition = Vector3.zero;
        }

        //拖拽结束时判断是否完成拼图.
        if(GamaManager.CheckWin())
        {
            NGUIDebug.Log("Win!!!!");
        }

        //结束拖拽时重置depth.
        _sprite.depth -= 50;
    }
    
}

GameManager中判断是否完成拼图分方法跟UGUI中的类似，这里就不多写了~~~

好了，大功告成！

 

网页版预览

PC版下载