Unity uses finite state machines to restore King Glory virtual sticks

Unity uses finite state machines to restore King Glory virtual sticks

Effect

The UI composition of the joystick

Simple to think that the rocker is made up of 1, 2, 3 maps

1. The base of the joystick
2. Rod for rocker
3. pointing to the stick

You can understand that this is the joystick on the arcade.

Detailed---joystick display rules

• The outermost green rectangle is the clickable area
• Black rectangle is the display area of the joystick

1. The joystick will return to the lift position (status) at the end of the operation.

2. There is a limit to the clickable area of the joystick (green box)

3. The display area of the joystick is limited (black box action: Prevent the joystick from being half-off on the screen)

4. The center position of the joystick changes with the click position (if the threshold is taken outside the display area)

The above rules define the public variables to facilitate the planning of the big guy running state changes at any time

Detailed---operation and status of joystick

First we break down the rocker system into state, action

• Idle (status)
• Press (ACTION)
• Lift Up (action)
• Prepare (status)
• Drag (state)

Action, State Difference ( emphasis )

• Action: End once execution is complete ( call once )
• Status: If no external conditions are triggered, a state will persist ( calls are continued)

• Idle---status
  • No need to do any processing

• Press---Action (finger press the screen trigger)
  • Get Finger Press the coordinates
  • Set the position of the joystick (as shown on the left)
  • If the coordinates are outside the display area, the threshold is taken (as shown on the right)
  • Display or hide of UI, effects

• Lift---Action (finger off screen trigger)
  • Stick back to lift position
  • Display or hide of UI, effects

• Prepare---Status (finger press the screen action to complete the trigger)
  • Get the real-time coordinates of your finger
  • Switch to drag state if the distance between real-time coordinates and the down coordinate is greater than the set value
  • Display or hide of UI, effects

• Drag---State (finger swipe trigger)
  • Get the real-time coordinates of your finger
  • Get the real-time coordinates distance from the rocker's coordinates p
  • Setting the position of the lever
    • Maximum if the position of the bar exceeds the maximum value that can be dragged
• Set the location to point to
  • If the distance p is greater than the display point to the minimum, the display points to
  • Otherwise hidden point

These actions and states are summed up in my test-writing code.
Use enumerations to define the various states and actions of a joystick
The corresponding method can be found in the source code

Detailed---Switch between several states and actions

• Press the button to switch to---press the action

• Lift your finger and switch to---lift

• Press the action to finish switching to---ready state

• Readiness to reach condition switch to---drag state

APIs and methods to use

If you understand the joystick system but have some technical problems, the following method may help you

• Calculates the distance of two coordinates

        float distance = Vector3.Distance(Vec0, Vec1);

• Get the finger press position

        Vector3 mousePosition = UICamera.currentTouch.pos;

• Calculates the position of the finger pressed relative to the joystick

        //转换为世界坐标        mousePosition = UICamera.currentCamera.ScreenToWorldPoint(mousePosition);        //转换为本地坐标        mousePosition = transform.InverseTransformPoint(mousePosition);

• Set the angle to which the joystick is pointing

        //mouseLocalPosition手指按下相对于摇杆的坐标        //background摇杆        //direction指向            Double angle = Math.Atan2((mouseLocalPosition.y - background.localPosition.y), (mouseLocalPosition.x - background.localPosition.x)) * 180 / Math.PI;        //设置摇杆指向的角度         direction.eulerAngles = new Vector3(0, 0, (float)angle);

If there's a better way to ask the big guy,

The usual project link: github.com/qiangzou/joystick

UI, adaptation by Ngui implementation, need to import Ngui into the project (Ngui a bit large, not uploaded)