摇杆UI制作教程（内附逻辑截图 效果展示视频将会单独发到作品展示区）

2020-5-26特别说明：这个逻辑还是具备一定的局限性 不是最优解 目前我个人所知的最优解是十一楼（如下图）

玩家提供并已经成功的思路 这个思路避开了触点选择的问题 我也根据这个方法做出来更简单局限性更小的逻辑了 有空会更新出来 但是本篇教程仍然有很多方法和规律值得萌新学习 也可以根据十一楼玩家提供的思路进行自己探索研究 有相关问题也可以评论提问 感谢玩家火某的分享

声明：摇杆UI也是很早就见过别人做的了 当时我想做但是并不会 如今我也做出来了 十分感谢一位玩家对我的提点如下图（图一）



制作动机：自己前段时间做过一个98行的运用了相似三角形对应边比例相等原理来限制遥感活动范围 也是支持左右屏各一个触点同时操作的摇杆UI 但是添加机械活动语句需要大量重复 十分麻烦 后来无意间看到上图（图一）这位玩家的摇杆帖子就想进去康康人家是怎么做的 然后我看到了贝塞尔曲线 奈何本人学历较低 知识储备贫瘠 根本不懂啥意思 我就将对我来说我更好理解但是语句大为繁复的相似三角形限位方法在帖子评论了（也算是交流学习吧）楼主看到我的方法后给我说了上图（图一）的一段话令我豁然开朗 脑子里面迅速这款摇杆UI的雏形 随着新作品的逐渐成型 我觉得我需要根据这位玩家的思路结合我第一版的摇杆UI制作经验 重新制作一版以我个人能力在当前版本能做到语句最简化的摇杆UI

参考成品：某掌机或游戏手柄 某MOBA游戏摇杆

整体思路：摇杆操作系统 按照个人理解 分为手指直接触控的摇杆 限制摇杆活动范围的圆环 以及读取摇杆位置并反馈出该位置对应机械活动的逻辑AI

细节考虑以及前作经验分享：根据以往制作摇杆UI经验 游戏内同时读取到多个触点坐标时无法准确反馈出需要的触点坐标 会出现一些错乱使读取触点坐标偏移但又有必要性的操作 例如 双触点先后点击屏幕并按住 双触点先后离开屏幕等 根据我个人习惯 左右屏各一根大拇指就能完成全部操作 因此制作仅支持双指分屏同触异动的摇杆UI 如下图（图二）

对上图（图二）的说明：行数较多的左摇杆就是视频中两个摇杆里左边那个添加了简单机械活动的AI 行数较少（三十行）的则是视频中右边那个啥都不能操控的摇杆AI 为了方便讲解 我将先用该右摇杆进行UI方面的制作讲解 然后再讲解左摇杆里如何识别动作指令并反馈

开始制作：

P1 首先 我允许UI超出屏幕范围 是为了节省无操作时占用的屏幕面积 然后生成一个按钮（摇杆激活有效区域）你只有按到这个按钮才能将摇杆从右下角呼出并进行操作 不会影响到其他UI的操作 生成一个圆环（摇杆活动范围限制）作为摇杆可活动范围的标示 再生成一个圆环（摇杆本杆）调用如果功能 在变量功能里选择按钮后选择是否按住语句开始我们的表演如下图（图三）

对上图（图三）的补充说明：我们需要一段逻辑来智能选择在同时存在两个触点时我们需要的那个触点坐标 因此我们需要在功能调用 系统 输入里面调出判断即时触点数量的语句（触点数）

P2 然后我们要来做智能选择的部分如下图（图四）请先看第10 12行语句（功调 系统 输入 多触点位置 旁边说明表示按先来后到从0开始往上编号 所以零号代表先点击屏幕的位置坐标 一号代表后点击屏幕位置的坐标）当这个触点数小于二的时候 我们创建一个表示触点序号的小数 令它为0（表示当我按下去的时候屏幕上只有我这一个点 那我就读取零号点这个坐标）当这个触点数大于一的时候（表示我这个点按下去的时候 屏幕上已经有了一个触点 加上我就是两个了） 我们把先触点（0）与后触点（1）的X分量调出用以判断无论先触点也好后触点也罢 谁的坐标离摇杆位置最近（因为我们现在讲解的是右摇杆 所以我们应该优先读取更靠近右边的那个触点的坐标）于是当先触点的X小于后触点的X时 令触点序号为1（表示当后触点比先触点更靠近右摇杆时我们就读取后触点的坐标进行使用）先触X大于后触X时也是同理

