1. 程式人生 > >使用UGUI實現揹包物體的拖拽,交換等操作

使用UGUI實現揹包物體的拖拽,交換等操作

本例項通過UGUI實現揹包的簡單功能,物品的拖拽,交換,拖放位置處理,還有針對揹包多頁面的滑動翻頁的處理。

具體的程式碼如下。

首先是UIItem類,這個揹包內各種物體的類:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class UIItem : MonoBehaviour {
    public Text name;
    public Image image;

    public void Show(string name)
    {
        this.name.text = name;
    }

}
然後是拖拽事件類,出來滑鼠拖拽UIItem類:
using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class DragEvent : MonoBehaviour,IBeginDragHandler ,IDragHandler ,IEndDragHandler ,IPointerDownHandler ,IPointerUpHandler {

    public RectTransform rectTransform;
    public RectTransform rectTransformSlot;
    public Transform draggedItemBox;
    private Vector2 pointerOffset;
    public CanvasGroup canvasGroup;
    public Transform grid;

    /// <summary>
    /// 開始拖拽!
    /// </summary>
    /// <param name="eventData"></param>
    public void OnBeginDrag(PointerEventData eventData)
    {
        SetDraggedPosition(eventData);
    }
    /// <summary>
    /// 設定拖拽開始和結束的位置
    /// </summary>
    /// <param name="eventData"></param>
    private void SetDraggedPosition(PointerEventData eventData)
    {
        if (rectTransform == null)
            return;

        if(eventData .button ==PointerEventData .InputButton .Left )
        {
            //把世界座標轉換為區域性座標
            rectTransform.SetAsLastSibling();

            transform.SetParent(draggedItemBox);
            Vector2 localPointerPosition;
            //畫布是否接受射線
            canvasGroup.blocksRaycasts = false;
            if(RectTransformUtility .ScreenPointToLocalPointInRectangle (rectTransformSlot ,Input .mousePosition ,
                eventData .pressEventCamera ,out localPointerPosition ))
            {
                rectTransform.localPosition = localPointerPosition - pointerOffset;
            }
        } 
    }

    public void OnDrag(PointerEventData eventData)
    {
        SetDraggedPosition(eventData);
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        SetDraggedPosition(eventData);
        canvasGroup.blocksRaycasts = true;

        if(eventData .pointerCurrentRaycast .gameObject .name =="skill")
        {
            transform.SetParent(eventData.pointerCurrentRaycast.gameObject.transform);
            transform.position = eventData.pointerCurrentRaycast.gameObject.transform.position;
        }
        else if(eventData .pointerCurrentRaycast .gameObject .name =="Text99")
        {
            this.transform.SetParent(eventData.pointerCurrentRaycast.gameObject.transform.parent.parent);
            transform.position = eventData.pointerCurrentRaycast.gameObject.transform.parent.parent.position;
            eventData.pointerCurrentRaycast.gameObject.transform.parent.SetParent(grid);
        }
        else
        {
            transform.SetParent(grid);
        }
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        transform.localPosition = Vector3.one * 0.5f;
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        transform.localPosition = Vector3.one;
    }
}


最後的對畫布和Scroll的類處理:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System.Collections.Generic;
using System;
public class ScrollRectHelper : MonoBehaviour ,IBeginDragHandler ,IEndDragHandler {
    /// <summary>
    /// 滑動速度
    /// </summary>
    private float smooting = 2;
    /// <summary>
    /// 每頁顯示的數目
    /// </summary>
    private int pageCount = 16;

    private ScrollRect sRect;
    /// <summary>
    /// 總頁數
    /// </summary>
    private float pageIndex;
    /// <summary>
    /// 是否拖拽結束
    /// </summary>
    private bool isDrag = false;
    /// <summary>
    /// 總頁數索引比例
    /// </summary>
    private List<float> listPageValue = new List<float> { 0 };
    /// <summary>
    /// 滑動目標位置
    /// </summary>
    float targetPos = 0;
    /// <summary>
    /// 當前索引位置
    /// </summary>
    float nowIndex = 0;

    public GameObject UIItem;

    private int count;
    void Awake()
    {
        sRect = GetComponent<ScrollRect>();
        ListPageValueInit();
    }


