拿一张图片剪切好备用

在Canvas下新建panel作为父物体

在下面建一个Image名为——Cell

在Cell下新建image,改Tag为Cell

在这个image上挂脚本:

using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;public class DragOnPic : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{//记录下自己的父物体.
    Transform myParent;//Panel,使拖拽是显示在最上方.
    Transform tempParent;CanvasGroup cg;RectTransform rt;//记录鼠标位置.
    Vector3 newPosition;void Awake(){//添加CanvasGroup组件用于在拖拽是忽略自己,从而检测到被交换的图片.cg = this.gameObject.AddComponent<CanvasGroup>();rt = this.GetComponent<RectTransform>();tempParent = GameObject.Find("Canvas").transform;}/// <summary>/// Raises the begin drag event./// </summary>public void OnBeginDrag(PointerEventData eventData){//拖拽开始时记下自己的父物体.myParent = transform.parent;//拖拽开始时禁用检测.cg.blocksRaycasts = false;this.transform.SetParent(tempParent);}/// <summary>/// Raises the drag event./// </summary>void IDragHandler.OnDrag(PointerEventData eventData){//推拽是图片跟随鼠标移动.RectTransformUtility.ScreenPointToWorldPointInRectangle(rt, Input.mousePosition, eventData.enterEventCamera, out newPosition);transform.position = newPosition;}/// <summary>/// Raises the end drag event./// </summary>public void OnEndDrag(PointerEventData eventData){//获取鼠标下面的物体.GameObject target = eventData.pointerEnter;//如果能检测到物体.if (target){//如果检测到图片,则交换父物体并重置位置.GameManager.SetParent(this.transform, target.transform, myParent);}else{this.transform.SetParent(myParent);this.transform.localPosition = Vector3.zero;}//拖拽结束时启用检测.cg.blocksRaycasts = true;//检测是否完成拼图.if (GameManager.CheckWin()){Debug.Log("Win!!!");}if (!GameManager.CheckWin()){Debug.Log("没拼好");}}}

新建个脚本GameManager类,随机生成图片位置和拖拽时交换父物体和位置,不需要挂,

using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class GameManager
{/// <summary>/// Randoms the array./// </summary>static public void RandomArray(Sprite[] sprites){for (int i = 0; i < sprites.Length; i++){//随机抽取数字中的一个位置,并将这张图片与第i张图片交换.int index = Random.Range(i, sprites.Length);Sprite temp = sprites[i];sprites[i] = sprites[index];sprites[index] = temp;}}/// <summary>/// Sets the parent./// </summary>static public void SetParent(Transform mine, Transform target, Transform oldParent){//如果检测到图片,则交换父物体并重置位置.switch (target.tag){case "Cell":mine.SetParent(target.parent);target.SetParent(oldParent);mine.localPosition = Vector3.zero;target.localPosition = Vector3.zero;break;default:mine.SetParent(oldParent);mine.localPosition = Vector3.zero;break;}}/// <summary>/// Checks is win./// </summary>static public bool CheckWin(){for (int i = 0; i < ImageCreater._instance.transform.childCount; i++){if (ImageCreater._instance.transform.GetChild(i).name != ImageCreater._instance.transform.GetChild(i).transform.GetChild(0).name){return false;}}return true;}
}

在panel上添加组件:Grid Layput Group 挂上脚本:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;public class ImageCreater : MonoBehaviour
{//单例模式public static ImageCreater _instance;//存储裁剪好图片的数组.public Sprite[] sprites;//格子的预设体.public GameObject cellPrefab;void Start(){_instance = this;CreateImages();}private void CreateImages(){//将图片数组随机排列.
        GameManager.RandomArray(sprites);//生产图片.for (int i = 0; i < sprites.Length; i++){//通过预设体生成图片.GameObject cell = (GameObject)Instantiate(cellPrefab);//设置cell的名字方便检测是否完成拼图.cell.name = i.ToString();//获取cell的子物体.Transform image = cell.transform.GetChild(0);//设置显示的图片.image.GetComponent<Image>().sprite = sprites[i];//设置子物体的名称,方便检测是否完成拼图.int tempIndex = sprites[i].name.LastIndexOf('_');image.name = sprites[i].name.Substring(tempIndex + 1);//将Cell设置为Panel的子物体.cell.transform.SetParent(this.transform);//初始化大小.cell.transform.localScale = Vector3.one;}}}

运行即可生成图片,并达到拖拽,换位置信息的功能:

转载于:https://www.cnblogs.com/huang--wei/p/11133857.html

unity——UI拖拽实现拼图相关推荐

  1. html5拖拽实现拼图,HTML5技术之图像处理:一个滑动的拼图游戏

    HTML5有许多功能特性可以把多媒体整合到网页中.使用canvas元素可以在这个空白的画板上填充线条,载入图片文件,甚至动画效果. 在这篇文章中,我将做一个滑动拼图的游戏用来展示HTML5 canva ...

  2. html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案

    Js拖拽实现改变Table的列宽 如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下: function MouseDownToResize(o ...

  3. FullCalendarDemo5 控件的实例讲解—拖拽实现值班排班(五)

    FullCalendarDemo5 控件的实例讲解-拖拽实现值班排班(五) (五)c# asp.net 操作FullCalendarDemo5 导出排班记录 目的:点击导出按钮,弹出参数指定对话框,选 ...

  4. 【Python爬虫系列教程 40-100】selenium结合拖拽实现极验验证码破解

    文章目录 前言 1. 破解极验验证码思路 2. B站登录界面 3. 极验缺口图和原始图的截取 4. 对比缺陷图和原始图的像素,确定拖拽的像素 5. 拖拽轨迹 6. 执行以上所有代码,实现破解B站极验验 ...

  5. html5简单拖拽实现自动左右贴边+幸运大转盘

    此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: ​ 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...

  6. HTML5 元素拖拽实现 及 jquery.event.drag插件

    如上图片: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" co ...

  7. Silverlight中的拖拽实现的图片上传---1

    在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接放到浏览器中,我在想使用这个功能来做成图片上传(或者文件上传),这样的用户体验将会是非常好的. 传统的上传都是打开对话框,选择 ...

  8. html拖拽显示获取坐标,html界面元素拖拽实现[超简单]

    就是一个十分简单的小功能,将一个html界面元素从一个地方拖到另一个地方(复制或移动) html部分,省略部分非关键代码 A股 拖拽js部分, 即监听部分 $('#ma').bind('dragsta ...

  9. Html轻松使用拖拽实现垃圾桶,代码带注释,包你能看懂

    效果 参考教程: W3school: http://www.w3school.com.cn/html5/html_5_draganddrop.asp 菜鸟教程: http://www.runoob.c ...

  10. Unity3D鼠标拖拽实现相机移动

    实现拖拽的方法: 通过创建一个X-Z平面 得到从屏幕发出的射线到当前X-Z平面的碰撞点 得到的位置作为起始位置和结束位置 当鼠标按下的时候 得到的是初始位置 当鼠标松开的时候 得到的是结束位置 得到两 ...

最新文章

  1. kaggle项目:基于随机森林模型的心脏病患者预测分类!
  2. 2021年春季学期-信号与系统-第十五次作业参考答案-第九小题参考答案
  3. 快速选择思维导图软件,就是这么任性
  4. 关于TxQBService报的错,腾讯你真牛B啊
  5. 机器视觉 · 工业相机
  6. linux密码忘记grub登陆,Linux忘记密码后使用grub重置密码
  7. Java异常处理原则与技巧总结
  8. 如何用业余时间成为抢手的数据人才?
  9. Android开发继承webview,WebView如何从当前的Android主题继承颜色?
  10. Linux下C编程-----IO/文件操作 模拟linux ls程序显示文件系统树形结构(2)
  11. selenuim webDriver API 16种定位方式
  12. 常用PDF编辑工具 Adobe Acrobat、PDF-XChange Editor 、福昕PDF编辑器、PDFelement
  13. COM组件注册DLL不成功
  14. js 判断数组元素是否存在重复项
  15. Capstone/CS5211低成本替代昆泰CH7511B方案
  16. 泰坦尼克号幸存预测项目
  17. Oracle数据库表空间不足 ORA-01653:unable to extend table 表名称 by 8192 in tablespace 表空间名称
  18. Deepin20固定无线网卡多个IP地址
  19. 《MLB棒球创造营》:走近棒球运动·华盛顿国民队
  20. IoT物联网——各大厂质量保障实践分享汇总(智能语音视频篇)

热门文章

  1. 【安卓】3.修改列表增加下划线样式(保姆级图文+附示例)
  2. Tomcat 服务器搭建
  3. Location服务之LocationManager
  4. 多商户商城系统功能拆解14讲-平台端会员等级
  5. 表单设计:五类表单构成要素设计
  6. 悲伤是一种毒,会上瘾
  7. 极路由2(HC5761)免云平台开启SSH
  8. jscriptbug
  9. LINUX安装KDC服务
  10. 金阊oracle服务器,配置 KDC 服务器