Detailed explanation of the functional ideas of implementing Edge browser mouse gestures in unity

summary

In the Edge browser, you just need to use the mouse to hold the right button and drag in different directions on the screen to trigger many quick operations, and the effect is very smooth. So if you want to use unity to develop such a function that supports PC and mobile, what should you do?

Implementation ideas

It is actually not complicated to implement. The technical points involved include screen drag events on the PC and mobile terminals, related operations of two-dimensional vectors, gesture matching algorithms, and event system design patterns.
The general idea is: define the mouse path to different event types, such as: "Up", "Down", "Left", "Right", and "Right", adding adjacent and non-repetitive path types to a list. Through the mouse event, obtain the sliding direction of the current frame and the previous frame. If the direction is offset from the current direction range, it is judged that the mouse has turned during the sliding process, and the direction of each turn is recorded in a list. The number of turns depends on the number of defined event mouse paths. If this number exceeds this number, it is determined as an invalid gesture. Finally, when the gesture is raised, match the defined event gesture path list and the gesture list recorded during the sliding process. If the match is successful, the trigger event is determined.

1. Mouse drag event

Tip: There is a difference between mobile and PC events

MouseDown

 	private static bool MouseDown()
    {
        if ()
        {
            if ( == 1 && [0].phase == )
            {
                MouseId = 0;
                return true;
            }
            return false;
        }
        if ((1))
        {
            return true;
        }
        return false;
    }

MousePress

 	private static bool MousePress()
    {
        if ()
        {
            return [0].phase ==  || [0].phase == ;
        }
        if ((1))
        {
            return true;
        }
        return false;
    }

MouseUp

 	private static bool MouseUp()
    {
        if ()
        {
            return [0].phase ==  || [0].phase == ;
        }
        if ((1))
        {
            return true;
        }
        return false;
    }

2. Calculation of the two-dimensional direction of mouse drag

Get the direction vector of mouse drag

  	private Vector2 GetDragDirection()
    {
        var v = (Vector2) - _preMousePoint;
        return ;
    }

Calculate the direction, currently only four directions are identified, up, down, left and right. The sub-method can be expanded into eight directions.

 private Direction GetDirection()
    {
        var dir = GetDragDirection();
        var dotH = (, dir);
        var dorV = (, dir);
        //More tends to slide horizontally        if ((dotH) > (dorV))
        {
            return dotH > 0 ?  : ;
        }
		//More tends to slide vertically        if ((dotH) < (dorV))
        {
            return dorV > 0 ?  : ;
        }
        return _preDirection;
    }

Tip: _preMousePoint is the mouse position of the previous frame. It is recommended not to collect this field too frequently. It is not recommended to collect each frame, because it may cause noisy gestures when the sliding speed is too slow, which will affect the event result.

3. Match the mouse gesture path

Record path direction

private void UpdateGestures()
    {
        var dir = GetDirection();
        if (_preDirection != dir)
        {
            _preDirection = dir;
            _curDirections.Add(dir);
        }
    }

Define event paths, here only examples up to two paths, event paths can be extended to multiple segments

  public static Dictionary<GestureState, List<Direction>> Gestures = new()
    {
    {  , new() {  }},
    {  , new(){  }},
    {  , new() {  }},
    {  , new() {  }},
    {  , new() { , }},
    {  , new() { , }},
    {  , new() { , }},
    {  , new() { , }},
    {  , new() { ,  }},
    {  , new() { ,  }},
    {  , new() {,  }},
    {  , new(){,  }},
    };

Match paths

private GestureState MatchGesture()
    {
        var state = ;
        foreach (var gesture in Gestures)
        {
            if ((_curDirections))
            {
                state = ;
                break;
            }
        }
        return state;
    }

summary

Straight-line gestures are relatively simple. We will continue to study advanced gestures in the future, such as curves, opposite sex, etc. We welcome to communicate!

This is the article about implementing the function of Edge browser mouse gestures in unity. For more related unity Edge browser mouse gestures, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!