    /// <summary>
    /// 初始化UIItem
    /// </summary>
    void Start()
    {
        for (int i = 0; i < count ; i++)
        {
            GameObject go = Instantiate(UIItem);
            go.name += +i;
            go.SetActive(true);
            go.transform.localPosition = UIItem.transform.localPosition;
            go.transform.parent = UIItem.transform.parent;
            go.GetComponent<UIItem>().Show("物品" + i);
        }
    }
    /// <summary>
    /// 每頁比例
    /// </summary>
    private void ListPageValueInit()
    {
        pageIndex = (count / pageCount) - 1;
        if(count !=0)
        {
            for (int i = 1; i < pageIndex ; i++)
            {
                listPageValue.Add((i / pageIndex));
            }
        }
    }

    void Update()
    {
        if(!isDrag )
        {
            sRect.horizontalNormalizedPosition = Mathf.Lerp(sRect.horizontalNormalizedPosition, targetPos, Time.deltaTime);
        }
    }


    /// <summary>
    /// 開始拖拽
    /// </summary>
    /// <param name="eventData"></param>
    public void OnBeginDrag(PointerEventData eventData)
    {
        isDrag = true;
    }
    /// <summary>
    /// 拖拽結束
    /// </summary>
    /// <param name="eventData"></param>
    public void OnEndDrag(PointerEventData eventData)
    {
        isDrag = false;
        //獲取拖動的值
        float  tempPos = sRect.horizontalNormalizedPosition;
        var index = 0;
        //拖動的絕對值
        float offset = Mathf.Abs(listPageValue[index] - tempPos);

        for (int i = 0; i < listPageValue .Count ; i++)
        {
            float temp = Mathf.Abs(tempPos - listPageValue[i]);
            if(temp <offset )
            {
                index = i;
                offset = temp;
            }
        }

        targetPos = listPageValue[index];
        nowIndex = index;
    }

    #region 如果需要分頁,此處為左右分頁程式碼,現有功能不需要,所以註釋掉了
    //public void BtnLeftGo()
    //{
    //    nowindex = Mathf.Clamp(nowindex - 1, 0, pageIndex);
    //    targetPos = listPageValue[Convert.ToInt32(nowindex)];
    //}

    //public void BtnRightGo()
    //{
    //    nowindex = Mathf.Clamp(nowindex + 1, 0, pageIndex);
    //    targetPos = listPageValue[Convert.ToInt32(nowindex)];

    //}
    #endregion
}

原文:點選開啟連結

相關推薦

使用UGUI實現揹包物體交換操作

本例項通過UGUI實現揹包的簡單功能,物品的拖拽,交換,拖放位置處理,還有針對揹包多頁面的滑動翻頁的處理。 具體的程式碼如下。 首先是UIItem類,這個揹包內各種物體的類: using UnityEngine; using System.Collections; usi

Game面板實現鼠標物體

知新樹 寧金峰大家都知道在Unity 場景面板(Scene面板)可以實現拖拽物體。具體操作步驟是變換工具欄選擇“手”的拖拽工具(或者快捷鍵“Q”)之後,直接用鼠標左鍵按住竟可以實現拖拽物體。當然這樣的效果實際上並不是實現了拖拽物體,因為物體的位置是沒有變化的。它實際上就是移動我們的當前場景,看起來在拖拽物體似

安卓實現任意控制元件view可並監聽和點選事件可自動拉回螢幕邊緣

因為專案中有需要實現控制元件可任意拖拽的需求,所以簡單寫了個自定義OnTouchListener,以作拋磚引玉,歡迎大家提議反饋。 完整實現類如下,程式碼中有詳細註釋: 使用者可以決定是否開啟自動拖拽邊緣功能,可以監聽控制元件的拖拽和點選事件 public cl

RecyclerView實現條目左滑、右滑移除效果

對於android開發者來說RecyclerView應該已經很熟悉了,專案中基本都是使用RecyclerView來實現列表效果,這裡要實現的是RecyclerView的條目拖拽、左滑、右滑移除效果,這些效果都是在RecyclerView列表基礎上來實現的,所以還是先簡單的實現RecyclerVi