P3 请看下图（图五）再然后 我们还是调出多触点位置语句 命名为有效点即时屏坐标 令其参数序号为上面创建过的小数序号（表示这个就是经过小数序号的选择之后我们需要的那个触点的屏幕坐标了 这个坐标会跟着我们的手指移动 可以作为摇杆本杆的即时坐标）继续调出多点按下位置命名为有效点按瞬屏坐标 同样序号为小数触点序号（表示经过选择后的触点在按下瞬间那一刻的屏幕坐标作为摇杆活动限制范围的呼出位置 这个坐标就像拍出来的照片一样定格在我们按下去的位置 不会跟着手指移动跑来跑去）

对上图（图五）继续介绍：因为我们的手机屏幕不是正方形 但是屏幕横纵单位坐标都一样（那么横纵单位坐标的实际长度就不一样了）所以我们需要在功调 系统 屏幕 里面调用转换为分辨率坐标这个功能来把屏幕坐标换成分辨率坐标（这样横纵单位坐标的实际长度就一样了）

然后我们调用向量减法 令有效点即时分坐标（分辨率坐标）减去有效点按瞬分坐标（按下瞬间分辨率坐标）并将得数命名为摇杆位移分向量（表示我们从当时按下去的位置滑到现在所在的位置时我们滑过的路线向量）再然后我们在变量功能里选择这个向量并调用限制向量长度这个功能语句命名为杆位移限制分向量（该语句的参数为你希望这个向量长度能达到的最大值 也就是摇杆的活动半径了 该是多少呢 请看图三 限制范围的半径是400 摇杆的半径是100 而因为这里有个BUG 实际上半径应该写成直径 所以这个活动半径就应该是范围的真正半径200减去摇杆的真正半径50 得150）（该语句整个语句表示包含了 一 当活动半径不超过限制半径时正常输出向量 二 当活动半径超过限制半径时 输出经过长度限制后的同方向向量 简直专为摇杆UI而生）最后调用向量加法 把这个杆位移限制分向量（也就是滑动向量）加上有效点按瞬分坐标（滑动起点分辨率坐标）得数命名为摇杆限制分坐标（这个就是摇杆本杆的分辨率坐标了）然后因为生成的UI坐标都是用屏幕坐标表示的 所以还要摇杆限制分坐标再转回摇杆限制屏坐标 而遥感活动限制范围（就是那个限制圆环）所用到的屏幕坐标已经在第二十行用多点按下位置的功能表达了出来 后来为了方便计算才转了分辨率坐标 因此可以直接将这个屏幕坐标带入给遥感活动限制范围的屏幕坐标设置（呼 终于结束这趴）

P4 最后就简单了 松开按钮瞬间 统统回到右下角去如下图（图六）

到这里 这个版本的摇杆UI就做完了

接下来我来讲解一下再哪里加入以及如何加入机械活动语句的个人思路 因此我们将逻辑图换成左摇杆

拿喷射器作为例子 我采用的是按住后相关喷射器全时打开 通过摇杆位移量调整各个喷射器力量来完成对应机械活动

请看下图（图七）我们先在第23行杆位移限制分向量这一行下面调出其X分量（摇杆X活动）和Y分量（摇杆Y活动）备用（分别表示合位移中横向和纵向各自的位移像素长度）

请看下图（图八）然后我们在第29行摇杆坐标后面调用除法计算 用摇杆X活动除以150（最大活动距离）来计算出即时活动的占比 命名为X活动比例系数 再调用乘法算出其相反数 负X活动比例系数 创建小数喷射力量 令其为你希望的喷射器最大力量 我这里就设了1 然后用这个最大力量乘以X活动比例系数及其相反数获得喷射器在摇杆达到该坐标时的实际力量 左右移动喷射器全时打开 分别将其力量设置为负正X喷射实际力量（我摇杆往左滑 X为负 处在右边的向左移动喷射器力量需要负负得正）

请看下图（图九）换成Y活动比例系数进行上述操作就行了 不再啰嗦

那么 通过摇杆控制飞行器水平移动的操控系统到这里就做完了 相信由此方法 把机械活动换成转轴 液压杆什么的大家也应该能知道怎么弄了

最后再次感谢玩家Auto-Hood对我关于这个摇杆UI的帮助

本篇教程到此结束 希望有帮助 谢谢观看

（这里不提供代码）