UGUI实现拼图游戏
发表于2018-05-25
自己做个好玩的拼图游戏如何?可能有些人不会做,没关系,下面就教大家使用UGUI制作一个拼图游戏。
效果图如下:

1. 修改图片格式

打开Sprite Editor编辑器

根据数量Slice
2. 制作背景

RawImage做背景,Grid Layout 自动排列
ImageCreater用来随机生成图片
3. 制作Prefab
制作每个小格子,底部是一个容器,最上面才是当前的图片。在图片上挂脚本“DragOnPic”

一个是修改Tag,用来做事件剔除
修改锚点
挂在脚本,最后将Cell整体作为Prefab,供“ImageCreater”生成随机图片
4.源码参考
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; }
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;
}
}
}
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!!!");
}
}
}
