怎样设计静态网站页面,比较有名的设计网站,合肥做网站加盟,郑州做网站哪个为什么要使用非固定摇杆
许多同学在开发摇杆功能时#xff0c;会将摇杆固定在屏幕左下某一位置#xff0c;不会让其随着大拇指触摸点改变#xff0c;而且玩家只有按在了摇杆上才能移动人物#xff08;触摸监听事件在摇杆精灵上)。然而#xff0c;不同玩家的大拇指长度不同…为什么要使用非固定摇杆
许多同学在开发摇杆功能时会将摇杆固定在屏幕左下某一位置不会让其随着大拇指触摸点改变而且玩家只有按在了摇杆上才能移动人物触摸监听事件在摇杆精灵上)。然而不同玩家的大拇指长度不同使用这种固定摇杆可能会导致部分玩家无法快速按到摇杆从而影响了游戏操作性。
非固定摇杆不需要玩家去寻找摇杆位置玩家的大拇指只要在屏幕左下区域按下摇杆就会自动被设置到大拇指按下的位置触摸监听事件在画布上游戏操作性因此提升。 注有关固定摇杆的具体实现原理可以前往查看笔者的这篇文章。 P.S. 上面的摇杆文章发布的时间是19年10月时间过得好快。 运行效果和源码获取 Cocos Creator版本 3.8.4 项目源码获取搜索公号All Codes公号后台发送非固定摇杆 实现原理
1 在摇杆组件生效时记录摇杆的位置。
/* 记录摇杆最初位置 */
recordOriginalPos() {this.originalPos new Vec3(this.node.position)
}2 在TOUCH_START事件函数中判断玩家触摸点是否在屏幕左下区域是的话将摇杆设置到触摸点位置不是的话则直接返回。
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事件函数中更新摇杆中心按钮在摇杆底部面板上的位置。
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变量为truethis.playerComp.isMoving true
}4 在TOUCH_END和TOUCH_CANCEL事件函数中重置相关变量并复原摇杆位置。摇杆底部面板回到在第1步中记录的位置摇杆中心按钮回到摇杆底部面板中心位置。
onTouchEnd(event: EventTouch) {// 复原摇杆位置重置相关变量this.node.setPosition(this.originalPos)this.joystickBtn.setPosition(Vec3.ZERO)this.playerComp.isMoving falsethis.isTouchAreaCorrect false
}onTouchCancel(event: EventTouch) {// 复原摇杆位置重置相关变量this.node.setPosition(this.originalPos)this.joystickBtn.setPosition(Vec3.ZERO)this.playerComp.isMoving falsethis.isTouchAreaCorrect false
}王者荣耀中的非固定摇杆
