cocos creator从零开发虚拟摇杆(完结)-跟随移动摇杆
关注
干货悦读
公众号,获取摇杆资源。
编辑scripts/JoyStick.ts
,修改onTouchMove
方法。
private onTouchMove(event: cc.Event.EventTouch) {
if (!this._canMove) return
const posDelta = event.getDelta()
if (this.joystickType == JoystickType.Fixed || this.joystickType == JoystickType.Follow) {
this.dotNode.setPosition(this.dotNode.getPosition().add(posDelta))
const len = this.dotNode.position.len()
const maxLen = this.ringNode.width / 2
const ratio = len / maxLen
if (ratio > 1) {
this.dotNode.setPosition(this.dotNode.position.div(ratio))
}
} else {
const dotPos = this.dotNode.getPosition()
const dotPos2 = dotPos.add(posDelta)
if (dotPos2.len() <= this.ringNode.width / 2) {
this.dotNode.setPosition(dotPos2)
} else {
const dir = dotPos2.normalize()
this.dotNode.setPosition(dir.mul(this.ringNode.width / 2))
const dist = dotPos2.len() - this.ringNode.width / 2
this.ringNode.setPosition(this.ringNode.getPosition().add(dir.mul(dist)))
}
}
const dir = this.dotNode.getPosition().normalize()
this.handlers.forEach(handler => handler.emit([dir]))
this.node.emit('JoyStick', dir)
}
场景修改JoyStick
节点joystickType
值为FollowMove
并运行程序,跟随移动摇杆可以移动了。
跟随移动摇杆是移动时,如果
dot
节点在最大范围内则只移动dot
节点。如果超出最大范围则把dot
节点设置在最大范围位置,ring
节点则在当前方向加上dot
节点超出的距离。
本作品采用《CC 协议》,转载必须注明作者和本文链接