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节点超出的距离。