unity 鼠標或者觸摸 左移右移 圖片移動

Unity 實現左移右移切換圖片

最近發現項目中經常用到一組圖片根據鼠標左滑右滑 圖片移動的功能 所以簡單的整理了下 以後項目中用着比較方便 也是自己的一個記錄吧

首先 要知道 在屏幕中 檢測鼠標有兩種 一種是UNITY本身的方法   Input.mousePosition 還有一種是射線檢測 涉及到3D場景 我這邊寫的是關於2D的移動檢測  第一要知道 檢測鼠標是左移還是右移 先獲取到鼠標的觸摸點 要根據兩點判斷 開始點跟結束點 開始點在結束點的左邊  就是圖片向右邊滑動的動畫  開始點在結束點的右邊 就是圖片向左滑動的動畫  還有圖片移動的 一般顯示的場景中只有一張圖片  其餘的都是不顯示的 或者說被遮擋的  這就要用到Unity的 Mask組件  這就是擋着其餘不顯示的界面UI

像這樣的總結點設置 Game下的子節點就是需要移動的圖片 可以設置成動態加載 看功能的實際需求 

這樣設置好了之後就開始寫功能代碼了 首先 先寫檢測鼠標左移還是右移的 代碼 需要有兩個座標 開始座標跟結束座標 我這邊寫了個最簡單的設置 不需要檢測其他複雜的操作 只需要判斷鼠標按下跟擡起的兩種狀態 判斷前後座標的位置 上代碼

設置變量

    Vector2 startpos;
    Vector2 start,end;

    bool IsMouse = false;

update中的代碼判斷
//鼠標初始觸摸位置
        startpos.x = Input.mousePosition.x;
        startpos.y = Input.mousePosition.y;

        if (Input.GetMouseButtonDown(0))
        {
            start = startpos;
            IsMouse = false;
        }
        if (Input.GetMouseButtonUp(0))
        {
            end = startpos;
            IsMouse = true;
        }
        //判斷左移還是右移
        if (IsMouse)
        {
            LeftOrRight();
        }

還有判斷左移右移的方法

 void LeftOrRight()
    {
        DOTween.KillAll();
        if (start.x - end.x < 0)
        {
            Right = true;
            //Debug.Log("right");
        }
        if (start.x - end.x > 0)
        {
            Left = true;
            //Debug.Log("left");
        }
        IsMouse = false;
    }

這樣就將鼠標的左移還是右移的判斷簡單的可以識別了 而且這樣檢測有個比較好的 就是短距離也能判斷出來

之後根據這些左移還是右移 在UPDATA中開始實現圖片的移動 同樣移動圖片只需要執行一次 所以要加bool變量控制次數

    bool Right = false;
    bool Left = false;
    int Index = 0;

因爲我的功能需要是多張圖片 來回左右切換 所以我也加了個int值判斷當前是哪一張圖片顯示區域 而切換移動的動畫 我使用的是dotween編寫 可能是比較方便快捷吧

 //往右移動畫
        if (Right && Index >= 0)
        {
            Index--;
            if (Index < 0)
            {
                Index = 0;
            }
            //Debug.Log(Index);
            MoveGame.transform.DOLocalMove(gamevec[Index],1f);
            Right = false;
        }
//往左移動畫
        if (Left && Index < MoveGame.transform.childCount)
        {
            Index++;
            if (Index > MoveGame.transform.childCount - 1)
            {
                Index = MoveGame.transform.childCount - 1;
            }
            //Debug.Log(Index);       
            MoveGame.transform.DOLocalMove(gamevec[Index],1f);
            Left = false;
        }

左移右移的動畫就是根據int值跟bool判斷的  往左移的動畫就是index++，反之--，當然dotween動畫有個不好的地方 就是動畫未做完 在做一個動畫  位置會發生變化  所以我們在判斷左還是右的時候就將所有的動畫kill掉 這樣就實現了左移右移切換圖片了 實現的效果