《Cocos Creator游戏实战》非固定摇杆实现原理

为什么要使用非固定摇杆

许多同学在开发摇杆功能时,会将摇杆固定在屏幕左下某一位置,不会让其随着大拇指触摸点改变,而且玩家只有按在了摇杆上才能移动人物(触摸监听事件在摇杆精灵上)。然而,不同玩家的大拇指长度不同,使用这种固定摇杆可能会导致部分玩家无法快速按到摇杆,从而影响了游戏操作性。

非固定摇杆不需要玩家去寻找摇杆位置,玩家的大拇指只要在屏幕左下区域按下,摇杆就会自动被设置到大拇指按下的位置(触摸监听事件在画布上),游戏操作性因此提升。

注:有关固定摇杆的具体实现原理可以前往查看笔者的这篇文章

P.S. 上面的摇杆文章发布的时间是19年10月,时间过得好快。

运行效果和源码获取

Cocos Creator版本: 3.8.4
项目源码获取:搜索公号All Codes ,公号后台发送"非固定摇杆"

实现原理

1: 在摇杆组件生效时记录摇杆的位置。

ts 复制代码
/* 记录摇杆最初位置 */
recordOriginalPos() {
    this.originalPos = new Vec3(this.node.position)
}

2: 在TOUCH_START事件函数中,判断玩家触摸点是否在屏幕左下区域,是的话将摇杆设置到触摸点位置,不是的话则直接返回。

ts 复制代码
onTouchStart(event: EventTouch) {
    // 获取触摸点坐标
    let loc = event.getUILocation()
    let pos = this.canvas.getComponent(UITransform).convertToNodeSpaceAR(new Vec3(loc.x, loc.y, 0))

    // 判断触摸点是否在画布左下区域
    // 不是的话直接返回,是的话设置摇杆底部面板位置
    if (pos.x > 0 || pos.y > 0) {
        return
    }

    this.node.setPosition(pos)
    this.isTouchAreaCorrect = true
}

3: 在TOUCH_MOVE事件函数中,更新摇杆中心按钮在摇杆底部面板上的位置。

ts 复制代码
onTouchMove(event: EventTouch) {
    if (!this.isTouchAreaCorrect) {
        return
    }

    // 在该事件中我们只需要设置摇杆中心按钮的位置
    let posDelta = event.getDelta()
    this.joystickBtn.setPosition(new Vec3(this.joystickBtn.position).add3f(posDelta.x, posDelta.y, 0))
    
    // 获取移动方向和旋转角度
    this.dir = new Vec3(this.joystickBtn.position.x, this.joystickBtn.position.y, 0).normalize()
    if (this.dir.y > 0) {
        this.angle =  Vec3.angle(this.dir, new Vec3(1, 0, 0)) * 180 / Math.PI
    }
    else {
        this.angle =  -Vec3.angle(this.dir, new Vec3(1, 0, 0)) * 180 / Math.PI
    }

    // 设置主角isMoving变量为true
    this.playerComp.isMoving = true 
}

4: 在TOUCH_END和TOUCH_CANCEL事件函数中,重置相关变量并复原摇杆位置。摇杆底部面板回到在第1步中记录的位置,摇杆中心按钮回到摇杆底部面板中心位置。

ts 复制代码
onTouchEnd(event: EventTouch) {
    // 复原摇杆位置,重置相关变量
    this.node.setPosition(this.originalPos)
    this.joystickBtn.setPosition(Vec3.ZERO)
    this.playerComp.isMoving = false
    this.isTouchAreaCorrect = false
}

onTouchCancel(event: EventTouch) {
    // 复原摇杆位置,重置相关变量
    this.node.setPosition(this.originalPos)
    this.joystickBtn.setPosition(Vec3.ZERO)
    this.playerComp.isMoving = false
    this.isTouchAreaCorrect = false
}

王者荣耀中的非固定摇杆

相关推荐
264玫瑰资源库34 分钟前
红鸟3D互动系统源码一键部署教程(含多个打包版本与功能解构)
java·数据库·游戏
向宇it9 小时前
【unity游戏开发入门到精通——UGUI】UGUI自动布局组件
游戏·ui·unity·c#·游戏引擎
到底怎么取名字不会重复11 小时前
Day15(贪心算法)——LeetCode121.买卖股票的最佳时机&55.跳跃游戏
c++·算法·leetcode·游戏·贪心算法
ue星空14 小时前
UE运行游戏时自动播放关卡序列
游戏
闲人编程1 天前
猜数字游戏:从数学原理到交互体验的完整设计指南
python·游戏·交互·内存管理·猜数字·智能辅导·游戏二分查找
还是车万大佬2 天前
游戏开发总结(大鱼吃小鱼)
游戏·unity·游戏引擎·个人开发·visual studio
大飞pkz2 天前
【Unity】使用XML进行数据读存的简单例子
xml·unity·c#·游戏引擎·游戏开发·数据读写
大飞pkz2 天前
【Unity】如何解决UI中的Button无法绑定带参数方法的问题
ui·unity·游戏引擎·游戏开发·开发记录·button绑定
大飞pkz2 天前
【Unity】使用LitJson保存和读取数据的例子
unity·游戏引擎·游戏开发·数据保存和读取·游戏中的数据处理·类似jsonunility
到底怎么取名字不会重复2 天前
Day16(贪心算法)——LeetCode45.跳跃游戏II&763.划分字母区间
c++·算法·leetcode·游戏·贪心算法