The article directories

  • preface
  • What is Scroll Rect?
  • 2. Establishment process of virtual joystick
    • 1. Create joystick UI
    • 2. Add Scroll Rect for rocker
    • 2. Write code to realize the control of the joystick for the movement of objects
  • conclusion

preface

When Unity was developing for mobile, virtual joysticks were widely used. Today we use the Scroll Rect component to make a simple and easy to use joystick

What is Scroll Rect?

Scroll RectS is a very useful component of UGUI. It can be used to do some scrolling Windows, such as king of Glory hero selection interface Scroll up and down function. Scroll Rect can be used when you want to display content that occupies a large amount of space in a small area. The scroll rectangle provides the ability to scroll through this content. The official connection is as follows: Official description of the Scroll Rect component

2. Establishment process of virtual joystick

1. Create joystick UI

First, create the IMG structure on the canvas as shown in the figure below and drag it to the place where you want to place the joystick. The anchor point is selected where you want to place the joystick.



Then change the background tone of Image One to blank, change the shape of Image Two to prototype and adjust the color, finally change Image Three to circle and adjust the size, and the final effect is:

2. Add Scroll Rect for rocker

Add the Scroll Rect component to Image One and configure it as shown in the following figure



This completes a simple joystick without writing code. Drag the white circle back to automatically bounce back after letting go. The rebound speed effect can be directly adjusted in Scroll Rect

2. Write code to realize the control of the joystick for the movement of objects

The joystick controls the movement of objects. In the final analysis, the object is controlled by the coordinate changes of the joystick (i.e., Image three). Today, we introduce a simple way to judge whether the joystick moves or not:

public RectTransform Image_three;// Get the joystick
Vector3 Begin_image	;      // Define the initial position vector of the Image three
float x, y;                // Define the difference between the x axis and y axis after dragging the rocker
private void Start()
    {
       	Begin_image = Image_three.position;
    }

void updata()
{
	// Figure out the difference between the initial x axis and y axis after dragging the rocker
	x = image.position.x - begin_image.x;
    y = image.position.y - begin_image.y;
    // If the X-axis difference is greater than 1, let the object move synchronously on the X-axis
    if(Mathf.Abs(x)>1)   
        {      
            transform.Translate(speed * Time.deltaTime*x/Mathf.Abs(x), 0.0);
        }
    // If the difference in the y axis is greater than 1, let the object move in sync on the Y axis
   	if(Mathf.Abs(y)>1)
        {    
            transform.Translate(0.0, speed * Time.deltaTime*y/Mathf.Abs(y)); }}Copy the code

conclusion

You can do some interesting things with the Scroll Rect component, which takes advantage of the bouncback effect. It’s easy to write your own scripts, but try to explore some interesting areas