使用NGUI实现拖拽功能(拼图小游戏)
2015-10-07 10:44
519 查看
上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现
实现原理
NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的方法即可
拼图游戏实例
1、准备拼图素材,由于NGUI使用的Atlas为Texture,所以不能用UGUI中裁剪图片的方法,所以偷了一下懒,从网上找了一个小工具把图片裁剪了一下。。
2、给图片命名,为了最后检测简单一点,所以我这里统一命名为f-0~f-15,并制作Atlas
下面的基本操作步骤跟UGUI大同小异,所以我们这里搞一个不一样的方式,Unity中不做任何操作,只在摄像机上挂一个脚本ImageCreater来调用我们的代码
新建一个UIManager类,下面是该类的内容:
拖拽脚本:
GameManager中判断是否完成拼图分方法跟UGUI中的类似,这里就不多写了~~~
好了,大功告成!
网页版预览
PC版下载
实现原理
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版下载
相关文章推荐
- iOS新手入门之UIView
- easyUI tootip组件使用
- Duilib中的消息泵和虚拟窗口
- 版本库重新定位时svn uuid不一致问题
- UI_UITableViewController
- String,StringBuffer与StringBuilder的区别
- UIScrollView
- UI:多线程 、用GCD创建线程
- Ubuntu14.04启动出现grub rescue
- AbstractQueuedSynchronizer的介绍和原理分析
- easyui反选全选和全不选代码以及方法的使用
- easyUI resizable组件使用
- [225]Implement Stack using Queues
- SpriteBuilder中CCB精灵对象的Sprite frame为什么有时候不能修改
- SpriteBuilder中CCB精灵对象的Sprite frame为什么有时候不能修改
- SpriteBuilder中CCB精灵对象的Sprite frame为什么有时候不能修改
- Arduino与Processing串口通信问题
- [225]Implement Stack using Queues
- easyUI droppable组件使用
- SQL Tuning Advisor一个错误ORA-00600: internal error code, arguments: [kesqsMakeBindValue:obj]