上一次用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 }

拼图游戏实例

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

2、给图片命名,为了最后检测简单一点,所以我这里统一命名为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版下载

转载于:https://www.cnblogs.com/zhenlong/p/4857617.html

使用NGUI实现拖拽功能(拼图小游戏)相关推荐

  1. html5网页小游戏 拖拽,HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 具体代码如下所示: drag拖拽 .box{ f ...

  2. html 拖放实现拼图游戏,Canvas drag 实现拖拽拼图小游戏

    博主一直心心念念想做一个小游戏-  前段时间终于做了一个小游戏,直到现在才来总结,哈哈- 以后要勤奋点更新博客! 实现原理 1.如何切图? 用之前的方法就是使用photoshop将图片切成相应大小的图 ...

  3. 微信小程序自定义进度条及手动拖拽功能

    首先是wxml部分 <view class="proess-box"><view class="time">{{currentTime} ...

  4. css元素可拖动,使用css-transform实现更好的拖拽功能

    拖拽功能是目前网页上一种非常常见的功能,例如"登录弹窗"的拖拽.本文将使用transform来实现这一功能. 一.拖拽的用户行为分析与原理解析 二.代码实现 三.总结 本文所涉及的 ...

  5. swift 拖动按钮_Swift下使用UICollectionView 实现长按拖拽功能

    导读 简单用Swift写了一个collectionview的拖拽点击排序效果; 拖拽排序是新闻类的App可以说是必有的交互设计,如今日头条,网易新闻等. 效果 主要代码 手势长按移动 1.给Colle ...

  6. javascript --- 原生的拖拽功能实现

    准备一个方块: <style>.drag{background-color:#aaf;position:absolute;} </style> <div class=&q ...

  7. swift 选中长按项_Swift下使用UICollectionView 实现长按拖拽功能

    导读 简单用Swift写了一个collectionview的拖拽点击排序效果; 拖拽排序是新闻类的App可以说是必有的交互设计,如今日头条,网易新闻等. GitHub地址:https://github ...

  8. 移动html触摸效果,JS实现移动端触屏拖拽功能

    2.css 3.js = maxW) { oLeft = maxW; } if(oTop < 0) { oTop = 0; } else if(oTop >= maxH) { oTop = ...

  9. jQuery UI 拖拽功能

    原文地址:http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html JQuery UI是JQuery官方支持的WebUI 代码库, ...

  10. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

最新文章

  1. 用ajax更新div,如何使用ajax和jquery更新特定的div
  2. java.lang.unsatisfiedlinkerror:_java.lang.UnsatisfiedLinkError: 的问题
  3. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
  4. android web 访问数据库,Web下的JDBC访问数据库的基本步骤
  5. java 线程管理框架_实现 Java 多线程并发控制框架
  6. pytorch nn.MSELoss
  7. android contentresolver 批量,Android之使用ContentResolver对通信录中的数据进行简单操作...
  8. python中定义的类的方法调用老出现missing 1 postional argument 或者self的解决办法
  9. 编辑按钮 php,自动编辑按钮-海豚PHP1.0.6完全开发手册-基于ThinkPHP5.0.10的快速开发框架...
  10. 网站实时生成多种电子书软件,支持jar、umd、chm、pdf、epub等
  11. 九款好看的后台管理系统登录模板
  12. 原来找展会会刊(参展商名录)这么简单
  13. 高质量的博客评论外链有用么?
  14. cd/etc 文件目录浅解
  15. java locale string_java.lang.String.toUpperCase(Locale locale)方法实例
  16. 云上压缩软件卸载方法
  17. 桌面html文件图标异常,.htm .html文件图标显示异常的解决办法
  18. 经典例题:十六进制转换十进制详解 适合初学者
  19. 乌班图(Ubuntu)单系统或者乌班图+Win双系统安装教程
  20. 计算机型号或配置,查看电脑各项配置参数的方法

热门文章

  1. 同样是搞IT,差距怎么这么大呢,快来看看互联网行业最富有的100人
  2. Kernel同步机制的底层实现
  3. Android 去除各种厂家广告合集
  4. background url怎么填充_CSS background 属性
  5. mysql execute immediate_动态SQL之EXECUTE IMMEDIATE
  6. python 异常 exception_关于Python中异常(Exception)的汇总
  7. 强大TOP版淘客程序(带后台管理)
  8. 2023齐齐哈尔大学计算机考研信息汇总
  9. html网页两边有空隙,怎么让整个内容缩进?就是四周都有间隙。
  10. Java 类对象基础知识--科普