QML實現的無邊框視窗的拉伸基本解決閃爍嚴重問題

使用qt製作的無邊框視窗,只需在其flag中加入FramelessWindowHint。然而,無邊框視窗意味著,無法使用原有的邊框拉伸,拖拽功能。在qwidget中,有很多實現的方法,比如重寫    + mouseMoveEvent(QMouseEvent *event)  

如何解決div裡面的h4標題並且實現div裡面的文字能夠選中和不能選中的問題

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style> *{ margin:0;

Android 使用變形矩陣實現可以縮放旋轉的影象

上篇博文介紹了變形矩陣的一些用法,所以這篇博文就結合變形矩陣來實現一個可以拖拽、縮放、旋轉的影象吧。 首先,我們就繼承ImageView來實現我們的自定義View。 程式碼如下: public class MyMatrixImg extends Ima

dataGridView 如何實現行行的即行之間相互交換位置

private void dataGridView_CellMouseMove(object sender, DataGridViewCellMouseEventArgs e)         {             if ((e.Clicks < 2) &

cookie結合js 實現記住的

div 位置 highlight cti top mov type logs 加載 哈嘍!!!我胡漢三又回來啦!!!有木有記掛挪啊!咱們今天說一個 cookie結合JS的小案例哦! 話不多說直接上代碼: <!DOCTYPE html> <html>

js實現鼠標的效果

郵箱 gin start ott borde mouse ora mar mooc 拖拽效果在我們上網的過程中是很常見的,大家都應該在電腦上面登陸過qq吧,當這個qq的登陸框彈出來的時候,我們是可以進行拖動的。這就是一個拖拽效果 這是我在慕課網上面看到的,我直接拿過來了,地

通過 JS 實現簡單的功能並且可以在特定元素上禁止

如何 alt targe 但是 mes 並且 mod closed demo 前言 關於講解 JS 的拖拽功能的文章數不勝數,我確實沒有必要大費周章再寫一篇重復的文章來吸引眼球。本文的重點是講解如何在某些特定的元素上禁止拖拽。這是我在編寫插件時遇到的問題,其實很多插件的拖

正交相機下實現滾輪按鈕滾動滾輪縮放的功能

pix spa serial ext 分享 內容 onu bject 開始 實現了一個功能,鼠標滾輪鍵按下可以拖動視野內的物體全體(其實是相機自己在移動),滾動滾輪可以縮放內容(其實是改變相機視野大小) 效果如下 代碼奉上 1 using UnityE

jQuery實現div橫向排序

src AR img blog set 排序 局部變量 -a 圖片 參考:https://blog.csdn.net/kongjiea/article/details/45578033 效果圖: html <h1>div橫向拖拽排序</h1>

element table 實現鼠標選中

display ntp num carousel 表數據 win 如果 lec 鼠標移動 父組件 <template> <div id=‘add‘> <airtable :tableData="

基於html5api實現列表的排序

ins urn attribute ret plain drag top round nodes 基於html5拖拽api實現列表的拖拽排序 html代碼: <ul ondrop="drop_handler(event);" ondragover="drago

模擬點選滑鼠移動按鍵下拉框的處理

1.模擬點選 from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains from time import sleep driver = webdriver.Chrom

js 實現簡單的

offsetx spl pac get 正在 ner .get asc 拖動 步驟 使用 JavaScript 實現拖拽的步驟: 讓元素捕獲事件(mousedown, mousemove & mouseup) 單擊並不釋放,觸發 m

基於UGUI的點選(2D和3D)

在UGUI的點選以及拖拽實現都有介面,在unity中有封裝好的類EventTrigger,在這個類中 封裝好了我們常用的一些方法,為了操作方便我對這個類進行了延伸: 在這裡插入程式碼片 using UnityEngine; using System.Collec

前端實現頁面元素

要實現拖拽的效果,有兩種實現方式: mousedown:記錄滑鼠當前座標mousemove:對比當前座標與mousedown的座標div寬width : div.height + mouse

實現容器內部 ---- drag.js

上一篇文章介紹了 sortable.js 實現拖拽,這裡在介紹一種實現拖拽的方法 話不多說直接上程式碼 <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content="t