需求
使用两张图片作为移动范围和操作杆,使操作杆能在移动范围中移动,当鼠标拖拽操作杆移出操作范围时及鼠标在移动范围外移动时,操作杆同样可以随鼠标运动。简易图如下:
实现方式
Overlay模式Canvas下的实现
- 首先建立Canvas画布,可直接创建UI中的Image进行建立,选择Canvas的渲染模式(
Rander Mode
)为Screen Space - Overlay
。 - 为Image创建子物体Image,将其赋予
Source Image
均赋值Sprite类型的图片。 - 为子物体添加脚本JoyStick,脚本实现UGUI回调函数的接口,拖拽中、拖拽结束。
class JoyStick : MonoBehaviour,IDragHandler, IEndDragHandler
{
//移动半径
public float moveRadius;
//移动速度
public float moveSpeed = 10f;
//记录摇杆初始位置
private Vector3 initalPos;
//玩家身上的控制脚本
private PlayerController playerController;
private void Awake()
{
initalPos = transform.position;
playerController = GameObject.FindGameObjectWithTag("Player").GetComponent<PlayerController>();
}