使用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 += ; //开始拖拽时记下自己的父物体.
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 -= ;
} }

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

好了,大功告成!

网页版预览

PC版下载

上一篇:jQuery实现拼图小游戏


下一篇:Python多维数组切片