使用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 }
拼图游戏实例
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实现拖拽功能(拼图小游戏)相关推荐
- html5网页小游戏 拖拽,HTML5拖拽功能实现的拼图游戏
本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 具体代码如下所示: drag拖拽 .box{ f ...
- html 拖放实现拼图游戏,Canvas drag 实现拖拽拼图小游戏
博主一直心心念念想做一个小游戏- 前段时间终于做了一个小游戏,直到现在才来总结,哈哈- 以后要勤奋点更新博客! 实现原理 1.如何切图? 用之前的方法就是使用photoshop将图片切成相应大小的图 ...
- 微信小程序自定义进度条及手动拖拽功能
首先是wxml部分 <view class="proess-box"><view class="time">{{currentTime} ...
- css元素可拖动,使用css-transform实现更好的拖拽功能
拖拽功能是目前网页上一种非常常见的功能,例如"登录弹窗"的拖拽.本文将使用transform来实现这一功能. 一.拖拽的用户行为分析与原理解析 二.代码实现 三.总结 本文所涉及的 ...
- swift 拖动按钮_Swift下使用UICollectionView 实现长按拖拽功能
导读 简单用Swift写了一个collectionview的拖拽点击排序效果; 拖拽排序是新闻类的App可以说是必有的交互设计,如今日头条,网易新闻等. 效果 主要代码 手势长按移动 1.给Colle ...
- javascript --- 原生的拖拽功能实现
准备一个方块: <style>.drag{background-color:#aaf;position:absolute;} </style> <div class=&q ...
- swift 选中长按项_Swift下使用UICollectionView 实现长按拖拽功能
导读 简单用Swift写了一个collectionview的拖拽点击排序效果; 拖拽排序是新闻类的App可以说是必有的交互设计,如今日头条,网易新闻等. GitHub地址:https://github ...
- 移动html触摸效果,JS实现移动端触屏拖拽功能
2.css 3.js = maxW) { oLeft = maxW; } if(oTop < 0) { oTop = 0; } else if(oTop >= maxH) { oTop = ...
- jQuery UI 拖拽功能
原文地址:http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html JQuery UI是JQuery官方支持的WebUI 代码库, ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
最新文章
- 用ajax更新div,如何使用ajax和jquery更新特定的div
- java.lang.unsatisfiedlinkerror:_java.lang.UnsatisfiedLinkError: 的问题
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
- android web 访问数据库,Web下的JDBC访问数据库的基本步骤
- java 线程管理框架_实现 Java 多线程并发控制框架
- pytorch nn.MSELoss
- android contentresolver 批量,Android之使用ContentResolver对通信录中的数据进行简单操作...
- python中定义的类的方法调用老出现missing 1 postional argument 或者self的解决办法
- 编辑按钮 php,自动编辑按钮-海豚PHP1.0.6完全开发手册-基于ThinkPHP5.0.10的快速开发框架...
- 网站实时生成多种电子书软件,支持jar、umd、chm、pdf、epub等
- 九款好看的后台管理系统登录模板
- 原来找展会会刊(参展商名录)这么简单
- 高质量的博客评论外链有用么?
- cd/etc 文件目录浅解
- java locale string_java.lang.String.toUpperCase(Locale locale)方法实例
- 云上压缩软件卸载方法
- 桌面html文件图标异常,.htm .html文件图标显示异常的解决办法
- 经典例题:十六进制转换十进制详解 适合初学者
- 乌班图(Ubuntu)单系统或者乌班图+Win双系统安装教程
- 计算机型号或配置,查看电脑各项配置参数的方法
热门文章
- 同样是搞IT,差距怎么这么大呢,快来看看互联网行业最富有的100人
- Kernel同步机制的底层实现
- Android 去除各种厂家广告合集
- background url怎么填充_CSS background 属性
- mysql execute immediate_动态SQL之EXECUTE IMMEDIATE
- python 异常 exception_关于Python中异常(Exception)的汇总
- 强大TOP版淘客程序(带后台管理)
- 2023齐齐哈尔大学计算机考研信息汇总
- html网页两边有空隙,怎么让整个内容缩进?就是四周都有间隙。
- Java 类对象基础知识--科普