VirtualJoystick still alive. I think it still awesome class. I want to share with you my add-on for it.
It’s my Touches.ts file.
import { VirtualJoystick } from 'babylonjs'
export interface SwipeDirection {
up: boolean
down: boolean
right: boolean
left: boolean
}
class Touches {
lastStartTouchTime: number = 0
lastEndTouchTime: number = 0
lastStartHoldTime: number = 0
lastEndHoldTime: number = 0
lastStartTapTime: number = 0
lastEndTapTime: number = 0
lastEndSwipeTime: number = 0
swipe: SwipeDirection = {
up: false,
down: false,
right: false,
left: false
}
tap: boolean = false
touch: boolean = false
hold: boolean = false
holdCenter: boolean = false
startTouch: number = 0
endTouch: number = 0
startHold: number = 0
endHold: number = 0
startTap: number = 0
endTap: number = 0
endSwipe: number = 0
constructor(private stick: VirtualJoystick) {}
detect(): [SwipeDirection, boolean, boolean, boolean] {
const { pressed, deltaPosition } = this.stick
const currentTime = new Date().getTime()
this.startTouch = currentTime - this.lastStartTouchTime
this.endTouch = currentTime - this.lastEndTouchTime
this.startHold = currentTime - this.lastStartHoldTime
this.endHold = currentTime - this.lastEndHoldTime
this.startTap = currentTime - this.lastStartTapTime
this.endTap = currentTime - this.lastEndTapTime
this.endSwipe = currentTime - this.lastEndSwipeTime
const thresholdY = 0.02
const thresholdX = 0.002
const deltaY = deltaPosition.y
const deltaX = deltaPosition.x
if (pressed) {
this.lastStartTouchTime = currentTime
if (!this.tap) {
this.lastStartTapTime = currentTime;
}
if (this.endTouch < 250 && this.startTouch < 250) {
this.touch = true
//detect swipes
if (
Math.abs(deltaY) > thresholdY &&
Math.abs(deltaX) < thresholdX
) {
this.swipe.up = deltaY > 0;
this.swipe.down = deltaY < 0;
} else if (
Math.abs(deltaX) > thresholdX &&
Math.abs(deltaY) < thresholdY
) {
this.swipe.right = deltaX > 0;
this.swipe.left = deltaX < 0;
}
if (this.swipe.up || this.swipe.down || this.swipe.left || this.swipe.right) {
this.lastEndSwipeTime = currentTime;
}
} else if (this.endTouch > 250 && this.startTouch < 250) {
if (!this.hold) {
this.lastStartHoldTime = currentTime
}
this.touch = false
this.hold = true
if (this.startHold > 500 && this.startHold < 700 && Math.abs(deltaY) <= thresholdY && Math.abs(deltaX) <= thresholdX) {
// when first half second touch
this.holdCenter = true
}
}
} else {
// short tap
if (!this.tap && this.startTap < 150 && this.endSwipe > 150) {
this.tap = !(this.startTap < 150 && this.hold) && this.endTap > 50;
this.lastEndTapTime = currentTime;
} else {
this.tap = false;
}
this.reset()
this.lastEndTouchTime = currentTime
}
return [this.swipe, this.tap, this.hold, this.holdCenter]
}
reset() {
this.hold = false
this.holdCenter = false
this.touch = false
this.swipe = { up: false, down: false, right: false, left: false }
this.stick.deltaPosition.y = 0
this.stick.deltaPosition.x = 0
}
}
export default Touches
In constructor of my TouchInput.ts I do this:
this.leftJoystick = new VirtualJoystick(true)
this.rightJoystick = new VirtualJoystick(false)
this.rightTouches = new Touches(this.rightJoystick)
this.leftTouches = new Touches(this.leftJoystick)
And then I put in handle of joysticks:
this.scene.registerBeforeRender(() => {
this.handleLeftStick()
this.handleRightStick()
})
and so in handleRightStick() I just get all gestures:
const [swipe, tap, hold, holdCenter ] = this.rightTouches.detect()
And my main class with joystick become more cleaner without checks and detections of swipes or long touches. 
I understand that it would be proper to inherit a new class from VirtualJoystick and extend it by adding features like longPressed or SwipedUp, but I quickly put together this class, which I simply connect in the constructor. Who knows, someone might find it useful if they’re implementing swipes.
And also want to share function which filter stick data to make more smooth:
private filterAxisDelta(delta: number, threshold: number = 0.0001): number {
const sign = Math.sign(delta)
delta = sign * delta * delta
if (delta > threshold) {
delta -= threshold
} else if (delta < -threshold) {
delta += threshold
} else {
delta = 0
}
return delta
}
With some improvements, VirtualJoystick is actually a wonderful class. 
I don’t plan to give it up for now. Thank you for adding it. 
I’m being too harsh on this solution. Please forgive me for that. I don’t have a final opinion on this matter yet. But I really dislike such an implementation where I can’t use my application in fullscreen mode while keeping all its elements in view.
, causing some confusion. 
