UGUI实现拼图游戏
2015-06-29 20:29 糯米粥 阅读(1126) 评论(5) 编辑 收藏 举报首先看看效果图
拼图完成后,会显示game over
来看看工程结构图
Canvas:画布
kanpask:背包
cell 格子,每个格子上面放一个分割的图片
food就是要拖动的图片
这里cell-food创建一个预设体
准备一个图片。分割成精灵
kanpask:组建
因为这里是5x5的格子,表格布局(Grid Layout Group)x:100 y:100,spacing:x=1 y=1
所以款和高分别是504
food添加组建,来控制是否启用射线
创建createImge.cs脚本挂载在kanpask上
createImge.cs脚本
1 using UnityEngine; 2 using System.Collections; 3 using UnityEngine.UI; 4 5 /// <summary> 6 /// 创建图片,打乱图片排序。然后显示在格子里面 7 /// </summary> 8 public class createImge : MonoBehaviour 9 { 10 11 public Sprite[] sprite; //要显示的图片精灵 12 public GameObject imgPrefab;//生产格子的预设体,这里是父子关系 cell-food 13 14 GameObject[] cells; //保存当前生产的图片精灵,为了拼图后的比较 15 16 public static createImge instance; //单列 17 18 void Awake() 19 { 20 instance = this; //单列脚本 21 } 22 23 // Use this for initialization 24 void Start() 25 { 26 //随机排序图片 , 27 for (int i = 0; i < sprite.Length; i++) 28 { 29 int index = Random.Range(i, sprite.Length); 30 Sprite temp = sprite[i]; 31 sprite[i] = sprite[index]; 32 sprite[index] = temp; 33 } 34 cells = new GameObject[sprite.Length]; 35 //开始生成对象,并显示在场景 36 for (int i = 0; i < sprite.Length; i++) 37 { 38 //GameObject o = Instantiate(imgPrefab) as GameObject; 39 cells[i] = Instantiate(imgPrefab) as GameObject; 40 41 cells[i].name = "exceed_" + i.ToString(); 42 43 cells[i].transform.GetChild(0).GetComponent<Image>().sprite = sprite[i]; 44 cells[i].transform.SetParent(transform); 45 //因为是给子对象赋值,所以先找到第一个子对象GetChild(0),然后找到Image组建赋值精灵 46 cells[i].transform.GetChild(0).GetComponent<Image>().sprite = sprite[i]; 47 //设置当前对象的父对象 48 cells[i].transform.SetParent(transform); 49 //为了保证生成的对象没有缩放模式,写Vector3(1, 1, 1)的简码。 50 cells[i].transform.localScale = Vector3.one; 51 } 52 } 53 54 // Update is called once per frame 55 void Update() 56 { 57 58 } 59 /// <summary> 60 /// 判断是否已经拼图成功 61 /// </summary> 62 /// <returns></returns> 63 public bool IsFinsid() 64 { 65 Sprite food; 66 foreach (GameObject cell in cells) 67 { 68 //笔记父物体和子物体名子是否相等 69 food = cell.transform.GetChild(0).GetComponent<Image>().sprite; 70 if (cell.name != food.name) 71 { 72 return false; 73 } 74 } 75 return true; 76 } 77 }
运行游戏看看层次图
红色标记的一个预设体。没用的
接下来是看拖拽代码了
创建createDrag.cs挂载在food上面
createDrag.脚本
1 using UnityEngine; 2 using System.Collections; 3 using UnityEngine.UI; 4 using UnityEngine.EventSystems; 5 public class createDrag : MonoBehaviour 6 , IBeginDragHandler, IDragHandler, IEndDragHandler 7 { 8 /* 9 拖拽原理:是有很多格子(cell),cell里面有拖动的对象,cell可以做背景图片 10 * 1:程序运行要找到当前物体(即拖动的对象)的位置坐标,也需要临时用了当父物体容器的对象(这样避免遮挡效果),找到被拖动物体的CanvasGroup(CanvasGroup 包含blocksRaycasts属性 如果开启则可以设置是否射线检测到(才能执行相应的事件)) 11 * 2:拖拽开始,记录拖拽前物体的坐标,并设置当前物体为临时容器的子对象,并取消被拖拽物体的射线检测, 12 * 3:获取拖到目标点上的对象。跟当前拖动前的位置交换即可 13 */ 14 15 //自己的RectTransform 16 RectTransform rf; 17 //Vector3 oldPosition;//原来的位置,拖拽前的位置 18 Vector3 newPosition;//拖拽中的位置 19 20 //画布的RectTransform,开始拖拽的时候设它为父物体,避免遮挡效果,如果图片不在Canves中则会被挡住 21 RectTransform knapsackRF; 22 //原来的格子的RectTransform 23 RectTransform cellRF; 24 25 CanvasGroup cg; 26 27 bool isDrag; //是否开始拖拽 28 29 GameObject enterGameObject; 30 31 32 //查找到对象 33 void Awake() 34 { 35 rf = GetComponent<RectTransform>(); 36 knapsackRF = GameObject.FindWithTag("kanpask").GetComponent<RectTransform>(); 37 cg = GetComponent<CanvasGroup>(); //CanvasGroup 包含blocksRaycasts属性 如果开启则可以设置是否射线检测到(才能执行相应的事件) 38 } 39 40 41 /// <summary> 42 /// 开始拖拽 43 /// </summary> 44 /// <param name="eventData"></param> 45 public void OnBeginDrag(PointerEventData eventData) 46 { 47 //oldPosition = rf.position; 48 49 //每次开始拖拽前记录它的原始父物体 50 cellRF = rf.parent.GetComponent<RectTransform>(); 51 //开始拖拽的时候,设置当前的父物体 注意顺序,必须先获取在设置父物体, 52 rf.SetParent(knapsackRF); 53 // 开始拖拽后不能被射线检测到 54 /* 55 因为事件都是靠射线检测的。当拖动图片到另外一张图片上的时候, 56 * 从鼠标发出的射线就会执行当前被拖动的物体。射线就停止了(因为射线碰到物体就会停止),这样射线就不会触碰到下面那个图片 57 * 也就获取不到要放置物体位置的信息了。 58 */ 59 cg.blocksRaycasts = false; 60 isDrag = true; 61 } 62 /// <summary> 63 /// 拖拽中 64 /// </summary> 65 /// <param name="eventData"></param> 66 public void OnDrag(PointerEventData eventData) 67 { 68 if (isDrag) //必须要执行了OnBeginDrag才执行OnDrag 有时候会遇到不执行OnBeginDrag 69 { 70 // 通过屏幕中的鼠标点,获取在父节点中的鼠标点 71 RectTransformUtility.ScreenPointToWorldPointInRectangle(rf, eventData.position, eventData.enterEventCamera, out newPosition); 72 rf.position = newPosition; //设置拖动的图片的位置 73 //print(newPosition); 74 } 75 } 76 77 /// <summary> 78 /// 结束拖拽 79 /// </summary> 80 /// <param name="eventData"></param> 81 public void OnEndDrag(PointerEventData eventData) 82 { 83 if (isDrag) // 84 { 85 enterGameObject = eventData.pointerEnter;//获取当前点上的对象(这样也 是根据射线检测的),也就是拖拽的物体放到了那个物体上面 86 87 //如果拖拽到空的地方 88 if (enterGameObject == null) 89 { 90 MySetParent(rf, cellRF); 91 } 92 else //如果非空 93 { 94 //cell--food是父子关系,坐标相同。所以food会把cell覆盖。UGUI是这样的 95 96 switch (enterGameObject.tag) 97 { 98 case "cell": 99 MySetParent(rf, enterGameObject.transform); //如果是格子,即格子上没有图片 是后面的白板 100 break; 101 case "food": //即格子上有图片 102 MySetParent(rf, enterGameObject.transform.parent); //把当前拖动的图片放到指定位置 103 MySetParent(enterGameObject.transform, cellRF); //把当前的图片放大我拖动图片的位置 ,即我拖动图片要放的位置 。这个位置的图片放到被拖动来之前的位置 ,就是交换位置 104 break; 105 default: 106 MySetParent(rf, cellRF); 107 break; 108 } 109 } 110 //结束拖拽后可以被射线检测到 111 cg.blocksRaycasts = true; 112 isDrag = false; 113 } 114 //每次拖拽结束判断是否拼图完成 115 if (createImge.instance.IsFinsid()) 116 { 117 print("game over"); 118 } 119 } 120 //建立父子关系的方法 121 void MySetParent(Transform son, Transform parent) 122 { 123 son.SetParent(parent); //设置父子关系 124 son.localPosition = Vector3.zero;//设置坐标为0点基于父物体 125 //或者 126 //son.localPosition = Vector3.one; 127 } 128 }