当前位置：首页 > news >正文

用Unity ScrollRect组件实现王者荣耀的操作摇杆

news 2026/3/27 3:25:00

用Unity ScrollRect组件复现王者荣耀的操作摇杆

1.前言

看到一位博主用ScrollRect制作摇杆的过程，遂想复现一下王者荣耀的摇杆，呈现效果可谓是两模两样。
参考来源：Unity使用ScrollRect制作摇杆（UGUI）

2.效果展示

3. 实现过程

这个实现过程其实和那位博主是一样的，不过我还加了一个箭头辅助让方向可视化，这里就需要注意了，直接把这个 Arrow 加在代码中是不会被序列化到Inspector面板上的，因为ScrollRect的自定义编辑器原因，我们需要加一个辅助的自定义编辑器来让我们加的元素显示到Inspector上。

4.脚本实现

1.自定义编辑器 - RockerEditor

usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEditor;usingUnityEditor.UI;usingUnityEngine;usingUnityEngine.UI;[CustomEditor(typeof(Rocker),true)]publicclassRockerEditor:ScrollRectEditor{privateSerializedPropertym_Arrow;protectedoverridevoidOnEnable(){base.OnEnable();m_Arrow=serializedObject.FindProperty("arrow");}publicoverridevoidOnInspectorGUI(){//绘制父类 ScrollRect的属性base.OnInspectorGUI();//绘制子类新增的自定义属性serializedObject.Update();EditorGUILayout.Space();// 空行分隔EditorGUILayout.LabelField("Custom Properties",EditorStyles.boldLabel);// 新增的属性标题EditorGUILayout.PropertyField(m_Arrow,newGUIContent("Arrow Image"));serializedObject.ApplyModifiedProperties();}}

2.摇杆 Rocker

usingSystem;usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;usingUnityEngine.EventSystems;usingUnityEngine.UI;publicclassRocker:ScrollRect{//摇杆半径protectedfloatmRadius=0f;//箭头显示的半径protectedfloatmBgRadius=0f;//显示摇杆方向的箭头[SerializeField]privateImagearrow;protectedoverridevoidStart(){base.Start();varrectTransform=this.GetComponent<RectTransform>();//计算摇杆半径，取 RectTransform 的宽度（sizeDelta的x表示对象的实际宽度）的20%//表示手柄的可移动范围mRadius=rectTransform.sizeDelta.x*0.15f;mBgRadius=rectTransform.sizeDelta.x*0.2f;if(arrow!=null){arrow.gameObject.SetActive(false);//初始状态隐藏箭头}}publicoverridevoidOnBeginDrag(PointerEventDataeventData){base.OnBeginDrag(eventData);if(arrow!=null)arrow.gameObject.SetActive(true);//开始拖拽时显示箭头}publicoverridevoidOnDrag(PointerEventDataeventData){//调用父类方法，更新 content 的 anchoredPosition（手柄位置）base.OnDrag(eventData);varcontentPosition=this.content.anchoredPosition;//获取手柄相对于摇杆的锚点位置//magnitude = √(x² + y²)if(contentPosition.magnitude>mRadius){contentPosition=contentPosition.normalized*mRadius;//限制手柄的位置在圆形范围内SetContentAnchoredPosition(contentPosition);//设置手柄在圆形范围内的位置}//Debug.Log(contentPosition);if(arrow!=null&&contentPosition.magnitude>0.01f)//防止微小的输入导致箭头抖动{//获取当前手柄的标准化方向向量Vector2direction=contentPosition.normalized;//计算箭头在摇杆背景外表面的位置arrow.rectTransform.anchoredPosition=direction*mBgRadius;//计算箭头旋转角度floatangle=Mathf.Atan2(direction.y,direction.x)*Mathf.Rad2Deg;//计算手柄位置与水平轴的夹角arrow.rectTransform.localRotation=Quaternion.Euler(0,0,angle-90f);}}publicoverridevoidOnEndDrag(PointerEventDataeventData){base.OnEndDrag(eventData);if(arrow!=null)arrow.gameObject.SetActive(false);//拖拽结束隐藏箭头}}