文章目录

  • 前言
  • 一、Scroll Rect是什么?
  • 二、虚拟摇杆的建立过程
  • 1.创建摇杆UI
  • 2,为摇杆添加Scroll Rect
  • 2.写代码,来实现摇杆对于物体移动的控制
  • 总结



前言

unity做移动端的开发时,虚拟摇杆的应用很广泛,今天使用Scroll Rect组件来做一个简单易用的摇杆

一、Scroll Rect是什么?

Scroll RectS是UGUI一个很好用的组件,可以用来做一些可以滚动的窗口,比如王者荣耀英雄选择界面上下翻看的功能。官方对于其定义为当需要在小区域显示占用大量空间的内容时,可以使用Scroll Rect。滚动矩形提供了滚动浏览此内容的功能。
官方连接为:Scroll Rect组件官方介绍

二、虚拟摇杆的建立过程

1.创建摇杆UI

首先在canvas上面创建如下图所示的img结构,并将其其拖到需要放置摇杆的地方,锚点选择在需要放置的地方。

unity实现屏幕拖动 unity触屏控制物体移动_unity


然后将Image one背景色调为空白,并将image two的形状改变为原型,并调整颜色,最后将Image three变为圆形并调整大小,最终效果为:

unity实现屏幕拖动 unity触屏控制物体移动_unity_02

2,为摇杆添加Scroll Rect

首先为Image one 添加scroll rect组件,并按下图来配置

unity实现屏幕拖动 unity触屏控制物体移动_Image_03


这样就完成了一个简易不用写代码的摇杆,拖动白色圆松手后回自动弹回,弹回速度效果可以直接在Scroll Rect中调节

2.写代码,来实现摇杆对于物体移动的控制

摇杆控制物体移动,说到底还是通过摇杆(即Image three)的坐标变化来进行物体的控制,今天介绍一种简单的方式,判断摇杆的移动与否:

public RectTransform Image_three;//获取摇杆
Vector3 Begin_image	;      //定义Image three的初始位置向量
float x, y;                //定义摇杆拖动后x轴、y轴产生的偏差
private void Start()
    {
       	Begin_image = Image_three.position;
    }

void updata()
{
	//求出拖动摇杆后,摇杆与初始时x轴、y轴的差值
	x = image.position.x - begin_image.x;
    y = image.position.y - begin_image.y;
    //如果x轴差值大于1,则让物体在x轴同步运动
    if(Mathf.Abs(x)>1)   
        {      
            transform.Translate(speed * Time.deltaTime*x/Mathf.Abs(x), 0, 0);
        }
    //如果y轴的差值大于1,则让物体在y轴同步运动
   	if(Mathf.Abs(y)>1)
        {    
            transform.Translate(0, 0, speed * Time.deltaTime*y/Mathf.Abs(y));
        }
}

总结

可以利用Scroll Rect组件的特性来做一些有意思的事情,这种摇杆的实现就是利用了回弹的效果,当然自己写脚本也是比较简单的事情,但是要去尝试探索一些有意思的区域