使用UGUI實現拖拽功能（拼圖小游戲）

實現方式

1、引入UGUI自帶的事件系統　　UnityEngine.EventSystems

2、為我們的類添加接口　　IBeginDragHandler, IDragHandler, IEndDragHandler

using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;

public class DragOnPic : MonoBehaviour,IBeginDragHandler, IDragHandler, IEndDragHandler {


    public void OnBeginDrag (PointerEventData eventData)
    {
        throw new System.NotImplementedException ();
    }


    void IDragHandler.OnDrag (PointerEventData eventData)
    {
        throw new System.NotImplementedException ();
    }


    public void OnEndDrag (PointerEventData eventData)
    {
        throw new System.NotImplementedException ();
    }

}

拼圖游戲實例

 

1、准備一張拼圖要用到的圖片素材，並拖入Unity中

2、圖片的TextureType選為Sprite(2D and UI)， 點擊Apply

3、將SpriteMode改為Multiple，點擊SpriteEditor，在彈出的窗口中點Slice，Type為Grid，我這張圖片分辨率是500x500的，拆分為16份，所以我的PixelSize是125x125，最終結果如下圖：

4、添加一個Panel作為背景，為Panel添加GridLayoutGroup組件，具體設置如下，添加腳本ImageCreater用於生成圖片

5、為Panel添加一個Image作為我們拼圖的格子的背景，名字改為Cell，在這個Cell上再添加一個Image作為圖片的載體，並將它的Tag設置為Cell，為Image添加拖拽腳本DragOnPic，將Cell拖成預制體備用

6、新建一個GameManager類用於實現隨機生成圖片的功能

 

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;
        }
    }
}

 

7、在ImageCreater中寫入生產圖片的方法

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;
        }
    }

}

 

8、到這里，拼圖游戲已經基本成形，下面只需要實現每張圖片的拖拽功能就OK了，下面是DragOnPic的代碼

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!!!");
        }
        
    }
    
}

 

在GameManager中加入設置父物體的方法及檢測是否完成拼圖的方法：

 1　　  /// <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;
    }

 

 

 到這里，拼圖的基本功能就算是全部完成了

網頁版預覽

PC版下載